http://www.obzhorka.ucoz.ru/
Сверху есть рабочий вариант выдвижной панели на jquery, в мазиле все работает, а в эксплорере при закрытии панель странно дергается, как это можно исправить вот код:
<head>
<link rel="stylesheet" href="panel.css" type="text/css" media="screen" />
<script src="http://xhtml.co.il/scripts/jquery-latest.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#box").click(function(){
$("#menu").animate({
height: "100px",
height: "toggle"
}, 1500 );
});
});
</script>
<script>
$(document).ready(function() {
$("#box").click(function() {
$(this).animate( { 'top': ($(this).css('top') != "100px" ? "100px" : "0px") }, 1500 );
});
});
</script>
<style>
body {
margin: 0;
padding: 0px 0 0;
position: relative;
}
#menu {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
height: 100px;
background: url([url]http://www.obzhorka.ucoz.ru/slidepanel/images/fonpaneli.gif[/url]) no-repeat;
display: none;
position: absolute;
}
#menu span {
display: none;
position: absolute;
}
#menu a {
display: block;
text-indent: -900%;
position: absolute;
outline: none;
}
#menu a:hover {
background-position: 0 0;
}
#menu a:hover span{
display: block;
}
#menu .kulinar {
width: 174px;
height: 20px;
background: url([url]http://www.obzhorka.ucoz.ru/slidepanel/images/kulinarnye_recepty.gif[/url]) no-repeat;
left: 56px;
top: 40px;
}
#menu .kulinar span {
width: 174px;
height: 20px;
background: url([url]http://www.obzhorka.ucoz.ru/slidepanel/images/kulinarnyerecepty.gif[/url]) no-repeat;
left: 0px;
top: 0px;
}
#menu .masterklass {
width: 131px;
height: 20px;
background: url([url]http://www.obzhorka.ucoz.ru/slidepanel/images/master_klassy.gif[/url]) no-repeat;
left: 338px;
top: 40px;
}
#menu .masterklass span {
width: 131px;
height: 20px;
background: url([url]http://www.obzhorka.ucoz.ru/slidepanel/images/Masterklassy.gif[/url]) no-repeat;
left: 0px;
top: 0px;
}
#menu .pazly {
width: 112px;
height: 20px;
background: url([url]http://www.obzhorka.ucoz.ru/slidepanel/images/pazly.gif[/url]) no-repeat;
left: 588px;
top: 40px;
}
#menu .pazly span {
width: 112px;
height: 20px;
background: url([url]http://www.obzhorka.ucoz.ru/slidepanel/images/pazly1.gif[/url]) no-repeat;
left: 0px;
top: 0px;
cursor: pointer;
}
#menu .forum {
width: 152px;
height: 20px;
background: url([url]http://www.obzhorka.ucoz.ru/slidepanel/images/forum.gif[/url]) no-repeat;
left: 788px;
top: 40px;
}
#menu .forum span {
width: 152px;
height: 20px;
background: url([url]http://www.obzhorka.ucoz.ru/slidepanel/images/forum1.gif[/url]) no-repeat;
left: 0px;
top: 0px;
cursor: pointer;
}
#box {
top: 0;
position: absolute;
background-color: #DAA520;
height: 100px;
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="#" class="kulinar">kulinar<span></span></a></li>
<li><a href="#" class="masterklass">masterklass<span></span></a></li>
<li><a href="#" class="pazly">pazly<span></span></a></li>
<li><a href="#" class="forum">forum<span></span></a></li>
</ul>
<button id="box">» Run</button>
</body>