我的客户要求将他们的网站菜单设为http://www.teslamotors.com/。到目前为止，我所做的是以下
HTML
<div id="header">
<div id="main-menu-back" class="short"><!-- Begin: main-menu-back -->
<div id="main-menu-wrapper">
<ul id="main-menu">
<li id="about"><a href="about.php">About Us</a></li>
<li id="service"><a href="service.php">Services</a></li>
<li id="contact"><a href="contact.php">Contact</a></li>
</ul>
<div id="logo"><!-- Begin: logo -->
<h1><a href="index.php"><img src="images/interface/logo_9.jpg" width="90" height="80" alt="img" /></a></h1>
</div>
<!-- End: logo -->
</div>
</div><!-- End: main-menu-back -->
<div id="menu_slider" style="top: -55px;">
<div id="menu_slider_wrapper">
<div id="menu01" class="submenu" style="left: 100px;">
<ul>
<li><a href="#">Office and Home Security Systems</a></li>
<li><a href="#">Office and Home Interiors and Electrical Wiring</a></li>
<li><a href="#">Biogas Power Plantations/ Solar Power Plantations</a></li>
<li><a href="#">Vehicle Tracking Devices/ Vehicle Security System</a></li>
<li><a href="#">Fire Alarm and Fire Hydrant Systems/Related Equipment Supply and Installations</a></li>
<li><a href="#">Ventilation Systems/Related Equipment Supply and Installations</a> </li>
</ul>
</div>
<div id="menu02" class="submenu" style="left: 300px;">
<ul>
<li><a href="contact.php?type=location">Our Location</a></li>
<li><a href="contact.php?type=contact">Contact Us</a></li>
</ul>
</div>
</div>
</div>
<div id="header_bottom">
</div>
</div>
CSS
#header
{
height: 90px;
position: relative;
width: 100%;
z-index: 102;
}
#main-menu-back.short {
background: url(../images/interface/header-top-back-short.JPG) repeat-x;
height: 59px;
}
#main-menu-back
{
background: url(../images/interface/header-top-back.JPG) repeat-x scroll center top #DDDDDD;
box-shadow: 0 1px 8px 1px #6D6B6B;
font-size: 14px;
font-style: normal;
font-weight: 700;
height: 90px;
min-width: 960px;
position: absolute;
text-transform: uppercase;
width: 100%;
z-index: 3;
}
#main-menu-back.short #main-menu-wrapper {
height: 62px;
height: 62px;
margin: 0 auto;
position: relative;
width: 960px;
}
#logo{
display: inline;
width: 78px;
position: absolute;
left: 825px;
z-index: 4 !important;
}
#logo h1 a img{
-webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
}
#header_bottom
{
background: url(../images/interface/header-bottom-back.png) repeat-x;
width: 100%;
height: 30px;
text-align: left;
-webkit-box-shadow: 0px 6px 3px 0px rgba(0,0,0,0.60);
-moz-box-shadow: 0px 6px 3px 0px rgba(0,0,0,0.60);
box-shadow: 0px 6px 3px 0px rgba(0,0,0,0.60);
position: absolute;
top: 59px;
}
ul#main-menu
{
margin:0;
position: absolute;
top: 30px;
}
ul#main-menu li
{ padding: 0 0 0 0px;
list-style: none;
margin: 2px 70px 0 0;
display: inline;
background: transparent;
}
ul#main-menu li a
{
color: #707070;
font-size: 15px;
font-weight: bold;
text-shadow: 0 1px 0 #FFFFFF;
}
ul#main-menu li:hover a
{
color: #B80007;
}
#menu_slider
{
background: url(../images/interface/submenu-back.JPG) repeat-x;
position: absolute;
width: 100%;
height: 111px;
box-shadow: 0 1px 8px 1px #6D6B6B;
overflow: hidden;
z-index: 2 !IMPORTANT;
}
#menu_slider_wrapper {
margin: 0 auto;
position: relative;
width: 960px;
}
#menu_slider div.submenu
{
position: absolute;
top: 20px;
vertical-align: top;
text-align: left;
}
#menu_slider div.submenu ul {
display: inline;
float: left;
min-width: 140px;
padding-right: 10px;
}
#menu_slider div.submenu li {
list-style-type: none;
}
#menu_slider div.submenu li a {
color: #666666;
font-size: 12px;
font-style: normal;
font-weight: 600;
text-decoration: none;
text-transform: uppercase;
}
JS
$("ul#main-menu li").mouseenter(function () {
var hoverCntrlId = $(this).attr("id");
console.log(hoverCntrlId);
if (hoverCntrlId == "contact") {
$("div#menu01").hide();
$("div#menu02").show();
} else if (hoverCntrlId == "service") {
$("div#menu01").show();
$("div#menu02").hide();
}
$('#menu_slider').animate({
top: '61px'
}, 1000, function () {
$('#menu_slider').slideDown(1000);
});
});
$('ul#main-menu li, #menu_slider').mouseleave(function () {
var hoverCntrlId = $(this).attr("id");
var msPosition = $("#menu_slider").attr("top");
if (msPosition == "61px") {
$('#menu_slider').stop().animate({
top: '-55px'
});
}
if (hoverCntrlId == "menu_slider") {
$('#menu_slider').stop();
$('#menu_slider').animate({
top: '-55px'
}, 1000, function () {
$('#menu_slider').slideUp(1000);
});
}
});
我能够在包含子菜单的div上下滑动，但是当鼠标离开menu_slider并进入#main-menu li时出现动画问题，然后动画发生两次。 我无法解决问题。任何人都可以提供帮助。
答案 0 :(得分：1)
看起来你正在使用top属性的动画和jQ slideDown函数，你应该只使用其中一个。两者都具有菜单中动画的效果（slideDown函数动画菜单的高度，top属性的动画正在影响菜单的位置）。
特斯拉只使用顶级属性，我建议你也这样做。只需使用slideDown / slideUp动画删除回调即可。
例如：
$('#menu_slider').animate({
top: '61px'
}, 1000, function () {
$('#menu_slider').slideDown(1000);
});
应该简单地成为：
$('#menu_slider').animate({
top: '61px'
}, 1000);
我还建议您将幻灯片菜单的当前状态存储在布尔值中，并在设置动画时对其进行测试。像这样的东西：
var showing = false;
function showslideout(){
if(!showing){
showing = true;
//code to show the menu here
}
}
function hideslideout(){
if(showing){
showing = false;
//code to hide the menu here
}
}
注意在动画之前如何更改布尔值。这意味着如果showslideout在第一次完成之前被调用一次，那么动画只会出现一次。
作为旁注，请注意使用明确的高度。例如，如果您想要更改主导航栏的高度，这将使站点难以维护。特斯拉动态地获取主导航栏的高度jQ。它们存储两个可以分配给slideNav的top属性的值，以隐藏或显示它：
var hideY =- $slideNav.height() + $("#main-nav-back").height()-5;
var showY = $("#main-nav-back").height();
希望这有帮助！