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

Very nice. It doesn't look the best, but a nice use of jQuery.

Posted by iEthan on 09/06, 07:55 AM

What a killer pice of code. DynamicDrive rocks!

Posted by Jay Skagnetti on 09/06, 09:36 AM

Can I set the width of the submenus independently?

Posted by Andrea Bornstein on 09/06, 10:50 AM

You should be able to set the widths of the sub menus independently using CSS and targeting a specific sub menu's

element. The general shared width is controlled by the line in bold:

/* Sub level menu links style */
.jquerycssmenu ul li ul li a{
font: normal 13px Verdana;
[b]width: 160px; /*width of sub menus*/[/b]
background: white;
color: black;
padding: 4px 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid black;
} 

Posted by ddadmin on 09/06, 11:46 AM

Nice but lacks accessibility when javascript is deactivated.
It would be nice to use something like son of suckerfish dropdowns as fallback.

Posted by dieMelanie on 09/08, 06:28 AM

is there any way to add a timeout to the disappearance effect?

Posted by Dave on 09/08, 01:28 PM

nice but not best, thanks for share

Posted by web tasarimi on 09/08, 01:42 PM

Not bad but i think your jQuery code could use some optimization. Another example of a multi level dropdown menu at kriesi.at uses merely one third of your code (jQuery as well)

Posted by Marcus on 09/09, 12:44 AM

dieMelanie: The next time the script is updated I'll look at making the menu accessible even if JS is disabled.

Dave: At the moment, you'll want to use All Levels Menu (on the DD scripts section) if you need to add a delay.

Posted by ddadmin on 09/09, 01:38 AM

Marcus:
Size has the opposite effect in this case actually. The larger file size of this menu's jQuery code ompared to the cited is due to:

1) Optimizations for speed as far as caching element references
2) the auto sub menu adjustments if too close to the browser's edge, and
3) the dynamic down/ right arrows feature.

Posted by ddadmin on 09/09, 01:41 AM

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

Commenting is not available in this weblog entry.