Reputation: 23
A noob question. The answer is probably very simple, but somehow, i cannot figure it out, and need to move on in my project.
I have a vertical nav menu, and i have a slide down on hover. But I would like the menu to stay open, once it has slid down. I have tried deleting the last row of code, but that doe not look pretty.
I have tried to implement the Stu Nicholls method , but did not get it to work. But that is the effect i would like to have.
My HTML menu is :
<nav id="verticalmenu">
<ul>
<li><a class="slide" href="#">Kalendarium</a>
<ul class="down">
<li><a href="#">Konzerte</a></li>
<li><a href="#">Seminare</a></li>
<li><a href="#">Vortraege</a></li>
</ul>
</li>
<li><a href="#">Projekte</a>
</ul>
And the jquery to it:
<script type="text/javascript">
(function($){
//cache nav
var nav = $("#verticalmenu");
//add hovers to submenu parents
nav.find("li").each(function() {
if ($(this).find("ul").length > 0) {
//show subnav on hover
$(this).mouseenter(function() {
$(this).find("ul").stop(true, true).slideDown();
});
//hide submenus on exit
$(this).mouseleave(function() {
$(this).find("ul").stop(true, true).slideUp();
});
}
});
})(jQuery);
Thanks a lot!
Upvotes: 0
Views: 5447
Reputation: 18578
just hide them on document load. there is no need of if check, jquery does that internally
(function($){
var nav = $("#verticalmenu");
//add hovers to submenu parents
nav.find("li").each(function() {
var li_ul = $(this).find("ul");
li_ul.hide();
//show subnav on hover
$(this).mouseenter(function() {
li_ul.stop(true, true).slideDown();
});
});
})(jQuery);
fiddle : http://jsfiddle.net/Redwb/3/
Upvotes: 2