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

Hi, great menu and nice and easy to mod. I have it working fine in a standard html based website. But are having some problems when using the menu in a template (.tpl) file. When previewing in dreamweaver all looks ok. But when i upload to server it displays purely as text as if im missing one of the external files js or css. But have triple checked and im not and they all seem to be linked ok. any ideas?

Posted by Mark on 05/13, 05:52 PM

When I follow the steps to instal the menu it does not work. I had to view source of the menu site and take the code directly from there. I added in: <script type="text/javascript">
arrowimages.down[1]="images/down.gif"
arrowimages.right[1]="images/right.gif"
</script>
I also have issues with this in Firefox, it will either be all text or display the menu but slide to the right(not visible) and not expand below.

Posted by billy on 05/16, 07:21 AM

The menu does appear correct when I view it in the page though.

Posted by billy on 05/16, 07:26 AM

Hi,

Is there any terms or condition for using this menu. Example, can i use it on both personal and commercial website. I will look forward for your reply.

Posted by sameer on 05/16, 02:20 PM

I think this is great, would it be possible to create a .txt file for the hyperllinks so that each page of my site could call it from a style sheet?

Posted by James Hilton on 05/22, 09:18 AM

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
---------------------------------------------------
just replace the number in this code in file jqueryslidemenu.js

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

and will doing good
i am sorry about my languge but i am arabic ;)

Posted by JONE on 05/27, 06:08 AM

This was the best menu I´ve come across so far.
Nice animations.
When I hoover over an item and a submenu opens I would like the hoover color to stay the same when I go to the submenu.Anyone who knows?

Posted by Andy on 05/28, 10:41 AM

Can you replace the simple buttons with graphic ones and maybe make the secondary menus transparent new to this kind of menu system just asking...

Posted by Darryl on 05/28, 06:36 PM

Great navigation! I am trying to add this menu to a site where I do not have complete control (it's a retail point of sale software that is laid out using a css template). The problem is this... I can see the menu, but the drop down tabs show as a layer UNDER the existing elements that are set in the .css which I have limited control. Is there anyway to make this menu the top layer when navigating? Thanks!

Posted by Steve on 05/29, 07:36 AM

Like the menu. I wanted to change the colours but nothing I do in the CSS file seems to make any difference. Is there a way to do this? Thanks.

Posted by Anton Neumann on 05/31, 02:04 PM

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

Commenting is not available in this weblog entry.