JQuery dropdown menu help

Fiddlestx · August 20, 2010, 9:14pm

Hello, I have a question regarding jquery and it’s use in a dropdown menu. I am attempting adapt a script that I found to a dynamically generated unordered list. The list is generated with the NavEE plugin for Expression Engine and I cannot assign a class to a nested ul but I can apply the class to it’s parent li.

Here is the HTML and the JQuery script. I tried to modify the script to get it to work on the child ul elements but it just breaks the menu and I’m not sure what to do at this point :/.

Any help would be greatly appreciated.


<ul class="topnav">
                        <li> <a href="#">Products</a>
                            <ul class="subnav">
                                <li><a href="#">product a</a></li>
                                <li><a href="#">product b</a></li>
                                <li><a href="#">product c</a></li>
                            </ul>
                        </li>
                        <li> <a href="#">Company Blog</a></li>
                        <li> <a href="#">Store</a></li>
                        <li> <a href="#">Contact</a></li>
                    </ul>


$(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").click(function() { //When trigger is clicked...

		//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"
	});

});

Fiddlestx · August 20, 2010, 9:31pm

Sorry for leaving that out


ul.topnav {
	list-style: none;
	padding: 0 20px;
	margin: 0;
	float: left;
	width: 920px;
	background: #222;
	font-size: 1.2em;
	background: url(topnav_bg.jpg);
}
ul.topnav li {
	float: left;
	margin: 0;
	padding: 0 15px 0 0;
	position: relative; /*--Declare X and Y axis base for sub navigation--*/
}
ul.topnav li a{
	padding: 10px 5px;
	color: #fff;
	display: block;
	text-decoration: none;
	float: left;
}
ul.topnav li a:hover{
	background: url(topnav_hover.gif) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
	width: 17px;
	height: 35px;
	float: left;
	background: url(subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
	list-style: none;
	position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
	left: 0; top: 35px;
	background: #333;
	margin: 0; padding: 0;
	display: none;
	float: left;
	width: 170px;
	border: 1px solid #111;
}
ul.topnav li ul.subnav li{
	margin: 0; padding: 0;
	border-top: 1px solid #252525; /*--Create bevel effect--*/
	border-bottom: 1px solid #444; /*--Create bevel effect--*/
	clear: both;
	width: 170px;
}
html ul.topnav li ul.subnav li a {
	float: left;
	width: 145px;
	background: #333 url(dropdown_linkbg.gif) no-repeat 10px center;
	padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
	background: #222 url(dropdown_linkbg.gif) no-repeat 10px center;
}

wolken · August 20, 2010, 9:23pm

Please show the css

Fiddlestx · August 21, 2010, 4:00pm

That fixes it, the effect is pretty cool as well. It works in IE 6 as well, thank you very much

Fiddlestx · August 21, 2010, 12:59am

One more quick question. If i wanted to make the menu show when i hover over the text what would i need?

I have been playing with it but I can’t get it to work
I don’t know jquery so i’m kind of shooting in the dark here but this is what i have.


 $("ul.topnav li a").hover(function() { //When trigger is clicked...
                    //Following events are applied to the subnav itself (moving subnav up and down)


                    $(this).prev().slideDown("fast").show(); //Drop down the subnav on click

                    $(this).parent().hover(function() {}, function(){
                        $(this).parent().find("li.subnav ul").slideUp("slow"); //When the mouse hovers out of the subnav, move it back up
                    });

wolken · August 21, 2010, 2:43pm

ok… if you show me the current code you’re using, maybe I’ll be able to tell you what’s wrong

Fiddlestx · August 21, 2010, 2:52pm

It’s what you posted above, I couldn’t get it to pop-up on hovering over the text so I went back to where it was working. It’s really weird, it’s just flickering.

Fiddlestx · August 20, 2010, 9:55pm

That’s great, thank you very much.

Fiddlestx · August 21, 2010, 2:35pm

IE 8, I havn’t tested it in others yet?

edit* IE 6 does it as well

wolken · August 21, 2010, 3:31pm

It’s weird, I tried it on IE 8 and there was no flickering.
I can’t generate the problem myself…
We have to go through trial and error step by step.

Try this and let me know if it flickers.


$(document).ready(function(){
    $("li.subnav").append("<span></span>"); 
    $("li.subnav").mouseleave(function(){
			if($(this).data('isdown'))
			{$(this).parent().find("li.subnav ul").hide("slow");
			$(this).data('isdown',false);
			}
        });
    $("ul.topnav li.subnav span").click(function() { 
		$(this).parent().data('isdown',true);
		$(this).prev().slideDown('fast').show();
        }).hover(function() {
            $(this).addClass("subhover"); 
        }, function(){  //On Hover Out
            $(this).removeClass("subhover");
    });
 
});

Fiddlestx · August 21, 2010, 3:25pm

Still doing it in both ie6 and 8, very strange.

Too bad there isn’t just a giant easy button to make every abandon IE

wolken · August 21, 2010, 1:53pm

which IE ?

wolken · August 21, 2010, 3:07pm

Try this and let me know if it flickers.


$(document).ready(function(){
    $("li.subnav").append("<span></span>"); 
    $("li.subnav").mouseleave(function(){
			if($(this).data('isdown'))
			{$(this).parent().find("li.subnav ul").slideUp('slow');$(this).data('isdown',false);}
        });
    $("ul.topnav li.subnav span").click(function() { 
		$(this).parent().data('isdown',true);
		$(this).prev().slideDown('fast').show();
        }).hover(function() {
            $(this).addClass("subhover"); 
        }, function(){  //On Hover Out
            $(this).removeClass("subhover");
    });
 
});

wolken · August 20, 2010, 9:49pm

Modified javascript:


$(document).ready(function(){
 
    $("li.subnav").append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav
    
    $("ul.topnav li span").click(function() { //When trigger is clicked...
        //Following events are applied to the subnav itself (moving subnav up and down)
       
	    
		$(this).prev().slideDown('fast').show(); //Drop down the subnav on click
 		
        $(this).parent().hover(function() {}, function(){
            $(this).parent().find("li.subnav ul").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"
    });
 
});

Modified css :


ul.topnav {
    list-style: none;
    padding: 0 20px;
    margin: 0;
    float: left;
    width: 920px;
    background: #222;
    font-size: 1.2em;
    background: url(topnav_bg.jpg);
}
ul.topnav li {
    float: left;
    margin: 0;
    padding: 0 15px 0 0;
    position: relative; /*--Declare X and Y axis base for sub navigation--*/
}
ul.topnav li a{
    padding: 10px 5px;
    color: #fff;
    display: block;
    text-decoration: none;
    float: left;
}
ul.topnav li a:hover{
    background: url(topnav_hover.gif) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
    width: 17px;
    height: 35px;
    float: left;
    background: url(subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li.subnav ul{
    list-style: none;
    position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
    left: 0; top: 35px;
    background: #333;
    margin: 0; padding: 0;
    display: none;
    float: left;
    width: 170px;
    border: 1px solid #111;
}
ul.topnav li.subnav ul li{
    margin: 0; padding: 0;
    border-top: 1px solid #252525; /*--Create bevel effect--*/
    border-bottom: 1px solid #444; /*--Create bevel effect--*/
    clear: both;
    width: 170px;
}
html ul.topnav li.subnav ul li a {
    float: left;
    width: 145px;
    background: #333 url(dropdown_linkbg.gif) no-repeat 10px center;
    padding-left: 20px;
}
html ul.topnav li.subnav ul li a:hover { /*--Hover effect for subnav links--*/
    background: #222 url(dropdown_linkbg.gif) no-repeat 10px center;
}

Modified HTML :


<ul class="topnav">
    <li class="subnav"> <a href="#">Products</a>
        <ul>
            <li><a href="#">Mechanic in a Bottle</a></li>
            <li><a href="#">Deisel Mechanic in a Bottle</a></li>
            <li><a href="#">Ethenol Shield</a></li>
        </ul>
    </li>
    <li> <a href="#">Company Blog</a></li>
    <li> <a href="#">Store</a></li>
    <li> <a href="#">Contact</a></li>
</ul>

Is that what you’re looking for ?

Fiddlestx · August 21, 2010, 1:47pm

For some reason in IE the menu expands just fine but when you move off it it closes smooth and then flickers real fast back to fully open and finally closes

Any ideas what would cause that? It works fine in firefox.