JQuery slideUp horizontal menu Internet Explorer problem
Hey guys I've used the code posted from another question here at stackoverflow (JQuery slideUp horizontal menu instead of slideDown) and tried to make it so the sliding submenu width will be 100% like the main menu. Thing is it works in Firefox, Safari, Chrome, Opera but not in IE...
I know it has something to do with CSS but I'm stuck and don't know how to fix it.
Here's the code:
<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>
html, body {padding:0;margin:0;}
#menu {
display:block;
margin:120px auto 20px;
position:relative;
background-color:#6a6a6a;
font:16px Tahoma, Sans-serif;
width:100%;
}
#menu ul {
padding:0;
margin:0;
width:100%;
}
#menu li {
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;
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;
background:#6a6a6a;
bottom:38px;
left:0;
}
#menu ul ul li {
float:left;
}
#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>
&l开发者_运维知识库t;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>
Don't forget to add a Doctype to your markup because without it IE orks on quirks mode and oh yeah, that sucks. And alos, don't forget to close your tags, great browsers won't care if you don't close, or at least will try to fix it, but IE will get crazy.
So the first thing you should do is:
<!doctype html>
<html>
<head>
<!-- bla bla bla -->
</head>
<body>
<div id="menu">
<ul>
<!-- bla bla bla -->
</ul>
</div>
</body>
</html>
Note the doctype and the body and html closing tags.
Now, where the magic will happen is with javascript:
$(function() {
$("#menu").find("li").each(function() {
var $el = $(this);
if ($el.find("ul").length > 0) {
$el.mouseenter(function() {
$el.find("ul").stop().css("width", $(window).width()).slideDown();
});
$el.mouseleave(function() {
$el.find("ul").stop().slideUp();
});
}
});
});
Be aware that this code will update de width of the ul with the exact width of the windows, because of that, I got rid of the width: 100%; statement in #menu ul ul.
Hope that works. Link: http://jsbin.com/oliya3.
加载中,请稍侯......
精彩评论