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

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Web Templates

Website Hosting

HTML Editor

Page Flip Creator- aXmag

Website Usability Testing

Advertise Here

CSS Library: Horizontal CSS Menus: Here

jQuery Multi Level CSS Menu #2

Author: Dynamic Drive

This is a multi-level horizontal CSS menu created using a regular nested HTML list, then turned into a fully functional drop down menu using CSS and a touch of jQuery. The sub menus slide in and out into view, which also automatically reposition themselves horizontally if too close to the window's right edge.

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:

jqueryslidemenu.css
jqueryslidemenu.js (inside this file, you should confirm the full URL to the 2 arrow images below)

If you wish to upload the above files to a different directory, be sure to edit "jqueryslidemenu.js" to update the URLs to the two arrow images used.

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

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

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{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="jqueryslidemenu.js"></script>

The HTML:

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">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="http://www.dynamicdrive.com/style/">Item 4</a></li>
</ul>
<br style="clear: left" />
</div>

Code Info

Rate this code:

Date Posted: 11/03/2008

Revision History: Nov 8th, 08': Limit # of queued animations to prevent animation stuttering

Usage Terms: Click here

Your Comments (187)

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 16 of 19 pages « First < 14 15 16 17 18 > Last »

Like what WB Jones has done on his site?

Posted by Nick on 04/20, 02:26 AM

OK, I fixed the problem in my previous post. Stupid misplaced </li> tag...

Here's another question...

DOES ANYONE KNOW HOW TO CENTER THIS THING? The menu is showing up aligned to the left - not so noticeable if you're using a small or standard sized monitor, but definitely noticeable when viewed on a larger monitor.

Appreciate the help!

Posted by Karen on 04/20, 08:40 AM

It seems that it does not work with Firefox. Why?
How we change the path for the image arrows?

Posted by sol on 04/23, 03:55 PM

i can´t make the slide down works over a div below. i can´t just see the sub-menu buttons. somebody knows how to fix it?

Posted by gabriela on 04/24, 11:41 AM

Hi I loved this menu !

But can someone tell me how to make this sub menus appear to up side instead down ?

Thanks !

Posted by scott on 04/27, 07:37 AM

Easy to use . Elegant. Easy customizable. Cross-browser.
Awesome! I even used it with images. Wow!

Posted by Derrick on 04/27, 08:55 AM

I just used this menu on my project... it shows well on opera but on IE, the drop downs dont work.
can someone tell me if there is anything i can do to solve this?
i have read through the comments and i dont seem to see any problems or solutions related to this.

I use IE 8.

Posted by Jude on 04/28, 03:39 AM

Im using your menu in the new design of my website. It works like a charm.

There is only one thing which is not working like it should. If the expanding submenu folds out over a div which is also positioned absolutely, the menu does not overlap this div's text and you can see it through the background of the submenu.

This only happend in IE not in FF.

Whatever z-index I set on the menu and the underlying div, it has no effect. I can fix it for IE by setting z-index:-1 for the underlying div. But then this div is not visible in FF.

Could you help me out??? Been working on it for days :(

Posted by Gerben on 04/28, 05:02 AM

Hell for all.. this menu is the best, Can I change the align for the menu to be from right to left ( all content)??

thnks

Posted by Abdullah on 04/29, 01:32 AM

Great menu...thanks so much for sharing.
I am new to js...but I believe my security certificate is having problems referencing http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js
I saved the file jquery.min.js and uploaded to the same file as other js files, but the drop downs no longer show up. Can anyone help?...please.

Posted by Cathi Levey on 04/29, 03:13 PM

Comment Pages 16 of 19 pages « First < 14 15 16 17 18 > Last »

Commenting is not available in this weblog entry.