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

Have managed to get colour changes to work in Firefox but for some reason Safari doesn't recognise them and I get a black background with white text. Is there a fix for this?

Posted by Anton Neumann on 05/31, 03:29 PM

A solution to the problem of the submenus disappearing in IE7.

Problem:
A 1 pixel line appeared between all submenu items and when the mouse rolled over that line, the menu disappeared. This made it virtually impossible for the user to reach menu items that were further down the list.

Solution (found on another forum):

Replace the .jqueryslidemenu ul li ul code with:

.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
background-color: #F3F3F3; /*Disappearing menu fix-BP */
top: 1em; /* no need to change, as true value set by script */
}

Posted by Dawn on 06/01, 02:40 PM

Hi,
This is really great menu! But whats the procedure to use this in my site? Anyone there would you please help me??

Thanks

Posted by Farid on 06/01, 11:01 PM

I like the style but can i get css script without using external file?

Posted by Red Gear on 06/03, 03:56 AM

how i use this code please info details

Posted by rajib on 06/09, 01:06 AM

i have a problem. my web site's css menu is working firefox and chrome. but it isn't working ie7 or ie8. if you view www.edirnem.net, you will understand different between firefox to ie. please help me. thanks.

Posted by huseyin on 06/10, 04:16 AM

hello im new to this stuff and i did what you guys said.. but the drop downs are not working, or the arrows are not there...any help please contact me

Posted by Cameron GIll on 06/11, 10:54 AM

Comment Pages 19 of 19 pages « First < 17 18 19

Commenting is not available in this weblog entry.