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

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 #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 17 of 19 pages « First < 15 16 17 18 19 >

can someone help? the drop down isnt working on google chrome and opera.
but it works on IE (only when a menu is clicked on).

Posted by Jude on 04/30, 09:18 AM

I'm having a bit of trouble with this menu. When the div below it is set to relative positioning, the menus appear to be limited to my menu div. How can I fix this besides removing the relative positioning? This is my current CSS:



#navigation {

width: 700px;

color: #fff;

padding: 4px 10px 0 10px;

margin: 0;

background: #3E8BBF;

height: 28px;

border-bottom: 4px solid #81B4D9;

position: relative;

}



#content { 

width: 690px;

 color: #000;

 background: #fff;

 margin: 0px 0px 0px 0px;

 padding: 10px 10px 10px 20px;

 min-height: 350px;

position: relative;

}

Posted by soren121 on 05/03, 03:35 PM

Never mind; I just needed to add z-index: -1; to the content div. :)

Posted by soren121 on 05/03, 04:05 PM

Thanks so much for the menu and all the helpful remarks. I just have one query: how would I remove only one of the arrow gifs, but leave the menu functioning the same. Personally, I'm interested in removing merely the down arrow gif, but I wouldn't mind knowing the process(es) behind both operations, just to better understand how the coding works.

Thanks again!

Posted by Kevin on 05/06, 08:18 AM

the menu link won't work if i change the $curobj.hover to $curobj.toggle

why is that? any idea guys on how to fix this?

Posted by gabriel on 05/06, 10:47 PM

Fabulous menu, many thanks. I am trying this out on my site and it works great in firefox, tho in IE7 there are transparent spaces between each drop down link item - so when you scroll down the list, the drop down menu closes - v annoying.

I havn't changed any CSS or JS yet, just trying it out - any ideas?

Posted by Sherah on 05/11, 04:38 PM

One of excellent drop down menu, easy to edit and do changes like putting background images for the menu etc.

Posted by John Fernandes on 05/12, 03:03 AM

Fantastic menu, easy to edit, can even put background images instead of color

nice i like it

Posted by John Fernandes on 05/12, 03:04 AM

Great menu, very cool. Just a quick question. Is there anyway to increase the time the menu hangs around after the hoverout? I would like the drop down menu to stay around for around a second if I hover off it. Currently it instantly goes away.

Thank you for the great work on the menu.

Posted by Paul on 05/12, 01:57 PM

Hello.

This is a very nice menu.

I have a question here:
How do I add an icon to the menu? I've tried several ways but still the icons are not displaying at all.

Thank you for the help. Really2 appreciate it! :)

Posted by Martin on 05/13, 02:18 PM

Comment Pages 17 of 19 pages « First < 15 16 17 18 19 >

Commenting is not available in this weblog entry.