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

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

I am trying to configure the menu so the dropdowns have a 70% Black Opacity and the top-level menu buttons have a non-transparent background-image that repeats x. Is there a way to configure this to work that way?

Posted by Kevin Schenk on 01/23, 11:37 AM

nice CSS menu, can anyone tell me, how to change the sub hover menu to hover left instead of right (there are languages that you write from right to left, unlike english...) , Thanks David

Posted by david on 01/23, 08:10 PM

Very nice and useful menu!

Posted by Kidon on 01/24, 03:50 PM

Thank You for this verry nice mjqueryslidemenu!
I'm implementing it on a new site and got 2 problems.
1. Some pages are in subdirectorys (Folders) and I put there the .js and.css files together with de arrow images so they are all in the same directory but the arrows are not shown neider any submenu. What am I doing wrong?
2. The submenu is not visible when below there is an swf. The submenu goes "behind" the .swf. How can I fix it?
I really would thank you verry much for your help

Posted by phardt on 01/28, 12:50 PM

Hello, problem 2. is just fixed using dreamweaver. Make click on the .swf file and at Parameters include wmode = opaque . Thats all

Posted by phardt on 01/28, 01:25 PM

Thanks a lots! Very nice jquery menu, work very well for me. Is there any way to make the tab rounded?

Posted by Tom on 01/28, 09:53 PM

Does anyone know why the drop down menu goes really slow in FireFox if you:

Add the float to the CSS?

.jqueryslidemenu {
float: left;
...
}

I have confirmed that in IE7 and Chrome it is super fast... In firefox the menu is just not as responsive. As soon as you take the "float" line out of the CSS file.. It goes back to being "fast" and very responsive.

Any help would be GREATLY appreciated. :)

Posted by Winnipeg Web Design on 01/29, 10:43 AM

thanks for sharing!!! this menu is wonderful!! i'll use this for my sites..

Posted by ADANALI on 01/29, 11:13 AM

hi, the other problem is solved! There was an interference with other js's specifically from lightbox the scriptaculus.js, prototype.js, effects.js and lightbos.js
Now the menu is working super Verry recomendable!

Posted by phardt on 02/02, 05:31 AM

How can I center it so there is black space on both sides of the buttons? Been trying for days... thanks.

Posted by Brian on 02/03, 08:31 AM

Comment Pages 9 of 19 pages « First < 7 8 9 10 11 > Last »

Commenting is not available in this weblog entry.