jQuery Multilevel self-resizing image-sprite shadow DropDown menu horizontal from left to right with shadow support for IE 8
The menu is using the mouseenter and mouseleave event with a timeout of 250ms for resizing itself.
This menu is inspired by the logitech.com website menu wich supports only 3 levels. With this menu you can use more levels.
Used images are remaked with Fireworks. The big background image has a DropShadow 8px 20px 85% black 270°. And for the navigation image DropShadow 8px 16px 100% #333333 270°.
Required scripts: jquery-1.4.2.js
This jQuery script is written by: Roman Pantring
Useful links:
php - find nesting depth - Stack Overflow
Manually Traverse a DOM Tree Using jQuery | James Wiseman
Show code for jQuery Script:
jQuery Script: shadowspritemenuIE8.js
//** jQuery Multilevel self-resizing image-sprite shadow DropDown menu horizontal from left to right with shadow support for IE 8
//** written by: Roman Pantring www.roman-pantring.de - www.filomatic.de [easy filebased PHP CMS]
//** Script Download: http://flashdictionary.filomatic.de/css/css_jquery_shadowspritemenuIE8.php
//** Script Demo: http://flashdictionary.filomatic.de/css/shadowspritemenuIE8_demo.php
//** Date: 2011-01-25
$(document).ready(function() {
(function(){
menudiv = $("#navigation");
menuLI= $("#navigation ul li ul >li");
menuUL= $("#navigation ul");
menudiv.children("ul").children("li").addClass('menu');
//clone it
menudiv.wrap('<div id ="navigationbody">');
$("#navigationbody").prepend('<ul></ul>');
for(cloneLoop=0;cloneLoop<menudiv.children('ul').children('li').length;cloneLoop++){
index = menudiv.children('ul').children('li').length-cloneLoop-1;
menuID=menudiv.children('ul').children('li').eq(index).attr('id');
$("#navigationbody").children('ul').prepend('<li id="'+menuID+'" class="menu"></li>');
}
$("#navigationbody").children('ul').children('li').prepend($("#navigation").children("ul").children("li").eq(0).children("a").clone());
$("#navigationbody").children('ul').wrap('<div id="menuclone">');
// add the shadow span tags inside div ui-shadow
menudiv.children("ul").children("li").children("ul").wrap("<div class='ui-shadow'>");
menudiv.children("ul").children("li").children("div").append('<span class="ui-shadow-el ui-shadow-top-left"></span>');
menudiv.children("ul").children("li").children("div").append('<span class="ui-shadow-el ui-shadow-top-right"></span>');
menudiv.children("ul").children("li").children("div").append('<span class="ui-shadow-el ui-shadow-bot-left"></span>');
menudiv.children("ul").children("li").children("div").append('<span class="ui-shadow-el ui-shadow-bot-right"></span>');
menudiv.css('visibility','visible');
// hide it
menudiv.children("ul").children("li").children("div").css('display','none');
menudiv.children("ul").children("li").children("a").css('display','none');
menudiv.children("ul").children("li").mouseover(function(){
//stop all and hide all
$(this).parent().children("li").stop();
$(this).parent().children("li").children().css('display','none');
//show active
$(this).children().fadeIn(0);
$(this).children("a").children("span").fadeIn(0);
$(this).children().children('ul').fadeIn(0);
});
menudiv.children("ul").children("li").mouseleave(function(){
/*$(this).children('div').fadeOut(0);
$(this).children('div').children("ul").fadeOut(0);
$(this).children("a").children("span").fadeOut(0);*/
/* optional timeout */
$(this).animate({left: '0'},500,function(){
$(this).children('div').fadeOut(0);
$(this).children('div').children("ul").fadeOut(0);
$(this).children("a").children("span").fadeOut(0);
});
});
var x="";
MenuAction = function(){
x = $(this);
this.timeout=setTimeout(showMenu,250);
}
menuLI.mouseenter(MenuAction).mouseleave(function(){clearTimeout(this.timeout);});
// add level class
var n = 0
menuUL.each(function(i){
if (($(this).parents('ul').length + 1) > n) { n = $(this).parents('ul').length + 1; $(this).addClass('level'+n);}
});
for(levelloop=1;levelloop<=n;levelloop++){
$('.level'+levelloop).children("li").children("ul").addClass("level"+(levelloop+1));
}
function showMenu(){
position = x.position();
//hide all
x.parent().children('li').children('ul').css('display',"none");
//display current child ul
x.children('ul').css('display',"block");
if(x.children('ul').height()!= null && x.children('ul').height()>x.parent().height()){
//resize bigger
x.parent().height(x.children('ul').height());
}
if(x.children('ul').height()== null ){
//resize smaller
x.parent().height('auto');
}
CurrentWidth=x.width();
ChildWidth=x.children('ul').children('li').width();
CurrentMenuIndex = x.parentsUntil(".menu").parent("li").index();
if(x.children('ul').html() != null){
if(CurrentWidth!=0){
x.parent().children('li').children('a').removeClass('active');
x.children('a').addClass('active');
//save the current index from li tag in parent ul.data.index
x.parent("ul").data('index',x.index());
$level1 = menudiv.children('ul').children('li').children('div').eq(CurrentMenuIndex).children('ul');
$level1index = $level1.data('index');
$level1width = $level1.children("li").width();
WidthCounterArray = new Array();
CurrentTarget = $level1.children("li").eq($level1index);
CurrentTotalWidth = 0;
for(WidthCounter=0;WidthCounter<n;WidthCounter++){
//alert(WidthCounter);
WidthCounterArray[WidthCounter] = new Array();
WidthCounterArray[WidthCounter]["target"] = CurrentTarget;
WidthCounterArray[WidthCounter]["index"] = CurrentTarget.children("ul").data('index');
WidthCounterArray[WidthCounter]["width"] = CurrentTarget.children("ul").width();
WidthCounterArray[WidthCounter]["nextargetwidth"] = CurrentTarget.children("ul").children("li").eq(WidthCounterArray[WidthCounter]["index"]).children("ul").children("li").width();
CurrentTarget = CurrentTarget.children("ul").children("li").eq(WidthCounterArray[WidthCounter]["index"]);
CurrentTotalWidth += WidthCounterArray[WidthCounter]["width"];
}
CurrentTotalWidth = CurrentTotalWidth+$level1width;
// resize level1
$level1.width(CurrentTotalWidth);
// resize the shadow
$level1.parent('div').width(CurrentTotalWidth);
//$('div.ui-shadow').eq(CurrentMenuIndex).width(CurrentTotalWidth);
}
}else{
if(CurrentWidth!=0){
//save the current index from li tag in parent ul.data.index
x.parent("ul").data('index',x.index());
// remove active class
x.parent().children('li').children('a').removeClass('active');
$level1 = menudiv.children('ul').children('li').children('div').eq(CurrentMenuIndex).children('ul');
$level1index = $level1.data('index');
$level1width = $level1.children("li").width();
WidthCounterArray = new Array();
CurrentTarget = $level1.children("li").eq($level1index);
CurrentTotalWidth = 0;
for(WidthCounter=0;WidthCounter<n;WidthCounter++){
//alert(WidthCounter);
WidthCounterArray[WidthCounter] = new Array();
WidthCounterArray[WidthCounter]["target"] = CurrentTarget;
WidthCounterArray[WidthCounter]["index"] = CurrentTarget.children("ul").data('index');
WidthCounterArray[WidthCounter]["width"] = CurrentTarget.children("ul").width();
WidthCounterArray[WidthCounter]["nextargetwidth"] = CurrentTarget.children("ul").children("li").eq(WidthCounterArray[WidthCounter]["index"]).children("ul").children("li").width();
CurrentTarget = CurrentTarget.children("ul").children("li").eq(WidthCounterArray[WidthCounter]["index"]);
CurrentTotalWidth += WidthCounterArray[WidthCounter]["width"];
}
CurrentTotalWidth = CurrentTotalWidth+$level1width;
// resize level1
$level1.width(CurrentTotalWidth);
// resize the shadow
$level1.parent('div').width(CurrentTotalWidth);
//$('div.ui-shadow').eq(CurrentMenuIndex).width(CurrentTotalWidth);
// hide all
x.parent().children('li').children('ul').css('display',"none");
}
}
if(CurrentWidth!=0){
x.children('ul').css('top',position.top*-1);
x.children('ul').css('left',x.width());
}
}
})(jQuery)
});
Show code for CSS:
css file: shadowspritemenuIE8.css
/* CSS Document */
#navigationbody{ position:relative; height:60px;}
#menuclone,
#navigation {
position:relative;
top:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#FFF;
z-index:10;
}
#menuclone{position:absolute;}
#menuclone ul,
#navigation ul {
list-style:none;
padding:0px;
margin:0px;
}
#menuclone ul li,
#navigation ul li {
float:left;
padding:0px;
}
#menuclone #support,
#navigation #support {
width:210px;
margin-left:-35px;
}
#menuclone #products,
#navigation #products {
width:175px;
}
#menuclone a,
#navigation a {
color:#0CC;
text-align:left;
text-decoration:none;
display:block;
position:static;
outline:none;
background-color:transparent;
}
body #navigation a.active,
body #navigation a:hover {
color:#FFF;
}
#navigation li.menu{height:69px;}
#navigation { visibility:hidden;}
#menuclone a span,
#navigation a span {
background-image:url(/images/v2/cmn/navigation/bg-nav-headers/de.png);
/* default */
background-position:0px -5px;
width:175px;
height:69px;
display:block;
overflow:hidden;
position:absolute;
top:0px;
left:0px;
}
/* hide the shadow from the ul*/
#navigation a span {background-position:0px -69px;z-index:801;}
#menuclone a span,
#menuclone li.menu{height:60px;}
#menuclone li#support a span,
#navigation li#support a span {
/* default */
background-position:-187px -5px;
width:210px;
}
#navigation li#support a span{background-position:-187px -69px;z-index:801;}
#menuclone li#jquery a span,
#navigation li#jquery a span {
/* default */
background-position:-413px -5px;
}
#navigation li#jquery a span{background-position:-413px -69px;z-index:801;}
#menuclone ul li,
#navigation ul li {
position:relative;
width:175px;
}
#navigation ul li#support div,
#navigation ul li#support ul,
#navigation ul li#support ul li{
width:214px;
}
#navigation ul li div,
#navigation ul li ul {
display:none;
width:175px;
position:relative;
}
#navigation ul li:hover ul ul {
display:none;
}
#navigation ul li ul ul {
display:none;
}
#navigation ul li ul li {
float:none;
cursor:pointer;
position:relative;
margin:0px;
}
#navigation div.ui-shadow{
top:38px;
left:25px;
position:relative;
}
#navigation ul li ul {
/*top:38px;
left:25px;*/
z-index: 800;
position:relative;
padding-bottom:1em;
padding-top:1em;
background-color: #2d2d2d;
background-color: rgba(38, 38, 38, 0.97);
-ms-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-ms-border-top-left-radius: 0;
-moz-border-radius-topleft: 0;
-webkit-border-top-left-radius: 0;
-ms-box-shadow: rgba(0, 0, 0, 0.8) 0 4px 20px;
-moz-box-shadow: rgba(0, 0, 0, 0.8) 0 4px 20px;
-webkit-box-shadow: rgba(0, 0, 0, 0.8) 0 4px 30px;
box-shadow: rgba(0, 0, 0, 0.8) 0 4px 20px;
}
#navigation ul li ul li a {
position:relative;
padding:3px 18px 3px 18px;
/*text-shadow:0px 1px 3px black;*/
/* Textshadow */
/*For IE 8 */
/*-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#000000')";*/
/* For IE 5.5 - 7 */
/*filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#000000');*/
}
#navigation ul li ul ul {
position:absolute;
top:0px;
left:175px;
background-color:transparent;
-ms-box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
box-shadow:none;
}
#navigation ul li ul ul {
width:140px;
}
#navigation ul li ul ul li {
width:140px;
font-size:11px;
}
#navigation ul li#support ul ul li{ float:left;}
#navigation ul li#support ul ul{
width:280px;
}
#navigation ul li#support ul li ul li{ width:140px;}
css conditional command for IE8
<!--[if IE 8]>
<link href="css_jquery_menu_-_dropdown-multilevel-sprite-shadow-IE8-IE8.css" rel="stylesheet" type="text/css" />
<![endif]-->
css file: shadowspritemenuIE8-IE8.css
/* CSS Document */
/* the shadow css for IE */
.ui-shadow-el{
position: absolute;
z-index: 700;
height:100%;
background: url("/images/v2/cmn/shadow/bg-shadow.png") no-repeat;
}
.ui-shadow-top-left {
top: 0;
left: 0;
margin-top: -12px;
margin-left: -22px;
width: 100%;
height: 100%;
background-position: left top;
}
.ui-shadow-top-right {
top: 0;
right: 0;
margin-top: -12px;
margin-right: -22px;
padding-right: 22px;
width: 22px;
height: 100%;
background-position: right top;
}
.ui-shadow-bot-left {
bottom: 0;
left: 0;
margin-bottom: -31px;
margin-left: -22px;
padding-left: 22px;
padding-bottom: 12px;
width: 22px;
height: 31px;
z-index: 750;
background-position: left bottom;
}
.ui-shadow-bot-right {
bottom: 0;
right: 0;
margin-bottom: -31px;
margin-right: -22px;
padding-bottom: 12px;
width: 100%;
height: 31px;
background-position: right bottom;
}
Show code for navigation:
Demo HTML:
<div id="navigation">
<ul>
<li id="products"> <a> <span></span></a>
<ul>
<li><a href="http://www.logitech.com/349/7073">Spezialangebote</a></li>
<li><a href="http://www.logitech.com/de-de/mice-pointers">Mäuse</a>
<ul>
<li><a href="http://www.logitech.com/de-de/mice-pointers?WT.ac=overview">Übersicht</a></li>
<li><a href="http://www.logitech.com/de-de/mice-pointers/mice">Mäuse</a>
<ul>
<li><a href="http://www.logitech.com/de-de/mice-pointers/mice">für Linkshänder</a></li>
<li><a href="http://www.logitech.com/de-de/mice-pointers/mice">für Rechtshänder</a></li>
<li><a href="http://www.logitech.com/de-de/mice-pointers/mice">Symmetrisch</a></li>
</ul>
</li>
<li><a href="http://www.logitech.com/de-de/mice-pointers/trackballs">Trackballs</a></li>
<li><a href="http://www.logitech.com/de-de/mice-pointers/presenter">Präsentationsgeräte</a></li>
<li><a href="http://www.logitech.com/de-de/mice-pointers/mice-keyboard-combos">Tastatur-Maus-Sets</a></li>
</ul>
</li>
<li><a href="http://www.logitech.com/de-de/keyboards">Tastaturen</a>
<ul>
<li><a href="http://www.logitech.com/de-de/keyboards?WT.ac=overview">Übersicht</a></li>
<li><a href="http://www.logitech.com/de-de/keyboards/keyboards">Tastaturen</a></li>
<li><a href="http://www.logitech.com/de-de/keyboards/keyboard-mice-combos">Tastatur-Maus-Sets</a></li>
<li><a href="http://www.logitech.com/de-de/keyboards/number-pads">Nummernblöcke</a></li>
</ul>
</li>
<li><a href="http://www.logitech.com/de-de/webcam-communications">Webcams und PC-Headsets</a>
<ul>
<li><a href="http://www.logitech.com/de-de/webcam-communications?WT.ac=overview">Übersicht</a></li>
<li><a href="http://www.logitech.com/de-de/webcam-communications/webcams">Webcams</a></li>
<li><a href="http://www.logitech.com/de-de/webcam-communications/internet-headsets-phones">PC-Headsets</a></li>
<li><a href="http://www.logitech.com/de-de/webcam-communications/microphones">Mikrofone</a></li>
</ul>
</li>
<li><a href="http://www.logitech.com/de-de/speakers-audio">Audio</a>
<ul>
<li><a href="http://www.logitech.com/de-de/speakers-audio?WT.ac=overview">Übersicht</a></li>
<li><a href="http://www.logitech.com/de-de/speakers-audio/home-pc-speakers">Lautsprecher</a></li>
<li><a href="http://www.logitech.com/de-de/speakers-audio/ipod-mp3-speakers">iPod-Docks</a></li>
<li><a href="http://www.logitech.com/de-de/speakers-audio/headphones">PC-Headsets</a></li>
<li><a href="http://www.logitech.com/de-de/speakers-audio/wireless-music-systems">WLAN-Musik-Systeme</a></li>
<li><a href="http://www.logitech.com/de-de/speakers-audio/earphones">In-Ear-Kopfhörer</a></li>
<li><a href="http://www.logitech.com/de-de/speakers-audio/microphones">Mikrofone</a></li>
</ul>
</li>
<li><a href="http://www.logitech.com/de-de/remotes/overview?WT.ac=nav">Harmony-Fernbedienungen</a>
<ul>
<li><a href="http://www.logitech.com/de-de/remotes/overview">Übersicht</a></li>
<li><a href="http://www.logitech.com/de-de/remotes/universal-remotes">Harmony-Fernbedienungen</a></li>
<li><a href="http://www.logitech.com/de-de/remotes/accessories">Zubehör</a></li>
</ul>
</li>
<li><a href="http://www.logitech.com/de-de/gaming">Gaming</a>
<ul>
<li><a href="http://www.logitech.com/de-de/gaming?WT.ac=overview">Übersicht</a></li>
<li><a href="http://www.logitech.com/de-de/gaming/mice-keyboard-combos">Mäuse und Tastaturen</a></li>
<li><a href="http://www.logitech.com/de-de/gaming/wheels">Lenkräder</a></li>
<li><a href="http://www.logitech.com/de-de/gaming/musical-controllers">Musik-Controller</a></li>
<li><a href="http://www.logitech.com/de-de/gaming/headsets">PC-Headsets</a></li>
<li><a href="http://www.logitech.com/de-de/gaming/joysticks">Joysticks</a></li>
<li><a href="http://www.logitech.com/de-de/gaming/controllers">Gamepads</a></li>
<li><a href="http://www.logitech.com/de-de/gaming/other-accessories">Zubehör</a></li>
</ul>
</li>
<li><a href="http://www.logitech.com/de-de/notebook-products">Notebook-Zubehör</a>
<ul>
<li><a href="http://www.logitech.com/de-de/notebook-products?WT.ac=overview">Übersicht</a></li>
<li><a href="http://www.logitech.com/de-de/notebook-products/mice">Mäuse</a>
<ul>
<li><a href="http://www.logitech.com/de-de/notebook-products/mice?type=Linkshänder">Linkshänder</a></li>
<li><a href="http://www.logitech.com/de-de/notebook-products/mice?type=Rechtshänder">Rechtshänder</a></li>
</ul>
</li>
<li><a href="http://www.logitech.com/de-de/notebook-products/stands">Notebook-Halterungen</a></li>
<li><a href="http://www.logitech.com/de-de/notebook-products/speakers">Lautsprecher</a></li>
<li><a href="http://www.logitech.com/de-de/notebook-products/webcams">Webcams</a></li>
<li><a href="http://www.logitech.com/de-de/notebook-products/cooling-pads">Lapdesks und Cooling Pads</a></li>
<li><a href="http://www.logitech.com/de-de/notebook-products/other-accessories">Zubehör</a>
<ul>
<li><a href="http://www.logitech.com/de-de/notebook-products/other-accessories">Taschen</a></li>
<li><a href="http://www.logitech.com/de-de/notebook-products/other-accessories">Maus Pads</a>
<ul>
<li><a href="http://www.logitech.com/de-de/notebook-products/other-accessories">Leder</a></li>
<li><a href="http://www.logitech.com/de-de/notebook-products/other-accessories">Hartplastik</a></li>
<li><a href="http://www.logitech.com/de-de/notebook-products/other-accessories">Holz</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.logitech.com/de-de/video-security-systems">Digitale Videosicherheit</a>
<ul>
<li><a href="http://www.logitech.com/de-de/video-security-systems?WT.ac=overview">Übersicht</a></li>
<li><a href="http://www.logitech.com/de-de/webcam-communications/video-security-systems/master-systems">Master-Systeme</a></li>
<li><a href="http://www.logitech.com/de-de/webcam-communications/video-security-systems/add-on-cameras">Add-On Cameras </a></li>
<li><a href="http://www.logitech.com/de-de/webcam-communications/video-security-systems/monitoring-services">Premium-Services</a></li>
<li><a href="http://www.logitech.com/de-de/webcam-communications/video-security-systems/other-accessories">Zubehör</a></li>
</ul>
</li>
</ul>
</li>
<li id="support"> <a> <span></span></a>
<ul>
<li><a href="http://www.logitech.com/de-de/support-downloads">Produktunterstützung </a>
<ul>
<li><a href="http://www.logitech.com/de-de/support-downloads/downloads/mice">Mäuse</a></li>
<li><a href="http://www.logitech.com/de-de/support-downloads/downloads/keyboard-mice-combos">Tastatur-Maus-Sets</a></li>
<li><a href="http://www.logitech.com/de-de/support-downloads/downloads/webcams">Webcams</a></li>
<li><a href="http://www.logitech.com/de-de/support-downloads/downloads/universal-remotes">Harmony-Fernbedienungen</a></li>
<li><a href="http://www.logitech.com/de-de/support-downloads/downloads/speakers-audio">Audio</a></li>
<li><a href="http://www.logitech.com/de-de/support-downloads/downloads/game-gear">Gaming</a></li>
<li><a href="http://www.logitech.com/de-de/support-downloads/downloads/keyboards">Tastaturen</a></li>
<li><a href="http://www.logitech.com/de-de/support-downloads/downloads/video-security-systems">Digitale Videosicherheit</a></li>
<li><a href="http://www.logitech.com/de-de/support-downloads/downloads/internet-headsets-phones">PC-Headsets</a></li>
<li><a href="http://www.logitech.com/de-de/support-downloads/downloads/trackballs">Trackballs</a></li>
<li><a href="http://www.logitech.com/de-de/support-downloads/downloads/design-controller">Design Controller</a></li>
<li><a href="http://www.logitech.com/de-de/support-downloads/downloads/presenter">Präsentationsgeräte</a></li>
<li><a href="http://www.logitech.com/de-de/support-downloads/downloads/microphones">Mikrofone</a></li>
<li><a href="http://www.logitech.com/de-de/support-downloads/downloads/business-products">Business</a></li>
<li><a href="http://www.logitech.com/de-de/support-downloads/downloads/digital-pen">Digitale Stifte</a></li>
<li><a href="http://www.logitech.com/de-de/support-downloads/downloads/laptop-accessories">Notebook-Zubehör</a></li>
<li><a href="http://www.logitech.com/de-de/support-downloads/downloads/software">Software</a></li>
</ul>
</li>
<li><a href="http://www.logitech.com/de-de/support-downloads/support-contactus">Kontakt</a></li>
<li><a href="http://www.logitech.com/349/4872?WT.ac=ps|5055">Ersatzteilladen</a></li>
</ul>
</li>
<li id="jquery"> <a> <span></span></a>
<ul>
<li><a href="http://jquery.com/">jQuery.com</a></li>
<li><a href="http://api.jquery.com/category/events/">jQuery Events</a>
<ul>
<li><a href="http://api.jquery.com/mouseenter/">mouseenter</a></li>
<li><a href="http://api.jquery.com/mouseleave/">mouseleave</a></li>
</ul>
</li>
<li><a href="http://api.jquery.com/category/selectors/">jQuery Selectors</a></li>
<li><a href="http://api.jquery.com/category/traversing/filtering/">jQuery Filtering</a></li>
<li><a href="http://www.w3schools.com/js/js_timing.asp">JavaScript Timing Events</a>
<ul>
<li><a href="https://developer.mozilla.org/en/DOM/window.setTimeout">window.setTimeout</a></li>
<li><a href="https://developer.mozilla.org/en/DOM/window.setInterval">window.setInterval</a></li>
<li><a href="http://help.adobe.com/de_DE/AS2LCR/Flash_10.0/help.html?content=00000607.html">ActionScript 2.0 setTimeout-Funktion</a></li>
<li><a href="http://help.adobe.com/de_DE/AS2LCR/Flash_10.0/help.html?content=00000605.html">ActionScript 2.0 setInterval-Funktion </a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>