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

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

PSD to HTML

HTML Editor

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 5 of 7 pages « First < 3 4 5 6 7 >

Nice menu, but when you rollover on FF2 it makes your flash movie below flicker.

Example here:
http://ckrinteractive.com/dev/careersites/nch/index.php

only in FF2 though, not in FF3. Anyone know how to resolve this?

Posted by Firefly on 01/21, 02:06 PM

Great menu... I would like to incorporate a delay between the hover event & the sub-menu appearing. Can anybody point me in the right direction for doing this?

Posted by Steve on 01/21, 07:59 PM

Man, you saved me!!

Thank you so much!!!!

Amazing!!!!!

Posted by Felipe Magno on 01/30, 09:37 AM

it is very thanks

Posted by ilahiler on 02/04, 07:01 AM

can you tell me how to download all related files for this multi dropdown.

Posted by Umesh on 02/16, 06:14 AM

i have used but it creates problem in
IE 6 for those which have childs and in top or middle of the listing,

you can see example also in IE6, it creates space on mouseover of submenu to the parent's siblings if they are not leaf

Posted by rafiq on 02/26, 12:44 AM

This is too amazing! :) DYNAMIC DRIVE!So cool:) yes

Posted by Joe on 03/03, 06:42 PM

Appears to have compatability issues with latest full version of Jquery : (

Posted by Rg on 03/05, 07:20 AM

When comparing between IE7 and FF 3.07 the menu displays different.

1) The tabs float above the line in IE whereas in FF the tabs sit on the line.

2) In sub menus the labels are centered in IE and left justified in FF

Anyway to get these to display identical?

Posted by sbmongoos on 03/12, 11:27 PM

I saw this asked by a few people...

To get rid of the images, add "display:none;" to the downarrowclass and rightarrowclass classes.

Posted by proudgeekdad on 03/18, 09:19 AM

Comment Pages 5 of 7 pages « First < 3 4 5 6 7 >

Commenting is not available in this weblog entry.