Dynamic Drive CSS Library- Nested Side Bar Menu

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: Vertical CSS Menus: Here

Nested Side Bar Menu

Author: Dynamic Drive

This is a simple yet professional looking multi level side menu. Markup wise it's just a regular nested UL list, turned into a drop down menu using a very small JavaScript code. Note that the menu's background should be a solid color instead of a background image, as the later property is reserved to show the right arrow images that appear next to menu items with additional sub menus.

Demo:

The Right Arrow Image:

The CSS:

<style type="text/css">

.sidebarmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: bold 13px Verdana;
width: 180px; /* Main Menu Item widths */
border-bottom: 1px solid #ccc;
}
 
.sidebarmenu ul li{
position: relative;
}

/* Top level menu links style */
.sidebarmenu ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;
text-decoration: none;
padding: 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}

.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background-color: #012D58; /*background of tabs (default state)*/
}

.sidebarmenu ul li a:visited{
color: white;
}

.sidebarmenu ul li a:hover{
background-color: black;
}

/*Sub level menu items */
.sidebarmenu ul li ul{
position: absolute;
width: 170px; /*Sub Menu Items width */
top: 0;
visibility: hidden;
}

.sidebarmenu a.subfolderstyle{
background: url(right.gif) no-repeat 97% 50%;
}

 
/* Holly Hack for IE \*/
* html .sidebarmenu ul li { float: left; height: 1%; }
* html .sidebarmenu ul li a { height: 1%; }
/* End */

</style>

<script type="text/javascript">

//Nested Side Bar Menu (Mar 20th, 09)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas

function initsidebarmenu(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids<i>).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
  if (ultags[t].parentNode.parentNode.id==menuids<i>) //if this is a first level submenu
   ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
  else //else if this is a sub level submenu (ul)
    ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
  for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
  ultags[t].style.visibility="visible"
  ultags[t].style.display="none"
  }
  }
}

if (window.addEventListener)
window.addEventListener("load", initsidebarmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", initsidebarmenu)

</script>

The HTML:

<div class="sidebarmenu">
<ul id="sidebarmenu1">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  </ul>
</li>
<li><a href="#">Item 3</a></li>

<li><a href="#">Folder 2</a>
  <ul>
  <li><a href="#">Sub Item 2.1</a></li>
  <li><a href="#">Folder 2.1</a>
    <ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Sub Item 2.1.3</a></li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
  </li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
</div>

Code Info

Rate this code:

Date Posted: 03/20/2009

Revision History: None

Usage Terms: Click here

Your Comments (24)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 1 of 3 pages 1 2 3 >

how can i add the right arrow image? sorry for askin .. newbie here thanks for helping me in advance

Posted by Freakinerick on 03/24, 11:57 PM

Is there a way to run the multiple layer menus without a script?

Posted by Chris on 03/25, 08:33 AM

That's what i needed, compatible to the …ucking IE6 an IE7.

Very good work! Thank you!

Posted by typo3ler on 03/26, 02:31 PM

I like to add the picture "arrow" and don't know how to do it. Need help please. This is a fantastic script and now I can't do without

Posted by Nadeem Khan on 03/27, 03:01 PM

how to make this menu appear up to every things in my page

Posted by Mohammed Jalala on 04/01, 01:18 AM

I'm a beginner, how dow I create a nice drop menu from csratch, and where do I place the css in my html?
Please explain everything. Thak you.

Posted by Celon G on 04/08, 03:25 PM

How do you keep the menu from moving? I want it to be fixed but it moves depending on the text in the body.

Thanks for the code; it's great! =)

Posted by Ziggy T on 04/13, 06:16 PM

Can I control how the sub menus display? MY menu will have more subitems than the screen can show so I would like the submenu to automatically shift according to the availble screen space. (Like microsoft does when you are browsing through folders on my computer...if theres not enough room to drop the menu below it drops it up.) Can this be done in style sheets? Can someone tell me how?

Posted by Janice on 04/14, 11:01 AM

This is nice. Thanks.

Posted by gratis on 04/17, 07:06 AM

Hi. Thanks for this great menu.

However, I seem to have found a bug. It appears that long (wrapping) text in submenus will not appear on IE 7.

Increasing the size of the submenu ul fixes the problem, but this has to be tested manually every time the menu tree contents are updated.

Are there any other solutions?

Thanks!

Posted by Daundefinedoud on 04/23, 06:10 AM

Comment Pages 1 of 3 pages 1 2 3 >

Commenting is not available in this weblog entry.