Sliding menu problem
I have a navigation menu that has submenus slide down on hover. The menu is structured like so:
<ul class='nav'>
<li><a href='#'>About</a></li>
<ul class='submenu'>
<li><a href='#'>Stuff</a></li>
</ul>
</ul>
etc..
What I did to create slideouts was the following:
$('ul.nav li').hover(function(){
$el = $(this);
$el.next('.submenu').slideToggle(); # they all have submenus, so this works for now
},function(){
$el = $(this);
$el.next('.submenu').slideToggle();
});
However, with this approach, the submenu collapses when you mouse off the main LI. I fixed this by removing the collapse on mouseout, and then created a mouseout event for the submenu (ie: when the mouse leaves the submenu, it collapses). However, in thi开发者_StackOverflow社区s setup, if you happen to mouse onto the main LI, then leave without mousing into the menu, the submenu stays open (obviously).
How should I approach this in a manner that will function properly and also allow me to make it degrade gracefully?
note: i also tried containing the ul inside the li (<li><a href>Stuff</a><ul class='submenu'><li></li></ul>) but I need the submenu to hide behind the main LI image, and that wasn't possible using z-index in that setup).
You should restructure your code a bit to be valid as well, like this:
<ul class='nav'>
<li><a href='#'>About</a>
<ul class='submenu'>
<li><a href='#'>Stuff</a></li>
</ul>
</li>
</ul>
The bug with z-indexing you have with this I'm not understanding...you should add that or ask a new question specifically on it, because your HTML should be like this.
This lets you hover inside the same element...and a <ul> can't be a child of a <ul> anyway, it's invalid HTML (even though the browser will usually render it).
Then you can use jQuery like this:
$('ul.nav li').hover(function(){
$(this).children('.submenu').stop(true, true).slideToggle();
});
You can give it a try here, the .stop() call addition is to prevent animation queue build-up.
here is a an example
<style type="text/css">
.menucontrol a:link, .menucontrol a:active, .menucontrol a:visited
{
border: 1px solid orange;
color: white;
background-color: orange;
}
.menucontrol a:hover
{
background-color: #fff;
color: #333;
}
.menucontrol, .menucontrol ul
{
margin: 0;
padding: 0;
list-style-type: none;
list-style-position: outside;
position: relative;
line-height: 1.5em;
}
.menucontrol a:link, .menucontrol a:active, .menucontrol a:visited
{
display: block;
padding: 0px 5px;
text-decoration: none;
}
.menucontrol li
{
float: left;
position: relative;
}
.menucontrol ul
{
position: absolute;
width: 12em;
top: 1.5em;
display: none;
}
.menucontrol li ul a
{
width: 12em;
float: left;
}
.menucontrol ul ul
{
top: auto;
}
.menucontrol li ul ul
{
left: 12em;
margin: 0px 0 0 10px;
}
.menucontrol li:hover ul ul, .menucontrol li:hover ul ul ul, .menucontrol li:hover ul ul ul ul
{
display: none;
}
.menucontrol li:hover ul, .menucontrol li li:hover ul, .menucontrol li li li:hover ul, .menucontrol li li li li:hover ul
{
display: block;
}
</style>
<body style="font-family: Consolas; font-size: 11px;">
<ul class="menucontrol">
<li><a href="#">1 HTML</a></li>
<li><a href="#">2 CSS</a></li>
<li><a href="#">3 Javascript</a>
<ul>
<li><a href="#">3.1 jQuery</a>
<ul>
<li><a href="#">3.1.1 Download</a><ul>
<li><a href="#">3.1.1 Download</a><ul>
<li><a href="#">3.1.1 Download</a></li>
<li><a href="#">3.1.2 Tutorial</a></li>
</ul>
</li>
<li><a href="#">3.1.2 Tutorial</a></li>
</ul>
</li>
<li><a href="#">3.1.2 Tutorial</a></li>
</ul>
</li>
<li><a href="#">3.2 Mootools</a></li>
<li><a href="#">3.3 Prototype</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
function mainmenu()
{
$(" .menucontrol ul ").css({ display: "none" }); // Opera Fix
$(" .menucontrol li").hover(function()
{
$(this).find('ul:first').css({ visibility: "visible", display: "none" }).show(400);
}, function()
{
$(this).find('ul:first').css({ visibility: "hidden" });
});
}
$(document).ready(function()
{
mainmenu();
});
加载中,请稍侯......
精彩评论