Dynamic Drive CSS Library- jQuery Multi Level CSS Menu #1

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: Horizontal CSS Menus: Here

jQuery Multi Level CSS Menu #1

Author: Dynamic Drive

This is a multi-level horizontal CSS menu created using a regular nested HTML list only as far as markup, then transformed into a fully functional drop down menu using CSS and a touch of jQuery. A fade effect is enabled by default, and sub menus will automatically readjust themselves horizontally if too close to the window's right edge. This is what happens when CSS and JavaScript decides to work together!

Demo:

Important: Make sure your page contains a valid doctype for this menu to render properly.

The external files: The menu requires the following support files, which you should upload by default all to the same directory as your page itself:

jquerycssmenu.css
jquerycssmenu.js (inside this file, you should confirm the paths to the 2 arrow images below)

The CSS/ JavaScript: The below code should be added to the HEAD section of your page:

<link rel="stylesheet" type="text/css" href="jquerycssmenu.css" />

<!--[if lte IE 7]>
<style type="text/css">
html .jquerycssmenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="jquerycssmenu.js"></script>

The HTML:

<div id="myjquerymenu" class="jquerycssmenu">
<ul>
<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>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</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="#">Folder 3.1.1</a>
		<ul>
    		<li><a href="#">Sub Item 3.1.1.1</a></li>
    		<li><a href="#">Sub Item 3.1.1.2</a></li>
    		<li><a href="#">Sub Item 3.1.1.3</a></li>
    		<li><a href="#">Sub Item 3.1.1.4</a></li>
    		<li><a href="#">Sub Item 3.1.1.5</a></li>
		</ul>
    </li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
  </li>
  </ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
<br style="clear: left" />
</div>

Code Info

Rate this code:

Date Posted: 09/06/2008

Revision History: None

Usage Terms: Click here

Your Comments (67)

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 7 pages < 1 2 3 4 > Last »

Yes. The visual cue for items that are further menus makes it more usable than the kriesi.at example... and I'll buck the trend & declare: yours looks nicer!

Posted by nudel on 09/09, 07:00 AM

Works great.

Thanks,.

Posted by Ken Smith on 09/14, 08:53 PM

Pretty good, I say.

However, there is a bug appearing when using second level menus.

Try it out, the bug is right on this page!

Choose folder 2.1, then choose Folder 3.1.1
What you see is that Sub Item 2.1.4 moves up and down and we are not able to choose it!!!

Posted by Csky on 09/18, 02:04 AM

Well, I'd have to add that the above bug applies to IE only (version 6). So this bug might be an IE bug then, but no reason to not make a bugfix in jQuery or jquerycssmenu.js, isn't it?

Thanks for listening...
Hope to hear from you soon.

Posted by Csky on 09/20, 02:02 PM

Silence...

Ok, the solution is:

In jquerycssmenu.css at .jquerycssmenu ul li ul li a{
add the following line:

display: inline;

Suggestion:
If you (ddadmin) add the above line to the DEMO at the top of this page as well, we can all see a well-working DEMO (even if we are oldfashonied enough to use IE6, or , in other words, especially if we use IE6).

Source: Andy Budd
http://www.andybudd.com/archives/2003/12/css_crib_sheet_1_gaps_between_vertical_nav_elements_in_ie5/

Posted by Csky on 09/21, 05:14 AM

and....

besides that, also width: 100%; has to be stated at the same space.

Source: Magnus Haugsand
http://www.hicksdesign.co.uk/journal/ie-whitespace-bug

This gives a disadvantage, because suddenly all subtitles having more than one word are wrapped.

instead of spaces solves this in most cases, except when subtitle values are called from another script...

Posted by Csky on 09/21, 11:29 AM

Hi Csky:
Sorry for the delay in responding, and thanks for sharing the above. I'll try and confirm the bug in IE6 and update the menu once I have time.

Posted by ddadmin on 09/23, 11:15 AM

The third level menu doesn't render well in IE - there's a gap on mouseover - looks OK in FF - any idea how can this be addressed?

Posted by EA on 09/29, 08:29 AM

Please ignore last posting didn't realize there was a second page of comments.

Posted by EA on 09/29, 08:45 AM

how can open submenu in left positions
thanx

Posted by hba on 10/07, 12:44 AM

Comment Pages 2 of 7 pages < 1 2 3 4 > Last »

Commenting is not available in this weblog entry.