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

Hi,

Thanks for sharing your work. Simple and easy to configure.
There is though a small bug: if you select folder 1 and instead of going directly to first sub item you cross item 3 and then the first sub item, the menu starts "flickering". An update would b e great.

Posted by ionut on 11/03, 06:51 AM

This is very cool. Simple and slick, great work!

Posted by Fumin on 11/03, 12:56 PM

Nice and simple one.. well done! there another issue I have noticed, it has the queuing issue.. if you move the mouse quickly though the main menu items, you can see an echo effect. If you could fix this, that would be perfect!

Posted by Subin on 11/03, 09:53 PM

I love it, but...
can you please tell me how to remove the arrows. I do not want them to appear in the menus.

Thanks

Posted by Ron Myers on 11/04, 08:52 AM

I figured it out...I think. I delete the following from the jqueryslidemenu.js

$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
'[img]'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
+" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
+ '" style="border:0;" [/img]'
)

and it seems to have worked. Would this be a proper work around. I apologize for asking I am new to js.

Thanks

Posted by Ron Myers on 11/04, 09:05 AM

I'll see if I can fix the issues mentioned above the next time the code is updated. I've noticed it myself depending on where your mouse is at the time the menu slides in. See "Revision History" on the right hand side to know when a code has been updated.

Ron Myer, yep, that should do it.

Posted by ddadmin on 11/05, 05:48 PM

Wow, great menu!

I created a menu with the same theme as this one, and I found that if you put "text-decoration:underline;" on the normal sub-menu links, and "text-decoration:none;" on the hover, it looks really great with the black background hover.

Just my little opinion...

Posted by Alex on 11/05, 08:15 PM

Really, It's Cool.

Posted by Ashish on 11/05, 11:22 PM

Hi this menu is wonderfull

Posted by kavita on 11/05, 11:52 PM

Love it. Used it on my site, http://fantasybucket.com/

Posted by JayaGuru on 11/06, 06:55 AM

Comment Pages 1 of 19 pages 1 2 3 > Last »

Commenting is not available in this weblog entry.