Jquery submenu

[leso9903]

Hello, I've tried to do a Jquery dropdown on a menu but it only works one time. Is there any kind of toggle or something I should use instead. Do you have any soutions to a multilevel dropdown submenu? I'm very new to Jquery..

	<ul>	<li><a href="#">BlA</a></li>			<li><a href="#">HTML</a></li>	<li class="css"><a href="#">CSS</a>		<ul class="subcss">			<li><a href="#">Box Model</a></li>			<li><a href="#">Pseudo Classes</a></li>				</ul></li>  	<!-- </li> sätts efter sub-menyerna -->	<li><a href="#">JavaScript</a></li>		</ul>

	$(function(){              $('.css').mouseover(function(){	      $('ul>li').slideDown();	      }).mouseleave(function(){	      $('.subcss').slideUp();	});});

[jeffman]

Assuming your CSS looks like this:

.subcss {   display: none;}

change this

$('ul>li').slideDown();

to this

$('.subcss').slideDown();

[jeffman]

Alternatively, switch all the CSS and jQuery to element selectors. (Stuff like ul ul.) That way, if you need to add more submenus, you won't need to change the code. Most menus I've seen work that way.

Edited July 7, 2013 by Deirdre's Dad

[dsonesuk]

use hover instead, you just need selector fo li

$('#nav li').hover(function () {$(this).children('ul').stop(true,true).slideDown("linear"); }, //stop(true, true) prevents continous looping through animation and make sure animation completes if user hovers over menu list item several times quicklyfunction () {$(this).children('ul').stop(true,true).slideUp("linear"); }); // linear make sure the menu slides at a constant pace, not quickly and then slow down as by default});

<div id="nav">    <ul>    <li><a href="#">BlA</a></li>            <li><a href="#">HTML</a></li>    <li><a href="#">CSS</a>        <ul>            <li><a href="#">Box Model</a></li>            <li><a href="#">Pseudo Classes</a></li>                </ul></li>     <!-- </li> sätts efter sub-menyerna -->    <li><a href="#">JavaScript</a></li>        </ul></div>

Edited July 7, 2013 by dsonesuk

[leso9903]

 

use hover instead, you just need selector fo li

$('#nav li').hover(function () {$(this).children('ul').stop(true,true).slideDown("linear"); }, //stop(true, true) prevents continous looping through animation and make sure animation completes if user hovers over menu list item several times quicklyfunction () {$(this).children('ul').stop(true,true).slideUp("linear"); }); // linear make sure the menu slides at a constant pace, not quickly and then slow down as by default});

<div id="nav">    <ul>    <li><a href="#">BlA</a></li>            <li><a href="#">HTML</a></li>    <li><a href="#">CSS</a>        <ul>            <li><a href="#">Box Model</a></li>            <li><a href="#">Pseudo Classes</a></li>                </ul></li>     <!-- </li> sätts efter sub-menyerna -->    <li><a href="#">JavaScript</a></li>        </ul></div>

Now, that's the code I'm looking for, however, it doesn't work for me..I think the target doesn't work or something?

[dsonesuk]

<script type="text/javascript">/*<![CDATA[*//*---->*/$(function(){$('#nav ul ul').hide();// hide menu with display none so if javascript disabled the menu will stiil work but without sliding$('#nav li').hover(function () {$(this).children('ul').stop(true,true).slideDown("linear"); }, //stop(true, true) prevents continous looping through animation and make sure animation completes if user hovers over menu list item several times quicklyfunction () {$(this).children('ul').stop(true,true).slideUp("linear"); }); // linear make sure the menu slides at a constant pace, not quickly and then slow down as by default});/*--*//*]]>*/</script><style type="text/css">#nav ul, #nav li {padding:0; margin:0; text-indent:0; list-style-type:none;}#nav a {text-decoration:none; padding:0 15px; line-height: 35px; display:block;}#nav a:hover { background-color:#CC9966;}#nav ul ul a {width:100%; height: 100%;text-indent: 15px; padding: 0;}#nav li {position:relative; float: left; height: 35px; background-color:#669966; text-align:center; }#nav li li { background-color:#CCCCFF; text-align:left;width: 100%; height:100%;}#nav ul ul {position:absolute; left: -99999em; top: 35px; width: 200px; }#nav li:hover ul {left:0;}</style>

[leso9903]

<script type="text/javascript">/*<![CDATA[*//*---->*/$(function(){$('#nav ul ul').hide();// hide menu with display none so if javascript disabled the menu will stiil work but without sliding$('#nav li').hover(function () {$(this).children('ul').stop(true,true).slideDown("linear"); }, //stop(true, true) prevents continous looping through animation and make sure animation completes if user hovers over menu list item several times quicklyfunction () {$(this).children('ul').stop(true,true).slideUp("linear"); }); // linear make sure the menu slides at a constant pace, not quickly and then slow down as by default});/*--*//*]]>*/</script><style type="text/css">#nav ul, #nav li {padding:0; margin:0; text-indent:0; list-style-type:none;}#nav a {text-decoration:none; padding:0 15px; line-height: 35px; display:block;}#nav a:hover { background-color:#CC9966;}#nav ul ul a {width:100%; height: 100%;text-indent: 15px; padding: 0;}#nav li {position:relative; float: left; height: 35px; background-color:#669966; text-align:center; }#nav li li { background-color:#CCCCFF; text-align:left;width: 100%; height:100%;}#nav ul ul {position:absolute; left: -99999em; top: 35px; width: 200px; }#nav li:hover ul {left:0;}</style>

It works! thank you very very much. I've a followup question. say I want to have an animation that changes the opacity from 0 to 1 and vice versa. How would I go about doing that?

I've changed the code a bit but it's basically what I got from you..

function mainmenu(){$(" #nav ul ").css({display: "none"}); // Opera Fix$(" #nav li").hover(function(){		$(this).children('ul').stop(true,true).slideDown("linear");		},function(){		$(this).children('ul').stop(true,true).slideUp("linear");		});} $(document).ready(function(){	mainmenu();	})

I changed slideUp/slideDown to opacity 1/0:

function mainmenu(){$(" #nav ul ").css({display: "none"}); // Opera Fix$(" #nav li").hover(function(){		$(this).children('ul').stop(true,true).animate({"opacity": 1});		},function(){		$(this).children('ul').stop(true,true).animate({"opacity": 0});		});} $(document).ready(function(){	mainmenu();})

But it doesn't work, did I miss something?

[dsonesuk]

<script type="text/javascript">/*<![CDATA[*//*---->*/$(function(){$('#nav ul ul').hide().css({'left': 0 });// hide menu with display none so if javascript disabled the menu will stiil work but without sliding$('#nav li').hover(function () {//$(this).children('ul').stop(true,true).slideDown("linear"); },$(this).children('ul').stop(true,true).fadeIn(); }, //stop(true, true) prevents continous looping through animation and make sure animation completes if user hovers over menu list item several times quicklyfunction () {//$(this).children('ul').stop(true,true).slideUp("linear"); }); // linear make sure the menu slides at a constant pace, not quickly and then slow down as by default$(this).children('ul').stop(true,true).fadeOut(); });});/*--*//*]]>*/</script><style type="text/css">#nav ul, #nav li {padding:0; margin:0; text-indent:0; list-style-type:none;}#nav a {text-decoration:none; padding:0 15px; line-height: 35px; display:block;}#nav a:hover { background-color:#CC9966;}#nav ul ul a {width:100%; height: 100%;text-indent: 15px; padding: 0;}#nav li {position:relative; float: left; height: 35px; background-color:#669966; text-align:center; }#nav li li { background-color:#CCCCFF; text-align:left;width: 100%; height:100%;}#nav ul ul {position:absolute; left: -99999em;/**/ top: 35px; width: 200px; }#nav li:hover ul {left:0;}</style>

[davej]

CSS vs. jQuery. This jQuery approach offers adjustable effects timing, but could a CSS3 animation offer that also?