Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web 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:

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:

The HTML:

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

Really lovely menu!!!
I would really like to know though how to add a current state on the menu...

Many thanks!!!
Posted by Penny on 11/24, 06:12 AM
I'm having trouble with the positioning.

I lose the submenu when hovering because it goes over the main content div of my page - how can i stop this happening?

Also, how can you make a second sub menu only appear when you hover over only one element of the first sub menu?
Posted by Mark on 11/24, 09:47 AM
Thanks this is what i've been looking for.
Except my menu is in the footer so had my cssmenu as a slide up instead of drop down menu. When I add this jquery code it forces the menu to drop down instead of up. How can I modify this to work with a slide up effect?
Posted by Ryan on 11/25, 03:41 AM
Is there a fix for the submenu display issues while using Safari browser on a Windows system? In Safari, the submenus display several centimeters under the menu. Safari displays it correctly on a Mac OS, though.
Posted by Katta on 11/26, 06:14 AM
I can't find the following images for download down and right arrow images.See below:
'downarrowclass', 'down.gif', 23], right:['rightarrowclass', 'right.gif'
Should I create these images or there are awailable for download?
Posted by Jessica on 11/29, 07:21 PM
A great menu. Thank a lot.
Posted by 4ALL2ALL on 12/01, 07:44 PM
Hey, this is an issue I noticed, it seems the css command in html, must be listed above the two js commands, otherwise the sub menu might not attach to the top level menu when uploaded to the web server...am I right about it? Or is there any other cause of the issue?
Posted by AJ on 12/01, 07:49 PM
Nice menu, How can you move the menus and submenus to the center?
Posted by Joseph on 12/02, 12:24 PM
hi,
its a nice one with jquery.
does it have a vertical version ? or is there any way to convert into vertical style ?
Posted by Atif on 12/02, 09:28 PM
for IE 6 - to hide the <select> tag in forms update the js file (maybe it code be done better, but i dont know any [removed]


//Specify full URL to down and right arrow images (23 is padding-right to add to top level LIs with drop downs):
var arrowimages={down:['downarrowclass', 'slike/down.gif', 23], right:['rightarrowclass', 'slike/right.gif']}

var jqueryslidemenu={

animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds

buildmenu:function(menuid, arrowsvar){
jQuery(document).ready(function($){
var $mainmenu=$("#"+menuid+">ul")
var $headers=$mainmenu.find("ul").parent()
$headers.each(function(i){
var $curobj=$(this)
var $subul=$(this).find('ul:eq(0)')
this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
this.istopheader=$curobj.parents("ul").length==1? true : false
$subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
$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]'
)
$curobj.hover(
function(e){
var $targetul=$(this).children("ul:eq(0)")
this._offsets={left:$(this).offset().left, top:$(this).offset().top}
var menuleft=this.istopheader? 0 : this._dimensions.w
menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
if ($targetul.queue().length<=1) //if 1 or less queued animations
$targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)
hideSelect()
},
function(e){
var $targetul=$(this).children("ul:eq(0)")
$targetul.slideUp(jqueryslidemenu.animateduration.out)
unhideSelect()
}
) //end hover
}) //end $headers.each()
$mainmenu.find("ul").css({display:'none', visibility:'visible'})
}) //end document.ready
}
}

//build menu with ID="myslidemenu" on page:
jqueryslidemenu.buildmenu("myslidemenu", arrowimages)

// Hide all select boxes
function hideSelect() {
if (document.all) {
for (formIdx=0; formIdx<document.forms.length; formIdx++) {
var theForm = document.forms[formIdx];
for (elementIdx=0; elementIdx<theForm.elements.length; elementIdx++) {
window.status += theForm[elementIdx].type;
if(theForm[elementIdx].type == "select-one") {
theForm[elementIdx].style.visibility = "hidden";
}
}
}
}
}

// Unhide all select boxes
function unhideSelect() {
if (document.all) {
for (formIdx=0; formIdx<document.forms.length; formIdx++) {
var theForm = document.forms[formIdx];
for(elementIdx=0; elementIdx<theForm.elements.length; elementIdx++) {
if(theForm[elementIdx].type == "select-one") {
theForm[elementIdx].style.visibility = "visible";
}
}
}
}
}
Posted by qubikas on 12/03, 04:24 AM

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


Commenting is not available in this weblog entry.
Copyright 2006-2011 Dynamic Drive Read our Usage Terms before using any of the CSS codes.