Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library

Advertise Here

CSS Layouts
Web Graphics
Online Tools:

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:

The HTML:

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 2 of 3 pages  <  1 2 3 >

i'm having trouble including these menus for php (but I'm new to php).
When I put the code in a page by itself it seems to work, but when I try to save the file and include it, it no longer works (I also tried skipping the include and just adding the code to a page I already had, replacing the menu section that was there, and had no luck).
These menus are really nice, wish I was better with the code so I could see how to incorporate them (I went to one of the sites from another person's comment who said they were using one of them, but I didn't see the menu anywhere... was going to look at how it was incorporated along with a page of additional content).
Posted by blueb0mb on 04/29, 07:38 PM
Hi,

I'm using this menu on a website and it looks great on every browser except Internet Explorer. My client told me that he is experiencing some "flickering" when he tries to select a submenu item. I've tested it in Firefox and Safari and it looks great in both. Has anyone had a similar problem in Internet Explorer and have advice on a solution?

Thanks!
Posted by Tracey on 04/29, 10:06 PM
Nice,
Here's another great script from flooble.com: a collapsible floating sidebar menu. We can tell you all about it, (and we will) but first, why not see it for yourself by clicking the "Menu" tab in the upper-left corner of the page. See how it just pops out? Cool, isn't it?
Click Here!

But that's not all! If you try scrolling this page, you will see that the menu will move up and down to stay positioned just a little below the top of the screen!
Posted by utah auto body shops on 05/05, 05:19 AM
use "slants" is the common technique for making triangles like the arrow image here. Actually this is a span or div width 0px of "height" and "width" and a ?px of border width different colors. g.e the borders width is 15px but one's color of the four direction is different like the container's background color.
If you use different border width values, you can draw whatever shaped triangle, and if you use more slants, you can draw any shape you like.

(If i wasn't understandable, sorry, I'm not native)
Posted by szebeni on 05/15, 05:27 AM
Good!Thanks, I coped the code but arrow pointer is not visisible.
Posted by Rajiv on 05/17, 04:20 AM
supperr
Posted by Burak on 05/17, 10:09 AM
I was trying to get this to work and I have the bullets come up next to the nav bar as a list. I would like them o not be there so it looks like the one above. Can you please help me?

Thanks.
Posted by Holly on 05/17, 01:09 PM
Excellent menu.
Posted by Free Software Download on 05/18, 08:45 AM
thx 4 this gr8 effort.but well known coe must be given an example too
Posted by nitu on 05/18, 09:59 AM
Lovely site - lovely menus. Trying to play with making my site fluid, dynamic, and as much css as possible. Love the menu, but I'm trying to incorporate into Taylor's 'Left Menu' 2 Column Liquid Layout. The problem lies in that the nested uls for subfolders are behind the content column. I tried playing with z-index, but don't have it. Could you help?
Posted by Janet on 05/20, 08:03 AM

Comment Pages 2 of 3 pages  <  1 2 3 >


Commenting is not available in this weblog entry.
Copyright 2006-2014 Dynamic Drive Read our Usage Terms before using any of the CSS codes.