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

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Web Templates

Website Hosting

HTML Editor

Page Flip Creator- aXmag

Website Usability Testing

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

If one of the main navigation buttons is not linking anywhere but it still has 3 sub buttons then how do I avoid getting the missing image X in IE where the # is?

<li>Programs
<ul>
<li>Lil'Dragons</li>
<li>Kick'n Kids</li>
<li>Martial arts</li>
</ul>
</li>

Posted by Tom on 12/15, 12:21 PM

Hi there people,

This is a very nice and flexible menu, but... I've got a question about implementing a sort of setInterval of setTimeout before the actual slideUp action is performed.

With this short timeout for about 2 or 3 seconds, the mouse can get hover off / lose the focus on the menu and the short timeout keeps the menu opened for this amount of time before it realy slides up.

Has anybody an idea how to work this out, I guess more people would like to implement this small 'fix'...

Thnx!

Posted by E. Miller on 12/16, 02:48 AM

I took off the images by deleting this..

'[img]'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
+" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
+ '" style="border:0;"[/img]'

Worked in Opera. Not sure with other browser :D

Posted by Camper on 12/17, 02:38 PM

Is it possible to configure this to use clicks instead of hover?

Posted by The reveller on 12/18, 10:52 AM

I would dearly love to use this code for my menu which is clearly suffering conflicts with IE6. I am new to CSS though. Can I ask a really niave question?
Well I will anyway.
Are you saying that the html page with the menu on has the orginal Css sheet AND the jslidemenu.css to refer to in the header or do you copy and paste the contents of jslidemenu.css into your current css sheet?
Any advice welcome because this is driving me crazy.
Merry Christmas to you.
Kind regards
Alan

Posted by Alan on 12/18, 03:03 PM

Hello

This is a great menu. the only problem i have is that the sub menus open behind the div below it so they can not be seen.

Is there a solution to this.

Thank you

Posted by Tom on 12/21, 09:46 AM

What do you do if you want to add more drop down menus?

Posted by HHNNBBB on 12/22, 04:35 AM

Rather,
What do I do if I want to add more folders into a single dropdown menu.

Folder

Folder1 - 5 Subitems
Folder2 - 5 Subitems
Folder3 - 5 Subitems

How?

Ta

Posted by Joonas on 12/26, 04:20 AM

hi there...can this menu be centered? if so, how?
thanks!

Posted by bill on 12/27, 09:18 PM

Like the script. But I found an issue for fixed width menus. If your last dropdown is wide, it goes beyond the width of your content area. Any thoughts?

Posted by JP on 12/29, 03:01 PM

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

Commenting is not available in this weblog entry.