#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2006
    Posts
    14
    Rep Power
    0

    Simplified nested horizontal menu?


    I've found a horizontal navigation menu set-up that I'd like to emulate in a simplified form but I'm having a tough time wrapping my head around what it would take.

    First, here's the site with the menu system : http://rhizome.org/

    In particular, I really like how there is a horizontal 'main menu' - 'Art', 'Community', and 'About' and below that a permanent horizontal bar that displays a submenu for each of the main menu items. I also really like that the submenu doesn't disappear immediately when you move the cursor away.

    I've examined the code but I'm having a hard time adapting and streamlining it. They don't seem to be using lists, and I would like to use lists. I've adapted menus from 'Listmatic' in the past and found them to be successful. What I'm going for is a very simple appearance with two horizontal colored bars, one above the other. The upper bar will permanently display the main menu and the lower bar will display a different submenu for each main menu item that the cursor hovers over, and the submenus won't disappear until a different main menu item is hovered over.

    I hope that all makes sense. Basically I'm not looking for someone to write all the code for me, but just perhaps something to get me in the right direction.

    Thanks in advance!
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,129
    Rep Power
    4304
    Here's a similar example that does use nested lists. It could be enhanced with some JavaScript to add a sub-menu open until another one is opened.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. Classical Computing
    Devshed Novice (500 - 999 posts)

    Join Date
    May 2008
    Location
    Melbourne, Australia
    Posts
    893
    Rep Power
    102
    For what it's worth, I quite like this example too, which uses nested lists and JS.

    GreatBooks
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2006
    Posts
    14
    Rep Power
    0
    Thank you both for your suggestions. I think those examples will be very helpful for me.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2006
    Posts
    14
    Rep Power
    0
    Originally Posted by Kravvitz
    Here's a similar example that does use nested lists. It could be enhanced with some JavaScript to add a sub-menu open until another one is opened.
    I'm sorry to bump an old topic but I have a directly related question.

    Kravvitz: your example was great. I was able to restyle the appearance and get the functioning the way I wanted it. In Firefox that is. I somehow broke it for IE so that the top level items display fine but the sub-menu displays in a vertical rather than horizontal format, and it shows up always somewhat below the first upper menu item on the left side. The example you linked appears alright in IE but without going back and starting all over again, I'm not sure how to solve my problem. I've tried tweaking much of my code but without luck. Am I correct in guessing it has something to do with heights, floats, and 'hasLayout'?

    I'd post my modified code here now if I could but I'm not at home at the moment and I don't have it with me.

    The question I'd really like to know the answer to is this: what is it about the code for that particular example that enables it to appear correctly in IE?

    Thanks in advance.
  10. #6
  11. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,795
    Rep Power
    254
    Well to check if you have hasLayout just put zoom:1; to be sure. If you don't have floats on the sub menu they will appear vertically. So give the <li>'s in the submenu a float:left;. Can you show the code you are using?
    Use markup the semantic way. You wouldn't want your dog answering the phone for you, would you?
    HTML Validator || CSS Validator -- HTML / CSS Main forums. JavaScript and PHP...maybe
    Bones: HTML; Skin: CSS; Muscle: JavaScript; Brains: PHP; Memory: MySQL
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2006
    Posts
    14
    Rep Power
    0
    Alright I went back to the original sample and started over again, but this time I think the result turned out even worse than the first time I tried to adapt it.

    Here is my modified code:

    Code:
    <style type="text/css">
    
    body {
      text-align: center;
      font-family:"Lucida Sans Unicode", "Lucida Sans", "Lucida Grande", sans-serif;
    }
    
    
    div.menuHolder {
      padding-bottom: 3em;
      text-align: left;
    }
    
    ul#exampleMenu, ul#exampleMenu li, ul#exampleMenu li ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
    }
    ul#exampleMenu {
      position: relative;
      height: 5em;
    }
    
    ul#exampleMenu:after, ul#exampleMenu div.sub:after {
      content: ".";
      display: block;
      clear: both;
      height: 0;
      visibility:hidden;
    }
    ul#exampleMenu, ul#exampleMenu div.sub {display: inline-block;}
    /* Hide from IE5/Mac \*/
    * html ul#exampleMenu, * html ul#exampleMenu div.sub {height: 1px;}
    ul#exampleMenu, ul#exampleMenu div.sub {display:block;}
    /* End hide */ 
    
    ul#exampleMenu li {
      float: left;
      width: 6em;
      text-align: center;
      }
    
    ul#exampleMenu li div.sub {
      width: 700px;
      position: relative;
      top: 0.1em;
      left: -9000px;
    }
    ul#exampleMenu li:hover div.sub,
    ul#exampleMenu li.sfhover div.sub {
      z-index: 60;
      left: 0;
    }
    *+html #exampleMenu li:hover div.sub { min-height:1em; } /* for IE7 */
    
    ul#exampleMenu li span.pad {
      display:none;
    }
    ul#exampleMenu li:hover span.pad,
    ul#exampleMenu li.sfhover span.pad {
      display: block;
      height: .6em;
      font-size: .5em;
      line-height: .5em;
      width: 100%;
      position:relative;
      bottom: -.2em;
    }
    
    ul#exampleMenu li.item1,
    ul#exampleMenu li.item1 span.pad,
    ul#exampleMenu li.item1 ul {
      background-color: #fff;
    }
    ul#exampleMenu li.item2,
    ul#exampleMenu li.item2 span.pad,
    ul#exampleMenu li.item2 ul {
      background-color: #fff;
    }
    ul#exampleMenu li.item3,
    ul#exampleMenu li.item3 span.pad,
    ul#exampleMenu li.item3 ul {
      background-color: #fff;
    }
    ul#exampleMenu li.item4,
    ul#exampleMenu li.item4 span.pad,
    ul#exampleMenu li.item4 ul {
      background-color: #fff;
    }
    
    ul#exampleMenu li ul {
      float: left;
    }
    ul#exampleMenu li li {
      float: left;
    }
    ul#exampleMenu li li.first {
      margin: 0;
    }
    
    ul#exampleMenu li a,
    ul#exampleMenu li a:hover,
    ul#exampleMenu li li a:hover {
      text-decoration: none;
      color: #333;
      display: block;
      padding: .25em 0;
      font-size: 0.9em;
      line-height: 1.2em;
      width: 6em;
      border-bottom: 1px solid #5C5C5C;
    }
    
    ul#exampleMenu li a:hover {
    background-color: #C5C5AF;}
    
    
    ul#exampleMenu li li a:hover {
      background-color: #ddd;
    }
    
    /*\*/
    #exampleMenu li ul>li, #exampleMenu li ul>li a {
      float: none;
      display:inline-block;
    }
    #exampleMenu li ul>li:hover { background-color: #ddd; } /* for Opera 7 */
    ul#exampleMenu li ul>* { float: left; }
    *+html #exampleMenu li ul li { float: left; }
    ul#exampleMenu li ul>li * { display: block; }
    *+html #exampleMenu li ul li a { display: block; }
    
    </style>
    <script type="text/javascript"><!--
    function dss_addEvent(el,etype,fn) {
      if(el.addEventListener && (!window.opera || opera.version) &&
      (etype!='load')) {
        el.addEventListener(etype,fn,false);
      } else if(el.attachEvent) {
        el.attachEvent('on'+etype,fn);
      } else {
        if(typeof(fn)!="function")return;
        var tempFunc=el['on'+etype];
        el['on'+etype]=function() {
          if(typeof(tempFunc)=="function")tempFunc();
          fn();
        }
      }
    }
    function sfHover() {
    	var sfEls = document.getElementById('exampleMenu').getElementsByTagName('LI');
    	for (var i=0; i<sfEls.length; i++) {
    		sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
    		}
    		sfEls[i].onmouseout=function() {
    			this.className=this.className.replace(' sfhover', '');
    		}
    	}
    }
    var DOM1 = (document.getElementsByTagName && document.createTextNode)?1:0;
    var IE5or6 = (DOM1 && document.defaultCharset && !window.home && 
      !window.XMLHttpRequest)?1:0;
    var IEmac = (document.defaultCharset && !window.print && !window.home)?1:0;
    var Opera7 = (window.opera && opera.buildNumber && !isNaN(opera.buildNumber()) 
      && !opera.version);
    if((IE5or6 && !IEmac) || Opera7) dss_addEvent(window,"load",sfHover);
    // -->
    </script>
    Note: I did not modify the html at all from the original example:

    Code:
    <div class="menuHolder">
    
    <ul id="exampleMenu">
      <li class="item1"><a href="#">link 1</a>
        <span class="pad"></span>
        <div class="sub"><ul>
          <li class="first"><a href="#">link 5</a></li>
          <li><a href="#">link 6</a></li>
          <li><a href="#">link 7</a></li>
    
          <li><a href="#">link 8</a></li>
      </ul></div></li>
      <li class="item2"><a href="#">link 2</a>
        <span class="pad"></span>
        <div class="sub"><ul>
          <li class="first"><a href="#">link 9</a></li>
          <li><a href="#">link 10</a></li>
    
          <li><a href="#">link 11</a></li>
          <li><a href="#">link 12</a></li>
      </ul></div></li>
      <li class="item3"><a href="#">link 3</a>
        <span class="pad"></span>
        <div class="sub"><ul>
          <li class="first"><a href="#">link 13</a></li>
    
          <li><a href="#">link 14</a></li>
          <li><a href="#">link 15</a></li>
          <li><a href="#">link 16</a></li>
      </ul></div></li>
      <li class="item4"><a href="#">link 4</a>
        <span class="pad"></span>
        <div class="sub"><ul>
    
          <li class="first"><a href="#">link 17</a></li>
          <li><a href="#">link 18</a></li>
          <li><a href="#">link 19</a></li>
          <li><a href="#">link 20</a></li>
      </ul></div></li>
    </ul>
    </div>
    The problems:
    - I want 'border-bottom' on the links to appear as a solid horizontal line connecting all list items, with no gaps
    - On the second tier, there's some strangeness with the hover background color on the links
    - IE: whereas before in IE the top level of the menu was displaying horizontally and the second level was vertical, now in IE the whole thing appears vertical for me

    - I'm also wondering if there is some way to keep the top level parent menu item highlighted while hovering over the second level child menu
  14. #8
  15. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,795
    Rep Power
    254
    Code:
    ul#exampleMenu li ul>* { float: left; }
    Put a space from ul> *

    Probably won't do anything but maybe a space is needed. I'm spacing now and will look at it very soon, stand by. Make sure you have a float anywhere the submenu might appear in the CSS.
    Use markup the semantic way. You wouldn't want your dog answering the phone for you, would you?
    HTML Validator || CSS Validator -- HTML / CSS Main forums. JavaScript and PHP...maybe
    Bones: HTML; Skin: CSS; Muscle: JavaScript; Brains: PHP; Memory: MySQL
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2006
    Posts
    14
    Rep Power
    0
    Thanks for the reply!

    I'm still confused about what's causing the problem. I tried to make only cosmetic changes to the original (colors, font etc.) and leave the structure alone but I still managed to mess it up.
  18. #10
  19. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,795
    Rep Power
    254
    Too many changes to make you do...I just wrote it for you. Displays in IE7 fine for me, yet I don't have access to a different browser.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Test for person on DevShed</title>
    <style type="text/css">
    body {
      text-align: center;
      font-family:"Lucida Sans Unicode", "Lucida Sans", "Lucida Grande", sans-serif;
    }
    
    
    div.menuHolder {
      padding-bottom: 3em;
      text-align: left;
      margin:0;
      padding:0;
    }
    
    ul#exampleMenu, ul#exampleMenu li, ul#exampleMenu li ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
    }
    ul#exampleMenu {
      position: relative;
      height: 5em;
      margin:0;
      padding:0;
    
    }
    
    ul#exampleMenu:after, ul#exampleMenu div.sub:after {
      content: ".";
      display: block;
      clear: both;
      height: 0;
      visibility:hidden;
    }
    ul#exampleMenu, ul#exampleMenu div.sub {display: inline-block;}
    /* Hide from IE5/Mac \*/
    * html ul#exampleMenu, * html ul#exampleMenu div.sub {height: 1px;}
    ul#exampleMenu, ul#exampleMenu div.sub {display:block;}
    /* End hide */ 
    
    ul#exampleMenu li {
      float: left;
      width: 6em;
      text-align: center;
      }
    
    ul#exampleMenu li div.sub {
      width: 400px;
      position: relative;
      top: 0.1em;
      left: -9000px;
      border-bottom:1px solid #000;
      margin:0;
      padding:0;
    }
    ul#exampleMenu li:hover div.sub,
    ul#exampleMenu li.sfhover div.sub {
      z-index: 60;
      left: 0px;
      margin:0;
      padding:0;
    }
    *+html #exampleMenu li:hover div.sub { min-height:1em; } /* for IE7 */
    
    ul#exampleMenu li span.pad {
      display:none;
    }
    ul#exampleMenu li:hover span.pad,
    ul#exampleMenu li.sfhover span.pad {
      display: block;
      height: .6em;
      font-size: .5em;
      line-height: .5em;
      width: 100%;
      position:relative;
      bottom: -.2em;
    }
    
    ul#exampleMenu li.item1 a.cool, li.item2 a.cool, li.item3 a.cool, li.item4 a.cool {
      border-bottom:1px solid #5c5c5c;
    }
    ul#exampleMenu li.item1 span.pad,
    ul#exampleMenu li.item1 ul {
      background-color: #fff;
      margin:0;
      padding:0;
    }
    ul#exampleMenu li.item2,
    ul#exampleMenu li.item2 span.pad,
    ul#exampleMenu li.item2 ul {
      background-color: #fff;
    }
    ul#exampleMenu li.item3,
    ul#exampleMenu li.item3 span.pad,
    ul#exampleMenu li.item3 ul {
      background-color: #fff;
    }
    ul#exampleMenu li.item4,
    ul#exampleMenu li.item4 span.pad,
    ul#exampleMenu li.item4 ul {
      background-color: #fff;
    }
    
    ul#exampleMenu li ul {
      float: left;
    }
    ul#exampleMenu li li {
      float: left;
    }
    ul#exampleMenu li li.first {
      margin: 0;
    }
    
    ul#exampleMenu li a {
      text-decoration: none;
      color: #333;
      display: block;
      padding: .25em 0;
      font-size: 0.9em;
      line-height: 1.2em;
      width: 6em;
    
    }
    ul#exampleMenu li a:hover,
    ul#exampleMenu li li a:hover {
      text-decoration: none;
      color: #333;
      display: block;
      padding: .25em 0;
      font-size: 0.9em;
      line-height: 1.2em;
      width: 6em;
    }
    
    ul#exampleMenu li a:hover {
    background-color: #C5C5AF;}
    
    
    ul#exampleMenu li li a:hover {
      background-color: #ddd;
    }
    
    /*\*/
    #exampleMenu li ul>li, #exampleMenu li ul>li a {
      float: none;
      display:inline-block;
    }
    #exampleMenu li ul>li:hover { background-color: #ddd; } /* for Opera 7 */
    ul#exampleMenu li ul>* { float: left; }
    *+html #exampleMenu li ul li { float: left; }
    ul#exampleMenu li ul>li * { display: block; }
    *+html #exampleMenu li ul li a { display: block; }
    
    </style>
    <script type="text/javascript"><!--
    function dss_addEvent(el,etype,fn) {
      if(el.addEventListener && (!window.opera || opera.version) &&
      (etype!='load')) {
        el.addEventListener(etype,fn,false);
      } else if(el.attachEvent) {
        el.attachEvent('on'+etype,fn);
      } else {
        if(typeof(fn)!="function")return;
        var tempFunc=el['on'+etype];
        el['on'+etype]=function() {
          if(typeof(tempFunc)=="function")tempFunc();
          fn();
        }
      }
    }
    function sfHover() {
    	var sfEls = document.getElementById('exampleMenu').getElementsByTagName('LI');
    	for (var i=0; i<sfEls.length; i++) {
    		sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
    		}
    		sfEls[i].onmouseout=function() {
    			this.className=this.className.replace(' sfhover', '');
    		}
    	}
    }
    var DOM1 = (document.getElementsByTagName && document.createTextNode)?1:0;
    var IE5or6 = (DOM1 && document.defaultCharset && !window.home && 
      !window.XMLHttpRequest)?1:0;
    var IEmac = (document.defaultCharset && !window.print && !window.home)?1:0;
    var Opera7 = (window.opera && opera.buildNumber && !isNaN(opera.buildNumber()) 
      && !opera.version);
    if((IE5or6 && !IEmac) || Opera7) dss_addEvent(window,"load",sfHover);
    // -->
    </script>
    </head>
    <body>
    <div class="menuHolder">
    
    <ul id="exampleMenu">
      <li class="item1"><a href="#" class="cool">link 1</a>
        <span class="pad"></span>
        <div class="sub"><ul>
          <li class="first"><a href="#">link 5</a></li>
          <li><a href="#">link 6</a></li>
          <li><a href="#">link 7</a></li>
    
          <li><a href="#">link 8</a></li>
      </ul></div></li>
      <li class="item2"><a href="#" class="cool">link 2</a>
        <span class="pad"></span>
        <div class="sub"><ul>
          <li class="first"><a href="#">link 9</a></li>
          <li><a href="#">link 10</a></li>
    
          <li><a href="#">link 11</a></li>
          <li><a href="#">link 12</a></li>
      </ul></div></li>
      <li class="item3"><a href="#" class="cool">link 3</a>
        <span class="pad"></span>
        <div class="sub"><ul>
          <li class="first"><a href="#">link 13</a></li>
    
          <li><a href="#">link 14</a></li>
          <li><a href="#">link 15</a></li>
          <li><a href="#">link 16</a></li>
      </ul></div></li>
      <li class="item4"><a href="#" class="cool">link 4</a>
        <span class="pad"></span>
        <div class="sub"><ul>
    
          <li class="first"><a href="#">link 17</a></li>
          <li><a href="#">link 18</a></li>
          <li><a href="#">link 19</a></li>
          <li><a href="#">link 20</a></li>
      </ul></div></li>
    </ul>
    </div>
    </body>
    </html>
    Use markup the semantic way. You wouldn't want your dog answering the phone for you, would you?
    HTML Validator || CSS Validator -- HTML / CSS Main forums. JavaScript and PHP...maybe
    Bones: HTML; Skin: CSS; Muscle: JavaScript; Brains: PHP; Memory: MySQL

IMN logo majestic logo threadwatch logo seochat tools logo