Expand / Collapse Vertical Menus

I was going over this article on sitepoint:

Near the bottom of page 1, and at the top of page two, it shows a vertical navigation system with sub menu. The basic HTML List looks like this:

<div id="navigation">
 <ul>
   <li><a href="#">Recipes</a>
     <ul>
       <li><a href="#">Starters</a></li>
       <li><a href="#">Main Courses</a></li>
       <li><a href="#">Desserts</a></li>
     </ul>
   </li>
   <li><a href="#">Contact Us</a></li>
   <li><a href="#">Articles</a></li>
   <li><a href="#">Buy Online</a></li>
 </ul>
</div> 

The CSS Code looks like this:


#navigation {
 width: 200px;
}
#navigation ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
#navigation li {
 border-bottom: 1px solid #ED9F9F;
}
#navigation li a:link, #navigation li a:visited  {
 font-size: 90%;
 display: block;
 padding: 0.4em 0 0.4em 0.5em;
 border-left: 12px solid #711515;
 border-right: 1px solid #711515;
 background-color: #B51032;
 color: #FFFFFF;
 text-decoration: none;
}
#navigation li a:hover {
 background-color: #711515;
 color: #FFFFFF;
}
#navigation ul ul {
 margin-left: 12px;
}
#navigation ul ul li {
 border-bottom: 1px solid #711515;
 margin:0;
}
#navigation ul ul a:link, #navigation ul ul a:visited {
 background-color: #ED9F9F;
 color: #711515;
}
#navigation ul ul a:hover {
 background-color: #711515;
 color: #FFFFFF;
}

I understand how this is working, how to adjust the look, etc… but as it sits, the entire menu system opens up when a page is loaded. Top level and second level. I only want the 2nd level to open, if the top level is chosen. Can this be done within CSS, or do I need to look at a Javascript solution?

There is something missing from the CSS there. Certainly dropdowns work fine with CSS. There should be a rule that hides the submenus until the top-level <li>s are hovered.

EDIT: ah, sorry, this is a different dropdown from what I thought. It may be better to use JS/jQuery if you want that opening/shutting effect.

Hi, if you just want to hide the submenu why not just hide it? :). For clicking events use JS, but for just hover this should work fine. Untested though.

#navigation {
 width: 200px;
}
#navigation ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
#navigation li {
 border-bottom: 1px solid #ED9F9F;
 [b]position:relative;[/b]
}
#navigation li a:link, #navigation li a:visited  {
 font-size: 90&#37;;
 display: block;
 padding: 0.4em 0 0.4em 0.5em;
 border-left: 12px solid #711515;
 border-right: 1px solid #711515;
 background-color: #B51032;
 color: #FFFFFF;
 text-decoration: none;
}
#navigation li a:hover {
 background-color: #711515;
 color: #FFFFFF;
}
#navigation ul ul {
 [b]margin-left: -999em;/*was 12px*/
 position:absolute;
 top:0;
 left:100%;[/b]
}
[b]#navigation li:hover ul {
 margin-left:0;
}[/b]
#navigation ul ul li {
 border-bottom: 1px solid #711515;
 margin:0;
 [b]position:static;[/b]
}
#navigation ul ul a:link, #navigation ul ul a:visited {
 background-color: #ED9F9F;
 color: #711515;
}
#navigation ul ul a:hover {
 background-color: #711515;
 color: #FFFFFF;
}

IE6 will need hover support though :slight_smile:

If that is too basic for what you want use javascript :).

Thanks for the help Ryan, your solution absolutely works for a hover, but I want more of an expandable approach.

This is what the menu from the SitePoint articles looks like on a page:
http://pra.hindsite.ca/resources/menu/test1

This is more of the effect I am looking for:
http://pra.hindsite.ca/resources/menu/test2

OK - so the 2nd one does what I want, why not use it? This was made with an old DW Extension from Interakt and it isn’t supported anymore, and has a lot of limitations (ie: The box that expands a section cannot link to a page (eg: recipes), you cannot go more than one level deep, etc… etc…).

I am simply looking for a new way to build these types of menu systems. They use JavaScript to create expansion, I guess I was hoping for a pure CSS solution - if it existed. That article on sitepoint showed some great design tips, now I’m just looking for a way to make it function!

I guess I may need to get my feet wet with JavaScript :slight_smile:

You may not have heard of Stu Nichols, but he presents lots and lots of dropdown menus on his site. On this page he presents a vast array of CSS-only dropdowns:

http://www.cssplay.co.uk/menus/

But I don’t see any that behave quite as you want. He also has lots of menus that also use JavaScript, and here’s a nice example of what you are trying to achieve:

http://www.stunicholls.com/menu/tree_frog_vertical.html

I modified this for a client not so long ago. Hope that helps.

ralph.m > Thanks for that tip! I just did a quick browse and there are several menu’s there that might do the trick for me. In general they are not styled, but that is fine - as I have a handle on the CSS side of things.

That’s called an accordian menu and JS is generally needed for taht so happy picking :).

Yeah, it’s rare that you would find one styled to suit your need. I always have to play around with the CSS if I use any of these.