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

Very cool. If you want to play with this, check out editable version of this menu at:

http://zembly.com/things/e518826ee2234edba345b4925baa65d4

Posted by Jirka on 04/06, 02:33 PM

Oops, I meant:
http://zembly.com/things/e4ba3e6ce1e24794b095f3beba877d6e

Posted by Jirka on 04/06, 02:35 PM

If you hover over ‘folder 1’ the sub menu appears, when you move down to the sub menu items the highlight disappears. It should stay white as I hover over the sub menus.I tried adding this line below but had no luck. Thank you in advance for your assistance!!!!

Posted by Arseniy VW vans on 04/10, 01:58 AM

When i put the above code(personalised) into my HTML page, and view it on firefox, when i hover over the tabs with other links in them(that drop down), the menu goes all over the place, with the rest of the menu to the right dropping down below it and blocking off the menu.

Any idea how to fix it-the page is at http://www.queensparkspiders.co.uk/navigation.html

Posted by Fraser Marr on 04/14, 10:22 AM

HELP! This menu is working great when viewed on a PC, but is causing serious issues on a Mac. Using a Mac, I've viewed it in Firefox and Safari. It has flickering issues and also causes organization issues for the rest of the site. But, I LOVE this menu - it works great on PCs. ANY SOLUTIONS - or is it just me?

Posted by Karen on 04/14, 11:33 AM

Dont hit that last link, fantasybucket. It could crach you PC like it did mine.
http://fantasybucket.com/

Posted by adam on 04/14, 07:14 PM

This is a great menu - sleek, simple, cross-browser functional, and easy to customize. Thanks for sharing it with us!

I agree with most of the change requests listed above.

Posted by WB Jones on 04/19, 03:49 PM

Hi,

The menu is great but the top level links seem to imtermittently float to the left outside of the div which holds it. Only happens in IE7.

Have you come across this problem before? I can send you a screenshot, its just that its for an internal site so you cant get to the URL.

Your response is much appreciated!

Thanks, Kim

Posted by Kim on 04/19, 05:15 PM

Posted by vamsi on 04/20, 12:45 AM

Hi,
How can i make the menu centre, but the grey continue to either side of the menu?
Cheers

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

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

Commenting is not available in this weblog entry.