I tryd to made a Jquery dropdown menu when i slide the menu item it slides perfecly down and when i leave the menu item it slides perfecly up.
The only problem is when i move my mouse down into the submenu it slides up and what i want is that is stays open untill i leave the menu item or the submenu.
HTML
<ul>
<a href="dashboard.php"><li class="dashboard icon-home">Dashboard</li></a>
<a href="#"><li class="icon-pages">Paginas</li></a>
<a class="trigger" href="#"><li class="afbeeldingen icon-image">Afbeeldingen</li></a>
<div class="adminsubmenu">
<a href="#">Submenu item</a>
<a href="#">Submenu item</a>
<a href="#">Submenu item</a>
</div>
<a href="#"><li class="icon-users">Gebruikers</li></a>
<a href="#"><li class="icon-settings">Instellingen</li></a>
</ul>
CSS
div#adminmenu ul li {
font-size:13px;
font-weight:600;
padding:7px 0 7px 28px;
background-color:#fff;
width:175px;
border-bottom:1px solid #c2c2c2;
border-right:1px solid #c2c2c2;
}
div.adminsubmenu {
height:100px;
width:175px;
background:url(../images/adminmenu_bg.png) repeat-y top right #e6e6e6;
}
Jquery
$(document).ready(function(){
$(".adminsubmenu").hide();
$("a.trigger").mouseover(function(){
$(".adminsubmenu").slideDown();
}).mouseleave(function(){
$(".adminsubmenu").slideUp();
});
});
And here is the Fiddle
You ought to put the <a>
inside of the <li>
, not the other way around, in order to make the HTML valid.
That said, just change your JavaScript to do exactly what you want:
$("a.trigger").mouseover(function(){
$(".adminsubmenu").slideDown();
});
$('.adminsubmenu').mouseleave(function(){
$(".adminsubmenu").slideUp();
});
Better yet, place the submenu inside the trigger element. That way, you'll still be hovering over the trigger as long as your mouse is over the submenu:
<li class="afbeeldingen icon-image trigger">
<a class="" href="#">Afbeeldingen</a>
<ul class="adminsubmenu">
<li><a href="#">Submenu item</a></li>
<li><a href="#">Submenu item</a></li>
<li><a href="#">Submenu item</a></li>
</ul>
</li>
new JS:
$(".trigger").mouseover(function () {
$(".adminsubmenu").stop().slideDown();
}).mouseleave(function () {
$(".adminsubmenu").stop().slideUp();
});
<li><a ... </a></li>
INSTEAD OF
<a><li> </li></a>
It's actually the other way round
It was doing exactly what you said. When the mouse leaves a.trigger
the menu slides up. So you just have to change it to $(".adminsubmenu").mouseleave
Here is what you want:
$(document).ready(function(){
$(".adminsubmenu").hide();
$("a.trigger").mouseover(function(){
$(".adminsubmenu").slideDown();
})
$(".adminsubmenu").mouseleave(function(){
$(".adminsubmenu").slideUp();
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.