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

Are you responding to 1 and 2 above? I don't want to get rid of images but have a consistent display of text layout between browsers.

Maybe I must understood you or are you responding to someone else?

Posted by sbmongoos on 03/18, 10:25 AM

Also, is there a way to make the menu "sticky". So when you mouse of it that menu drop down will stay up even if you move off. It would dissappear if you moved to another menu item. (customer request)

Posted by sbmngoos on 03/20, 10:02 AM

very good,I like it!

Posted by web design on 04/01, 06:16 AM

it's very useful ! thanx for all

Posted by W3 on 04/15, 05:13 AM

hımmm is there any way to add a timeout to the disappearance effect?

Posted by rent a car on 04/17, 02:52 PM

Cool menu. Any one know how I can get a menu bar with rounded corners at the top for the first default layer. Any one have any suggestions?

Posted by burun estetigi on 04/17, 02:53 PM

How can i exclude the arrows on the menus ?

Posted by burun estetigi on 04/17, 02:54 PM

Are you responding to 1 and 2 above? I don't want to get rid of images but have a consistent display of text layout between browsers.

Posted by arac kiralama on 04/17, 03:07 PM

Post it in the CSS Forums

Posted by seocu on 04/18, 04:53 AM

Thanks heaps, pals!

Really, very nice menu, I like it.

However, I wonder if this menu can be customized.

You know, when my mouseover the menu, submenus will be rendered, at this time, if mouse left, the menus will be disappear.

How can I modify the code to make it like this: when menus have been shown to the user, the menus won't disappear if only I select one menu or click some other place.

I'll owe you a big favour! Gratidute!

Best Regards,
chinalwb

April 30th, 2009

Posted by chinalwb on 04/29, 11:19 PM

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

Commenting is not available in this weblog entry.