JQuery slideUp horizontal menu instead of slideDown
I have this menu :
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script>
$(function() {
$("#menu").find("li").each(function() {
if ($(this).find("ul").length > 0) {
$(this).mouseenter(function() {
$(this).find("ul").stop(true, true).slideDown();
});
$(this).mouseleave(function() {
$(this).find("ul").stop(true, true).slideUp();
});
}
});
});
</script>
<style>
#menu {
display:block;
margin:120px auto 20px;
border:1px solid #222;
position:relative;
background-color:#6a6a6a;
font:16px Tahoma, Sans-serif;
}
#menu ul {
padding:0;
margin:0;
}
#menu li {
position:relative;
float:left;
list-style-type:none;
}
#menu ul:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
#menu li a {
display:block;
padding:10px 20px;
border-left:1px solid #999;
border-right:1px solid #222;
color:#eee;
text-decoration:none;
}
#menu li a:focus {
outline:none;
text-decoration:underline;
}
#menu li:first-child a {
border-left:none;
}
#menu li.last a {
border-right:none;
}
#menu a span {
display:block;
float:right;
margin-left:5px;
}
#menu ul ul {
display:none;
width:100%;
position:absolute;
left:0;
background:#6a6a6a;
}
#menu ul ul li {
float:none;
}
#menu ul ul a {
padding:5px 10px;
border-left:none;
border-right:none;
font-size:14px;
}
a:hover {
cursor: pointer;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>
<a>Item1</a>
开发者_如何转开发 </li>
<li>
<a>Item2</a>
<ul>
<li><a href="#">item2-1</a></li>
<li><a href="#">item2-2</a></li>
<li><a href="#">item2-3</a></li>
</ul>
</li>
<li>
<a>Item3</a>
<ul>
<li><a href="#">item3-1</a></li>
<li><a href="#">item3-2</a></li>
<li><a href="#">item3-3</a></li>
</ul>
</li>
<li>
<a>Item4</a>
</li>
</ul>
</div>
<body>
<html>
It slides down when the cursor is over a li that contains a ul.
I want the submenu to slide up above the horizontal menu instead of sliding down under.
How can I achieve this ?
Thank you!
Here's the jsFiddle
#menu ul ul {
bottom:38px;
}
setting the bottom of the nested lists does the trick
I'm not entirely sure what the issue is, but you should be able to reduce your code down to this using a more complex selector:
$("#menu > ul > li:has(ul)").mouseenter(function() {
$(this).find("ul").stop(true, true).slideDown();
}).mouseleave(function() {
$(this).find("ul").stop(true, true).slideUp();
});
EDIT: I see, you want the physical direction of the menu to go up instead of down. To do this, your menus will need to be absolutely positioned at the bottom. Then a height change will make them go up.
Example: http://jsfiddle.net/BKLjs/
#menu ul ul {
display:none;
width:100%;
position:absolute;
left:0;
bottom: 40px;
background:#6a6a6a;
}
Here's a little further code reduction: http://jsfiddle.net/BKLjs/2/
$("#menu > ul > li:has(ul)").hover(function(e) {
$(this).find("ul").stop(true, true)['slide' + (e.type === 'mouseenter' ? 'Down' : 'Up')]();
});
http://jsfiddle.net/SebastianPataneMasuelli/LDQfW/10/
note: uses jquery UI:
.show("slide", { direction: "down" });
.hide("slide", { direction: "up" });
加载中,请稍侯......
精彩评论