CSS Horizontal sub menu help

  • # November 28, 2008 at 5:42 pm

    This reply has been reported for inappropriate content.

    Ok Al try this:

    In between your <head> tags put this:

    Code:
    div#navigation-bg {
    height:66px;
    background: url(images/navigation-bg.gif) 0 0 repeat-x;
    }
    div#navigation-bg div#navigation {
    width:922px;
    margin:0 auto;
    }
    div#navigation-bg div#navigation ul.menu {
    padding:0;
    float:left;
    width:567px;
    list-style: none;
    }
    div#navigation-bg div#navigation ul.menu li {
    width:81px;
    float:left;
    background:url(images/navigation-divider.gif) 100% 0 no-repeat;
    }
    div#navigation-bg div#navigation ul.menu li a {
    width:80px;
    height:33px;
    display:block;
    line-height:33px;
    text-align:center;
    font-weight:bold;
    color:#FAF0C2;
    font-size:11px;
    }
    div#navigation-bg div#navigation ul.menu li a:hover {
    background:url(images/navigation-bg-selected.gif) 0 0 no-repeat;
    }
    div#navigation-bg div#navigation ul.menu li a.selectMenu {
    width:80px;
    height:33px;
    display:block;
    line-height:33px;
    text-align:center;
    font-weight:bold;
    color:#FAF0C2;
    font-size:11px;
    background:url(images/navigation-bg-selected.gif) 0 0 no-repeat;
    }
    .spacer {
    clear: both;
    overflow: auto;
    }
    /*————————– DROP DOWN MENU STARTS ————————–*/
    ul.subNav {
    font:normal 11px/12px Arial, Helvetica, sans-serif;
    padding:4px 0 0 0;
    list-style: none;
    }
    ul.subNav li {
    background:url(images/navigation-dropdown-divider.gif) 0 0 no-repeat;
    height:17px;
    float:left;
    padding:6px 0 0 0;
    }
    ul.subNav li a {
    display:block;
    margin:0 22px 0 20px;
    color:#84915D;
    }
    ul.subNav li a:hover {
    color:#fff;
    }
    /*————————– DROP DOWN MENU ENDS ————————–*/

    div#navigation-bg div#navigation a.signup {
    width:71px;
    height:28px;
    display:block;
    background:url(images/sign-up-btn.gif) 0 0 no-repeat;
    margin:2px 0 0 0;
    float:right;
    }
    div#navigation-bg div#navigation a.signup:hover {
    background:url(images/sign-up-btn-selected.gif) 0 0 no-repeat;
    }
    /***********************************************************************************************

    Copyright (c) 2005 – Alf Magne Kalleland post@dhtmlgoodies.com

    Get this and other scripts at http://www.dhtmlgoodies.com

    You can use this script freely as long as this copyright message is kept intact.

    ***********************************************************************************************/
    body{
    font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
    margin-top:0px;

    }
    .bodyText{
    padding-left:10px;
    padding-right:10px;
    border-top:1px solid #000000;
    }
    .bodyText p{
    margin-top:5px;
    }
    #mainContainer{
    width:760px;
    height:600px;
    border:1px solid #000000;
    margin:0 auto;
    background-image:url(‘../../images/heading3.gif’) #f00;
    background-repeat:no-repeat;
    padding-top:85px;
    }
    #mainMenu{
    background-color: #FFF; /* Background color of main menu */
    font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; /* Fonts of main menu items */
    font-size:0.9em; /* Font size of main menu items */
    border-bottom:1px solid #000000; /* Bottom border of main menu */
    height:30px; /* Height of main menu */

    position:relative; /* Don’t change this position attribute */

    }
    #mainMenu a{
    padding-left:5px; /* Spaces at the left of main menu items */
    padding-right:5px; /* Spaces at the right of main menu items */
    font-weight:bold;
    /* Don’t change these two options */
    position:absolute;
    bottom:-2px; /* Change this value to -2px if you’re not using a strict doctype */
    }
    #submenu{
    font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; /* Font of sub menu items */
    background-color:#E2EBED; /* Background color of sub menu items */

    width:100%; /* Don’t change this option */

    }
    #submenu div{
    white-space:nowrap; /* Don’t change this option */

    }
    /*
    Style attributes of active menu item
    */
    #mainMenu .activeMenuItem{
    /* Border options */
    border-left:1px solid #000000;
    border-top:1px solid #000000;
    border-right:1px solid #000000;
    background-color: #E2EBED; /* Background color */

    cursor:pointer; /* Cursor like a hand when the user moves the mouse over the menu item */
    }

    #mainMenu .activeMenuItem img{
    position:absolute;
    bottom:0px;
    right:0px;
    }

    /*
    Style attributes of inactive menu items
    */
    #mainMenu .inactiveMenuItem{
    color: #000; /* Text color */
    cursor:pointer; /* Cursor like a hand when the user moves the mouse over the menu item */
    }

    #submenu a{
    text-decoration:none; /* No underline on sub menu items – use text-decoration:underline; if you want the links to be underlined */
    padding-left:5px; /* Space at the left of each sub menu item */
    padding-right:5px; /* Space at the right of each sub menu item */
    color: #000; /* Text color */
    font-size:0.9em;
    }

    #submenu a:hover{
    color: #FF0000; /* Red color when the user moves the mouse over sub menu items */
    }

    /***********************************************************************************************

    Copyright (c) 2005 – Alf Magne Kalleland post@dhtmlgoodies.com

    Get this and other scripts at http://www.dhtmlgoodies.com

    You can use this script freely as long as this copyright message is kept intact.

    ***********************************************************************************************/
    var menuAlignment = ‘left’; // Align menu to the left or right?
    var topMenuSpacer = 0; // Horizontal space(pixels) between the main menu items
    var activateSubOnClick = false; // if true-> Show sub menu items on click, if false, show submenu items onmouseover
    var leftAlignSubItems = false; // left align sub items t

    var activeMenuItem = false; // Don’t change this option. It should initially be false
    var activeTabIndex = 0; // Index of initial active tab (0 = first tab) – If the value below is set to true, it will override this one.
    var rememberActiveTabByCookie = true; // Set it to true if you want to be able to save active tab as cookie

    var MSIE = navigator.userAgent.indexOf(‘MSIE’)>=0?true:false;
    var Opera = navigator.userAgent.indexOf(‘Opera’)>=0?true:false;
    var navigatorVersion = navigator.appVersion.replace(/.*?MSIE ([0-9].[0-9]).*/g,’$1′)/1;

    /*
    These cookie functions are downloaded from
    http://www.mach5.com/support/analyzer/manual/html/General/CookiesJavaScript.htm
    */
    function Get_Cookie(name) {
    var start = document.cookie.indexOf(name+”=”);
    var len = start+name.length+1;
    if ((!start) && (name != document.cookie.substring(0,name.length))) return null;
    if (start == -1) return null;
    var end = document.cookie.indexOf(“;”,len);
    if (end == -1) end = document.cookie.length;
    return unescape(document.cookie.substring(len,end));
    }
    // This function has been slightly modified
    function Set_Cookie(name,value,expires,path,domain,secure) {
    expires = expires * 60*60*24*1000;
    var today = new Date();
    var expires_date = new Date( today.getTime() + (expires) );
    var cookieString = name + “=” +escape(value) +
    ( (expires) ? “;expires=” + expires_date.toGMTString() : “”) +
    ( (path) ? “;path=” + path : “”) +
    ( (domain) ? “;domain=” + domain : “”) +
    ( (secure) ? “;secure” : “”);
    document.cookie = cookieString;
    }

    function showHide()
    {
    if(activeMenuItem){
    activeMenuItem.className = ‘inactiveMenuItem’;
    var theId = activeMenuItem.id.replace(/[^0-9]/g,”);
    document.getElementById(‘submenu_’+theId).style.display=’none’;
    var img = activeMenuItem.getElementsByTagName(‘IMG’);
    if(img.length>0)img[0].style.display=’none’;
    }

    var img = this.getElementsByTagName(‘IMG’);
    if(img.length>0)img[0].style.display=’inline’;

    activeMenuItem = this;
    this.className = ‘activeMenuItem’;
    var theId = this.id.replace(/[^0-9]/g,”);
    document.getElementById(‘submenu_’+theId).style.display=’block’;

    if(rememberActiveTabByCookie){
    Set_Cookie(‘dhtmlgoodies_tab_menu_tabIndex’,’index: ‘ + (theId-1),100);
    }
    }

    function initMenu()
    {
    var mainMenuObj = document.getElementById(‘mainMenu’);
    var menuItems = mainMenuObj.getElementsByTagName(‘A’);
    if(document.all){
    mainMenuObj.style.visibility = ‘hidden’;
    document.getElementById(‘submenu’).style.visibility=’hidden’;
    }
    if(rememberActiveTabByCookie){
    var cookieValue = Get_Cookie(‘dhtmlgoodies_tab_menu_tabIndex’) + ”;
    cookieValue = cookieValue.replace(/[^0-9]/g,”);
    if(cookieValue.length>0 && cookieValue<menuItems.length){
    activeTabIndex = cookieValue/1;
    }
    }

    var currentLeftPos = 15;
    for(var no=0;no0){
    img[0].style.display=’none’;
    if(MSIE && !Opera && navigatorVersion0)img[0].style.display=’inline’;

    }else menuItems[no].className=’inactiveMenuItem’;
    if(!document.all)menuItems[no].style.bottom = ‘-1px’;
    if(MSIE && navigatorVersion parentWidth){
    leftPos = leftPos – Math.max(0,subItem.offsetWidth-parentWidth);
    }
    subItem.style.paddingLeft = leftPos + ‘px’;
    subItem.style.position =’static’;

    }
    if(subCounter==(activeTabIndex+1)){
    subItem.style.display=’block’;
    }else{
    subItem.style.display=’none’;
    }

    subCounter++;
    }
    if(document.all){
    mainMenuObj.style.visibility = ‘visible’;
    document.getElementById(‘submenu’).style.visibility=’visible’;
    }
    document.getElementById(‘submenu’).style.display=’block’;
    }
    window.onload = initMenu;

    And where you want your menu to appear, put this:

    That should do the trick.

    When you are happy with it, you can put everything in seperate files :)

    # November 28, 2008 at 5:44 pm

    This reply has been reported for inappropriate content.

    Incase it isn’t obvious, alter this:

    <div id="mainMenu">
    <a>Home</a>
    <a>About</a>
    <a>Voice</a>
    <a>Internet</a>
    <a>Assistance</a>
    <a>Links &amp; News</a>
    <a>Contact</a>
    </div>

    To include whatever you want your top level menu items to be. For each of those there needs to be a seperate sub menu, alter what appears in the sub menus by editing this:

    <div id="submenu_1">
    <a href="#">Product 1</a>
    <a href="#">Product 2</a>
    <a href="#">Product 3</a>
    </div>

    # November 28, 2008 at 7:52 pm

    Thanks Mike

    I’ll try this out on Monday when I get back in the office :)

    # December 1, 2008 at 12:39 pm

    Tested it out…VERY close, this is about as far as I got as well. The problem being, as soon as I put the information where I want the menu to appear, it’s overwriting what I’ve stated it to appear like. It’s looking just like the one from dhtmlgoodies.com My images, fonts, colors, etc are not used :?: How can I redirect it to look at the css it should be

    # December 1, 2008 at 6:10 pm

    This reply has been reported for inappropriate content.

    You need to go through the CSS from DHTML goodies that I posted, and change that to match your own styles.

    # June 3, 2013 at 12:04 pm

    Holy moly Mike, you went through a lot of work to make this happen. Kudos to you! Also, thanks to everyone for posting those resources. Im trying to make a horizontal sub-menu too, and these resources were great!

    # June 3, 2013 at 12:06 pm

    Please, use CodePen or JSFiddle for reduced test cases.

    # June 3, 2013 at 12:12 pm

    CodePen didn’t exist 5 years ago

    # June 3, 2013 at 12:14 pm

    Oh, waw. I should definitely pay more attention to post date. :)

Viewing 9 posts - 16 through 24 (of 24 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed