Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library

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.


The CSS:

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


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.

Code Info

Rate this code:

Date Posted: 10/10/2016

Revision History: Oct 10th, 16': Code rewritten for many improvements.

Usage Terms: Click here

Copyright 2006-2016 Dynamic Drive