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 5 of 19 pages « First < 3 4 5 6 7 > Last »

ok, I was in need of its vertical version so i did a quick conversion to make it vertical and is working well (at least for me). there would be a few changes u need in css and js to customize it. u have to set menu width in js at line 33(its 191 in demo). you can find it here : http://www.ewebcraft.com/project/jQuery-Multi-Level-CSS-Menu-Vertical/index.html

Posted by Atif on 12/03, 11:35 PM

Atif - its completely broken in IE6.

Posted by qubikas on 12/04, 03:17 AM

I would like to use. It is a great menu. I had it all set to go then found that it would not work with the mozilla browser Firefox. Any suggestions?

Great formating though and hope to be able to use.

Thanks.

Posted by dave schantz on 12/04, 05:20 PM

Ok its now fixed for IE 6 as well.
checked in IE6, IE7, FF2 and FF3
Don't have other browsers, so can't say about them.
here is the link once again.

http://www.ewebcraft.com/project/jQuery-Multi-Level-CSS-Menu-Vertical/index.html

Qubikas, thanks for the bug report!!

Posted by Atif on 12/05, 02:55 AM

I must be missing something. This is exactly what I'm looking for but my implementation isn't working correctly. My site is at www.lightonthehill.org/test.

It doesn't seem to be loading until I click on it in IE7, and in FF it sometimes loads and sometimes not. When it doesn't, I just get regular menus without the drop down. Am I missing something to load it?

Posted by Doug Foser on 12/07, 11:52 AM

Thanks a lot for this code, i'm going to use it on my client web page. If you have any comments, please let me know. Please, let me know if you want me to put some note on credits.
The web , where i'm going to use it is: http://www.todo-pienso.es
it's possible it will be alowed in a couple of days.
I changed names of divs and class (it was for my better understanding)

Thank you very much again
EWR

PS: i had also problem in FF: In my case i needed to put my slide menu into the separate div container on top of everything, but inside of general container.

But it's really small thing because this slide menu is really good.

Posted by ewr on 12/09, 07:51 AM

This menu is awesome and works great on my site in FF but in IE the drop down part spaces out each link making them almost unclickable..... I have had multiple complaints.
Anyone have any idea on how to fix this??

Here is my site.......
www.katzphotography.net

Posted by Katz Photography on 12/09, 04:56 PM

This is awesome, I have one issue though. I am trying to use this for an internal website. When I download the jquery.min.js file from the Google URL and point to it in my page vs. the online version the menu stops working.

I would like to cut down on load times and not have any outside references...

Posted by Wuench on 12/12, 08:23 PM

thanks i live in seoul of south korea i' m using this Horizontal CSS Menus that;s good ^0^ 감사~

Posted by daesupark on 12/13, 01:16 PM

Has anyone else had this problem? The menu works flawlessly in Win: IE FF Safari, but on my Macbook it has an intermitten problem in Safari where the submenus will be about 30 px or so below the menu. When I refresh the browser it goes away. But then it happens again after going back and forth between pages a few times.

Any ideas?

Posted by gregdevice on 12/15, 12:55 AM

Comment Pages 5 of 19 pages « First < 3 4 5 6 7 > Last »

Commenting is not available in this weblog entry.