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

How to center it in another div?

I'm trying it for days and nothing...

PLZ help!

Posted by Yosef on 05/03, 03:13 AM

Can i used that in blogger?

Posted by Mahawira on 05/15, 05:49 PM

very nice....but is not the best:)

feet blisters | Genetic diseases | Increase metabolic rate<br>

Posted by pamela on 05/25, 05:20 AM

Very Good

Posted by daolong on 05/29, 03:32 AM

I'm trying it for days and nothing...

Posted by e8e8 on 05/29, 03:33 AM

can u pls tell me if it is possible to start the submenus at one particular position? that is under the first main menu option?

Posted by siya on 06/02, 05:35 AM

Thank you for bringing us this information, I truly did appreciate the good work.

Posted by rap on 06/10, 03:53 AM

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

Commenting is not available in this weblog entry.