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

i can't get this to work with IE 7. well it works on here, but it doesn't work when i put the code on my machine and test it. any ideas?

Posted by Marty on 11/14, 01:34 PM

I also added a little hack in there in case you were going to use images on the main menu. There was a padding issue as well as a <a > issue giving the images a "link border". These three little rules removed all of the problems. Nothing important but just in case someone else is using this!

/*Using an Image in the Menu remove Inherited Border*/
.jqueryslidemenu ul li a img{
border: 0;
}
/*Remove the border when you Hover the Image*/
.jqueryslidemenu ul li a img:hover{
border:0px;
}
/*Remove the img a href Link Border*/
.jqueryslidemenu ul li a img{
text-decoration: none;
}

Used on http://fitzmobile.com!
Thank you for all your hard work!

NH (.whiteDart Design)

Posted by Nick Hughes on 11/14, 01:56 PM

Great menu! thanks a lot...
Just an answer... I'd like to write the menu code (ul li ) in another single file ( and not in every page) and include it in the javascript.. is it possible?
please help me if you can!

Posted by Giacomo on 11/14, 05:59 PM

Loved this one very much
simple, with a small effect.

used it in my website.

thanx DD

Posted by Mohannad on 11/15, 11:16 AM

Please post questions regarding the menu in the forums. You have a much better chance of getting a response there. This area is mainly just for comments/ feedback.

Posted by ddadmin on 11/16, 02:16 AM

The above horizontal menu cant show up when I integrate with SmoothGallery JonDesign. The menu has been block when I replace this horizontal menu above the SmoothGallery. Which css is problem? SmoothGallery or Jqueryslidemenu?

Posted by ARUL on 11/17, 01:32 AM

hi folks, we have no need to delete the arrow
instead in the above screen, save the image of down.gif and you will get the arrow crisp and clear

Posted by arunraj on 11/20, 10:47 PM

There is space at the the top and bottom of the Menu created. Is there a way to reduce or eliminate the space.

Thanks in Advance..

Posted by AB on 11/21, 12:51 PM

I'm having a bit of trouble omplementing this with asp.

Using the same structure as a html page for the masterpage I have not been able to reproduce the drop down menus when I roll over the menus that are supposed to drop down. All files are referenced correctly It just doesn't display when the code is compiled. Any assistance would be appreciated.

Posted by John on 11/22, 02:06 PM

anyone has any idea on implementing this in the top frame in a frameset? thanks

Posted by despar on 11/23, 11:47 AM

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

Commenting is not available in this weblog entry.