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

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

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 3 of 7 pages < 1 2 3 4 5 > Last »

How can i exclude the arrows on the menus ?

Posted by Guilherme on 10/14, 06:54 AM

I was wondering if you are able to make two separate menu systems work on the same page. My second one shows up but it doesn't have any functionality. Is the page restricted to only one menu?

Great work!

Posted by red_ifo on 10/16, 05:40 PM

Was this SEO friendly?

Posted by Mahesh on 10/17, 12:27 AM

How do you center the navbar?

Posted by Joe on 10/20, 05:07 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? Thanks Much appreciated.

Posted by Greg on 10/21, 07:31 AM

So did you actualy fix the IE6 bug? I really love the menu, this bug is the only flaw it has.
tnx, Cisco

Posted by Cisco on 11/01, 08:12 AM

it partialy fixes the problem in the IE6 when you put "display: inline-block; " instead of "display: block; "

than item that has submenu sometimes displays the hover state correctly, but sometimes it does not.

Can anyone help ?

Posted by Cisco on 11/02, 04:43 PM

Hi everyone,

solved the problem, works perfect now.

Just replace this fragment in the header to make it work in IE6 too:



Once again, awesome menu. Was worth the pain to find this fix. Although there are other menus out there, this is the only one I found that has submenu arrows and works with image backgrounds for menu items at the same time.

tnx Cisco

Posted by Cisco on 11/02, 05:43 PM

Where is the final menu. I am unable to find its demo. The list above is not final Menu I suppose!

Posted by Sanchit on 11/04, 09:48 PM

I was able to use your code, but I have an issue with IE7 and ClearType. As you know IE7 by default enables ClearType. But, for some reason the animation effect has disabled the ClearType leaving the text in my submenus a mess. It renders properly in Firefox, and Opera. Also, I noticed it in the example menu you posted. Do you have a fix within your jQuery for this? Or, do you have any other suggestions on how I might make IE7 render the submenus properly?

Posted by Sharon on 11/05, 02:21 PM

Comment Pages 3 of 7 pages < 1 2 3 4 5 > Last »

Commenting is not available in this weblog entry.