I was injecting this into the code, it Origionally was not there.
[code]
$(this).find('ul:first:hidden').css({visibility:
"visible",display: "none"}).show(400);
$(this).find('ul:first').css({visibility: "hidden"});
[/code]
I had taken a menu system that I liked and thought worked well, and
was
trying to restructure it. I am not very adept at JQuery though, my
skills are
firmly planted in PHP API dev. If I was to just use this code (below)
how
could I make it work?? I really don't want to scrap the entire idea
just to
rewrite it, it'd take me foreeeever, lol. Thanks for taking this on,
serious
brownie points awarded.
-jd
[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).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"
});
});
[/code]
On Oct 8, 3:29 pm, Charlie <charlie...@gmail.com> wrote:
> taking a stab at this, code seems quite strange to me
> First- check your context of "this" , in your span.hover you have a "this"
> looking for a child of the span that is a UL
> sildedown().show() - not necessary, slidedown already takes a hidden element
> and "shows" it
> the css keeps functioning on the same ul:first and is going in circles with
> display: none ,then show, and next line on same element visibility: hidden
> I think it may be your interpretation of "this" ?? In your span.hover()
> function " this" will always be the span
> Your parent hover function inside the child hover function seems strange to
> me. Realistically I think you chose the wrong element to start your menu
> hovers with. When you hover an li, the UL that opens is within that li,
> therefore as you move mouse down( or sideways) into subs you haven't left the
> hovered element
> I'd suggest scrapping everything and start over, using your li's as the
> hovering element
> ehime wrote: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>...
>
> read more »
