下拉菜单，如 http://www.teslamotors.com/

Question

我的客户要求将他们的网站菜单设为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，然后动画出现两次。 我无法解决问题。谁能帮忙。

Answer 1

看起来您同时使用了 top 属性的动画和 jQ slideDown 函数，您应该只使用其中一个。两者都具有在菜单中设置动画的效果（slideDown 函数为菜单的height 设置动画，top 属性的动画正在影响菜单的position）。

Tesla 仅使用 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
    }
}

注意布尔值在动画之前是如何变化的。这意味着如果在第一次完成之前再次调用 showlideout，则动画只会出现一次。

附带说明，使用明确的高度时要小心。例如，如果您想更改主导航栏的高度，这将使网站难以维护。 Tesla 会动态获取主导航栏的高度。它们存储了两个值，可以分配给 slideNav 的 top 属性以隐藏或显示它：

var hideY =- $slideNav.height() + $("#main-nav-back").height()-5;
var showY = $("#main-nav-back").height();

希望这会有所帮助！