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

Hi!

Great code, Gz!

But, can i nuke out the arrows from the code? Is there any config option in the js? I didnt find anything:/

Thx.
TZS

Posted by tzs on 11/10, 12:45 PM

Hi!
Thank you for the script.
It works perfect on my homepage. / Lalla

Posted by Lalla on 11/17, 02:08 PM

The drop down menu gets covered by a flash object. Any idea how this can be fixed? Thanks in advance!

Posted by Giovanni Gonzalez on 11/25, 01:20 AM

I customized it to make it vertical. check out the demo : http://www.ewebcraft.com/project/jQuery-Multi-Level-CSS-Menu-Vertical/index.html

Posted by Atif on 12/03, 11:51 PM

I really like this drop-down but am having a tough time centering it in FF, IE and Safari simultaneously. When I change the padding-left setting, which is used to offset it from the left margin, I can get it to center in one browser, but not all three. I've added the code below to my container div--supposedly this helps IE see padding/margins the same as FF--but that didn't help. Any ideas?

-moz-box-sizing:border-box;
box-sizing:border-box;

Posted by RV on 12/15, 07:13 PM

I try to make this code work on my site , can you help me PLEASE!!!

I need a multi level menu bar
http://lawsofcredit.com/creditrepair

Posted by Edy on 01/04, 06:59 PM

I dont need the images (var arrowimages={down:['downarrowclass', 'arrow-down.gif', 25], right:['rightarrowclass', 'arrow-right.gif']} in dropdown menu ...How can change the jquerycssmenu.js so that I can acheive the correct result.

Posted by JAGANNATH on 01/12, 10:43 PM

So simple, thanks for sharing...

can we use png for the sub level and makes it work in IE6 also?

Thanks,
http://css-edge.blogspot.com

Posted by css-edge.blogspot.com on 01/19, 06:39 AM

can you please help me to make it work in IE8 ?!

Posted by css-edge.blogspot.com on 01/20, 04:44 AM

I have use the dropdown menu using JQuery but Error results in Jquery like Objectn Expected on Line 16,char 2 in IE6.
AND Firfox 3
Error Pointer comes on the following line

jQuery(document).ready(function($){

I need the solution urgent.

Posted by Jagannath Karmakar on 01/21, 02:33 AM

Comment Pages 4 of 7 pages « First < 2 3 4 5 6 > Last »

Commenting is not available in this weblog entry.