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

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

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

Hi,

Does google read this links and anchor text? Thank you.

I love it. It's beutiful.

Posted by Shir Gans on 11/06, 11:28 AM

Is it possible to have the dropdowns to turn to the Left instead of facing/turn to the right position?

Thank you

Posted by Rioz on 11/07, 06:36 AM

Ok, I've just updated the .js file to address the "stuttering" issue if you:

"select folder 1 and instead of going directly to first sub item you cross item 3 and then the first sub item, the menu starts "flickering"."

Let me know if it helps.

Posted by ddadmin on 11/07, 07:11 PM

Hi, this such a great menu. Easy to implement and modify.
I have one problem. I would like to get rid of the rest of the space on the right, or to center the menu.
I appreciate the help,
thanks in advance,
Djotaya

Posted by Djotaya on 11/10, 06:21 AM

Thanks for shared, it is very cool.

Posted by quyenuc on 11/11, 12:20 AM

This was code very useful to me. Thank you very much..

Posted by Pandiyarani on 11/13, 04:47 AM

I need to include two menus on the same page. The problem is that they are one just below the other and when the dropdown for the top menu opens it is is not displayed on top of the second menu.

So the first submenu item is hidden behind the second menu. I've tried adjusting the z-index for the divs but so far no success.

Anyone tried something similar? Is that possible?

Posted by Vicenç on 11/13, 02:58 PM

Is there any way to get rid of the extra space on the right, or to make the tabs equal spaced all the way to the end. Thank you for any help. I really appreciate it

Posted by Bkbroiler on 11/13, 09:39 PM

hey, itz nice menu...really look professional..bt some time.. i had problem in .js file.. i had faced error like document undefined. Please give me some solution...Thz in advance....Plz help me.

Posted by miral on 11/14, 01:02 AM

Thanks for the usefull tips :)

Posted by Attilio Viscido on 11/14, 08:13 AM

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

Commenting is not available in this weblog entry.