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 7 of 19 pages « First < 5 6 7 8 9 > Last »

HI,

great menu. Thank you for your time to put it together. I have a problem with FF3 - when I re-load the page in FF, the submenu shifts down by a big chunk leaving a huge gap between the main menu bar and the submenus. Whta could be the reason for that? I searched high and low - cannot figure it out....

Thank you and Happy new year!

Posted by Mikunda on 01/02, 03:09 PM

Nice menu system but I'm having a little problem. I can't seem to get the submenus to work. Can you tell me what I've done wrong?

Thank you for your help.

Here's the link:

http://millbrooktrainingcenter.com/new/index.php

Posted by captaindj2006 on 01/03, 10:52 AM

Hello!
I have a big problem, and I see some have the same problem, but i cant find the answer.
Menu does not show submenus until you go hover in IE6!

Posted by Biljana on 01/05, 04:20 AM

Incredible, really nice! It's so wondefull that you've used your time to do this, so others can learn from it, and use it for their(and my) sites, thanks alot!

Posted by LarsBoThomsen on 01/06, 03:11 PM

This menu is showing up like a list in Internet explorer.. but just fine in firefox. :S

Not that I use IE but a lot of misguided individuals still do.

Posted by B@njo on 01/06, 09:10 PM

Nice Work on the Nav and thank you!

Anybody have a good solution to make the last navigation menu option to the right, drop out to the inside right (opposite of the other nav options)

I'd love a solution for that!

Thanks!

Posted by A@tom on 01/07, 10:40 AM

Safari completely ignores some of the css code making the drop downs show half way down the browser page until a link is clicked, the the drop downs appear in the correct place below the main links... I have search everywhere online for a solution without success. Is there any way to make this navigation system work in Safari?

Posted by afox on 01/07, 05:16 PM

*** URGENT ***

Does anyone know how to make this navigation system work in Safari?

Posted by afox on 01/08, 01:18 PM

The menu works great in IE, But I have complaints in FF, Safari and Google Chrome. Any suggestions? I validated the code at w3c.org and the errors are the <ul> tags only.

Posted by E on 01/09, 09:53 AM

Can anyone tell me where I would add the code to make the page I'm on stay highlighted in the menu. Like an "active" page.

Posted by Scotticus on 01/09, 12:34 PM

Comment Pages 7 of 19 pages « First < 5 6 7 8 9 > Last »

Commenting is not available in this weblog entry.