• Horizontal CSS Menus
• Vertical CSS Menus
• Image CSS
• Form CSS
• DIVs and containers
• Links & Buttons
• CSS3 demos
• Other
• Browse All

• Hosting Discounts

• Layouts Index
• Two Columns
• Three Columns
• Fixed layouts
• Liquid Layouts
• CSS Frames

CSS Library: Vertical CSS Menus: Here

Nested Side Bar Menu

Author: Dynamic Drive

This pure CSS sidebar menu supports multiple levels and similar refinements as its JavaScript based counterparts. Mobile friendly, the last level sub menu drops down to the left (instead of default right) at the desired screen size and below, and on very small screens, the sub menus all drop downwards instead of to the side so they remain accessible. On rollover, the currently active parent menu item(s) remain highlighted with a background color as the user delves deeper into the sub levels. Nested Side Bar Menu works in IE 8+ and mobile devices reasonably well, plus all modern browsers.

Demo:

The CSS:

<link href="http://fonts.googleapis.com/css?family=Bitter&subset=latin" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="nestedsidemenu.css" />

The code above references nestedsidemenu.css (right click, and select "Save As").

The HTML:

<div class="nestedsidemenu"> <ul> <li><a href="#">Item 1</a></li> <li><a href="javascript:vold(0)">Folder 1</a> <ul> <li><a href="#">Sub Item 1.1</a></li> <li><a href="#">Sub Item 1.2</a></li> <li><a href="#">Sub Item 1.3</a></li> <li><a href="#">Sub Item 1.4</a></li> <li><a href="#">Sub Item 1.2</a></li> <li><a href="#">Sub Item 1.3</a></li> <li><a href="#">Sub Item 1.4</a></li> </ul> </li> <li><a href="javascript:vold(0)">Folder 2</a> <ul> <li><a href="#">Sub Item 2.1</a></li> <li><a href="#">Sub Item 2.2</a></li> <li><a href="javascript:vold(0)">Folder 2.3</a> <ul> <li><a href="#">Sub Item 2.3.1</a></li> <li><a href="#">Sub Item 2.3.2</a></li> <li><a href="#">Sub Item 2.3.3</a></li> <li><a href="#">Sub Item 2.3.4</a></li> </ul> </li> <li><a href="#">Sub Item 2.4</a></li> <li><a href="#">Sub Item 2.5</a></li> <li><a href="#">Sub Item 2.6</a></li> <li><a href="#">Sub Item 2.7</a></li> </ul> </li> <li><a href="#">Item 3</a></li> <li><a href="javascript:vold(0)">Folder 3</a> <ul> <li><a href="#">Sub Item 3.1</a></li> <li><a href="javascript:vold(0)">Folder 3.2</a> <ul> <li><a href="#">Sub Item 3.2.1</a></li> <li><a href="#">Sub Item 3.2.2</a></li> <li><a href="javascript:vold(0)">Folder 3.2.3</a> <ul> <li><a href="#">Sub Item 3.2.3.1</a></li> <li><a href="#">Sub Item 3.2.3.2</a></li> <li><a href="#">Sub Item 3.2.3.3</a></li> <li><a href="#">Sub Item 3.2.3.4</a></li> <li><a href="#">Sub Item 3.2.3.5</a></li> </ul> </li> <li><a href="#">Sub Item 3.2.4</a></li> </ul> </li> </ul> </li> <li><a href="https://twitter.com/ddrivegeorge">Twitter</a></li> </ul> <br style="clear: left" /> </div>

Notice in the HTML markup how the menu header links (those that lead to a drop down) uses "javascript:vold(0)" as their "href" value. This is primarily to prevent touch screen devices from navigating to another page when the user taps on the header, instead of revealing a drop down menu.

Copyright 2006-2016 Dynamic Drive