[jQuery] Adding Multi-Tier to Drop Menu?
I thought I could get this working with my first UL, doesn't seem to
be
cooperating very much though. Anyone mind helping me find out how
to add the ability to traverse up to four tiers? Much MUCH
appreciated!
[code]
$(document).ready(function(){
$("ul.subnav").parent().append("<span></span>"); //Only shows drop
down trigger when js is enabled - Adds empty span tag after ul.subnav
$("ul.topnav li span").hover(function() { //When trigger is
onHover...
//Following events are applied to the subnav itself (moving subnav
up and down)
$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop
down the subnav on click
$(this).find('ul:first:hidden').css({visibility: "visible",display:
"none"}).show(400);
$(this).find('ul:first').css({visibility: "hidden"});
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.subnav").slideUp('slow'); //When the
mouse hovers out of the subnav, move it back up
});
//Following events are applied to the trigger (Hover events for the
trigger)
}).hover(function() {
$(this).addClass("subhover"); //On hover over, add class "subhover"
}, function(){ //On Hover Out
$(this).removeClass("subhover"); //On hover out, remove class
"subhover"
});
});
And here's my body to body to see the syntax I'm using
[code]
<body>
<div class="container">
<div id="header">
<div class="disclaimer"></div>
<ul class="topnav">
<li><a href="#">Lighting</a>
<ul class="subnav">
<li><a href="#">PR LIGHTING</a>
<ul class="subnav">
<li><a href="http://omnisistem.com/layers/Lighting/prl-
ar.php">Architectural</a></li>
<li><a href="http://omnisistem.com/layers/Lighting/prl-
cp.php">Centerpieces</a></li>
<li><a href="http://omnisistem.com/layers/Lighting/prl-dj.php">DJ Pro
Series</a></li>
<li><a href="http://omnisistem.com/layers/Lighting/prl-
fs.php">Followspots</a></li>
<li><a href="http://omnisistem.com/layers/Lighting/prl-my.php">Moving
Yoke</a></li>
</ul></li>
<li><a href="#">NOVALIGHT</a>
<ul class="subnav">
<li><a href="http://omnisistem.com/layers/Lighting/nvl-
sl.php">Searchlights</a></li>
</ul></li>
<li><a href="#">OMNILITE</a>
<ul class="subnav">
<li><a href="http://omnisistem.com/layers/Lighting/lit-
cr.php">Controllers</a></li>
<li><a href="http://omnisistem.com/layers/Lighting/lit-fx.php">Effect
Lighting</a></li>
<li><a href="http://omnisistem.com/layers/Lighting/lit-
il.php">Intelligent</a></li>
<li><a href="http://omnisistem.com/layers/Lighting/lit-ld.php">LED
Lighting</a></li>
<li><a href="http://omnisistem.com/layers/Lighting/lit-se.php">Special
Effects</a></li>
<li><a href="http://omnisistem.com/layers/Lighting/lit-uv.php">UV
Lighting</a></li>
<li><a href="http://omnisistem.com/layers/Lighting/lit-st.php">Stands</
a></li>
</ul></li>
<li><a href="#">PSL</a>
<ul class="subnav">
<li><a href="http://omnisistem.com/layers/Lighting/psl-
ar.php">Architectural</a></li>
<li><a href="http://omnisistem.com/layers/Lighting/psl-
cp.php">Centerpieces</a></li>
<li><a href="http://omnisistem.com/layers/Lighting/psl-fx.php">Effect
Lighting</a></li>
<li><a href="http://omnisistem.com/layers/Lighting/psl-fo.php">Fiber
Optic</a></li>
<li><a href="http://omnisistem.com/layers/Lighting/psl-
il.php">Intelligent</a></li>
<li><a href="http://omnisistem.com/layers/Lighting/psl-se.php">Special
Effects</a></li>
<li><a href="http://omnisistem.com/layers/Lighting/psl-
th.php">Theatrical</a></li>
<li><a href="http://omnisistem.com/layers/Lighting/lit-uv.php">UV
Lighting</a></li>
</ul></li>
</ul></li>
<li><a href="#">LED</a>
<ul class="subnav">
<li><a href="http://omnisistem.com/layers/LED/led-fx.php">Effects</a></
li>
<li><a href="http://omnisistem.com/layers/LED/led-pc.php">Par Cans</
a></li>
<li><a href="http://omnisistem.com/layers/LED/led-my.php">Moving Yoke</
a></li>
<li><a href="http://omnisistem.com/layers/LED/led-sp.php">Strips</a></
li>
<li><a href="http://omnisistem.com/layers/LED/led-ps.php">Panels</a></
li>
<li><a href="http://omnisistem.com/layers/LED/led-vw.php">Video Walls</
a></li>
</ul></li>
<li><a href="#">Lasers</a>
<ul class="subnav">
<li><a href="http://omnisistem.com/layers/Lasers/lsr-
pr.php">Professional</a></li>
<li><a href="http://omnisistem.com/layers/Lasers/lsr-sp.php">Semi-
Professional</a></li>
<li><a href="http://omnisistem.com/layers/Lasers/lsr-dj.php">DJ &
Club</a></li>
<li><a href="http://omnisistem.com/layers/Lasers/lsr-
la.php">Accessories</a></li>
</ul></li>
<li><a href="#">Omni Cables</a>
<ul class="subnav">
<li><a href="http://omnisistem.com/layers/Omni Cables/cbl-al.php">All
Cables</a></li>
</ul></li>
<li><a href="#">Omni Cases</a>
<ul class="subnav">
<li><a href="http://omnisistem.com/layers/Omni Cases/css-hd.php">Hard</
a></li>
<li><a href="http://omnisistem.com/layers/Omni Cases/css-sf.php">Soft</
a></li>
<li><a href="http://omnisistem.com/layers/Omni Cases/css-rd.php">Road</
a></li>
<li><a href="http://omnisistem.com/layers/Omni Cases/css-
fl.php">Flight</a></li>
</ul></li>
<li><a href="http://omnisistem.com/layers/Omni Sound/snd-al">Omni
Sound</a></li>
<li><a href="#">TrussSistems</a>
<ul class="subnav">
<li><a href="http://omnisistem.com/layers/TrussSistems/trs-
cl.php">Clamps</a></li>
<li><a href="http://omnisistem.com/layers/TrussSistems/trs-
tr.php">Truss</a></li>
</ul></li>
</ul>
</div>
</div>
</body>
[/code]
Thanks Guys!
posted by twitter @ 9:30 AM
0 Comments
0 Comments:
Post a Comment
Subscribe to Post Comments [Atom]
<< Home