jQuery懸停下拉菜單全寬大小

Question

我的網站上有一個垂直菜單。 現在，我需要某些鏈接中的下拉列表系統。
我在互聯網上看到了以下示例： http : //jsfiddle.net/4jxph/3018/但我想要一個全角子菜單。 索尼的下拉系統是我想要的。 索尼的下拉菜單系統： 索尼我一直為全尺寸的下拉菜單提供菜單。
我的代碼： http : //www.jsfiddle.net/3aK9k/4 。
所以我想要什么，當我將content懸停在子菜單上時，再回到菜單鏈接，該菜單鏈接會使子菜單比該子菜單向下滑動，應該沒有任何移動。

我希望我已經解釋了我想做什么。 我認為這是可能的，但是這使我對JS和jQuery的知識不知所措。

誰能告訴我該怎么做？

Answer 1

HTML

    <ul id="nav_menu">
    <li><a class="nav_menu_link nav">Home</a></li>
    <li class="nav_menu_link_drop nav">
        <a class="nav_menu_link">DropDown 1</a>
    </li>
        <div id="content1" class="content" style="display: none;">
            <ul style="padding: 20px; height: auto;">
                <li><a href="#">Item1</a></li><br />
                      <li><a href="#">Item2</a></li><br />
                      <li><a href="#">Item3</a></li><br />
                      <li><a href="#">Item4</a></li>
            </ul>
    </div>
    <li class="nav_menu_link_drop nav">
        <a class="nav_menu_link">DropDown 2 <i class="arrow down"></i></a></li>
    <div id="content2" class="content" style="display: none;">
        <ul style="padding: 20px; height: auto;">
            <li><a href="#">Other</a></li><br />
                      <li><a href="#">Other Test</a></li>
        </ul>
    </div>
</ul>

jQuery

var stop = true;
var hovered;
var timeout;

$('.nav').hover(
    function(){
        clearTimeout(timeout);
        stop = true;
        hovered = this;
        timeout = setTimeout(function(){
        if($(hovered).hasClass('nav_menu_link_drop')){
            $('.content').css('z-index',0);
            $(hovered).next('.content').css('z-index',5);        
            $(hovered).next('.content').slideDown(350);
            timeout = setTimeout(function(){
                $('.content').not($(hovered).next('.content')).slideUp(350);  
            },200);
        }
        else
            $('.content').slideUp(350);    
        },400);
    },
    function(e){
        stop = false;
        clearTimeout(timeout);
        setTimeout(function(){
            if(!stop)
                $('.content').slideUp(350);
        },500);
    }
);

$('.content').hover(
    function(){
        stop = true;    
    },
    function(){    
    }
);

$('#nav_menu').hover(
    function(){
    },
    function(){
        timeout = setTimeout(function(){
            $('.content').slideUp(350);
        },200);
    }
);

小提琴

Answer 2

我在小提琴中制作了幻燈片 ，其工作方式與sony.de完全相同：

更新的小提琴 （新）

的HTML

<div id="menu">
<ul>
    <div id="mainMenu">
    <li class="menu1">Home</li>
    <li class="menu2">DropDown1</li>
    <li class="menu3">DropDown2</li>
    </div>
</ul>
    <div class="submenu menu2">
        <!--menu items-->
    </div>
    <div class="submenu menu3">
        <!--menu items-->
    </div>
</div>

的CSS

html,body{
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
}
#menu{
    position:relative;
    width:100%;
    height:80px;
    font-family:sans-serif;
}
#menu,#menu ul,#menu>ul>#mainMenu>li,#menu div{
    display:inline-block;
    margin-top:0px;
}
#menu >ul {
    position:absolute;
    top:0px;
    z-index:100;
    list-style:none;
    padding:0px;
    font-size:18px;
    height: 80px;
    width: 100%;
    background: none repeat scroll 0% 0% #FFA500;
}
#menu ul>#mainMenu>li{
    padding: 29px;
}
#menu ul>#mainMenu>li:hover{
    background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.4);
    color: #FFF;
    transition: all 0.2s ease 0s;
}
#menu .submenu{
    position:absolute;
    bottom:0px;
    width:100%;
    background-color:white;
    border:1px solid black;
}

jQuery的

var preClass="";
$('#menu>ul>#mainMenu>li').hover(function(){
    var curClass = $(this).attr('class');
    if(preClass!=curClass){
        $('.submenu[class*='+preClass+']').stop()
    .animate({'bottom':'0px'});
        $('.submenu[class*='+curClass+']').stop()
    .animate({'bottom':''+(-$('div[class*='+curClass+']').height())+'px'});}
    preClass=curClass;
});

$('#mainMenu').mouseleave(function(){
    preClass="";
    setTimeout(function(){
    if(preClass=="")
    $('.submenu').stop().animate({'bottom':'0px'});
    },350);
});

$('#menu').mouseleave(function(){
    preClass=""
    $('.submenu').stop().animate({'bottom':'0px'});
});

$('.submenu').hover(function(){
    preClass = $(this).attr('class').replace("submenu ","");
    $(this).css({'bottom':''+(-$(this).height())+'px'});
},
function(){
    if(preClass!=curClass){
    $(this).stop().animate({'bottom':'0px'});
    }
});

像sony.de這樣添加了延遲的小提琴

Answer 3

檢查所需的代碼jSFiddle

從Box下載代碼文件

HTML代碼

<ul id="nav_menu">
    <li><a class="nav_menu_link">Home</a></li>
    <li class="nav_menu_link_drop_1">
        <a class="nav_menu_link">DropDown 1</a>
    </li>
        <div id="content1" style="display: none;">  
            <ul id="file_menu">
                <li><a href="#file">File</a></li>
                <li><a href="#edit">Edit</a></li>
                <li><a href="#view">View</a></li>
                <li><a href="#insert">Insert</a></li>
                <li><a href="#modify">Modify</a></li>
                <li><a href="#control">Control</a></li>
                <li><a href="#debug">Debug</a></li>
                <li><a href="#window">Window</a></li>
                <li><a href="#help">Help</a></li>
            </ul>
        </div>
    <li class="nav_menu_link_drop_2">
        <a class="nav_menu_link">DropDown 2 <i class="arrow down"></i></a></li>
    <div id="content2" style="display: none;">
            <ul id="file_menu">
                <li><a href="#file">2 File</a></li>
                <li><a href="#edit">2 Edit</a></li>
                <li><a href="#view">2 View</a></li>
                <li><a href="#insert">2 Insert</a></li>
                <li><a href="#modify">2 Modify</a></li>
                <li><a href="#control">2 Control</a></li>
                <li><a href="#debug">2 Debug</a></li>
                <li><a href="#window">2 Window</a></li>
                <li><a href="#help">2 Help</a></li>
            </ul>
    </div>
</ul>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

CSS代碼

* {   
margin: 0;
padding: 0;
}
#nav_menu {
    position: absolute;
    display: block;
    height: 80px;
    width: 100%;
    background: orange;
}
#nav_menu li {
    list-style-type: none;
    text-decoration: none;
    vertical-align: middle;
    height: 80px;
    display: inline-block;
    position: relative;
}
.nav_menu_link {
    color: black;
    font-size: 18px;
    height: 0;
    font-family: Arial;
    vertical-align: baseline;
    position: relative;
    display: inline-block;
    height: auto;
    padding: 29px;
}
.nav_menu_link:hover {
    background: rgba(0, 0, 0, 0.4);
    color: #FFF;
    transition: all .2s;
}
.nav_menu_link:hover .arrow.down {
    border-top-color: #FFF;
}

#content1:hover {
    display: block !important;
    width: 100%;
    height: auto !important;
    position: absolute;
}
#content2:hover {
    display: block !important;
    width: 100%;
    height: auto !important;
    position: absolute;
}
#content1, #content2 {
    width: 100%;
    height: auto;
    background: gray;
    display: none;
    position: absolute;
}

#file_menu {
    border: 1px solid #1c1c1c;
}

#file_menu li {
    width: 100%;
    height: 30px;
    background-color: #302f2f;
}

#file_menu li a {
    font-family: Arial;
    font-size: 14px;
    color:#FFFFFF; 
    font-weight: bold;
    text-decoration:none; 
    padding:5px 10px; 
    display:block;
}

#file_menu li a:hover {
    color: #F00880;
}

jQuery查詢

var link1 = $(".nav_menu_link_drop_1");
var link2 = $(".nav_menu_link_drop_2");
var content1 = $('#content1');
var content2 = $('#content2');

$(link1).hover(
    function(){ 
        $(content1).slideDown(350);
    },
    function(){
        $(content1).slideUp(350);
    }
);

$(link2).hover(
    function(){ 
        $(content2).slideDown(350);
    },
    function(){
        $(content2).slideUp(350);
    }
);

Answer 4

您可以僅使用CSS來實現。 更干凈，更簡單。

現場演示 ： http : //jsfiddle.net/4jxph/3031/

這是修改后的CSS：

body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background-color: #333333;
}

#container {
    margin: auto;
}

#header {
    background-image: url(images/header.png);
    background-repeat: no-repeat;
    height: 42px;
    width: 490px;
    margin-bottom: 20px;
}

#button {
    height: 32px;
    width: 184px;
    margin: auto;
}
#button:hover .file_menu {
    max-height: 100000px; 
    opacity: 1;
}
ul, li {
    margin:0; 
    padding:0; 
    list-style:none;
}

.menu_class {
    border:1px solid #1c1c1c;
}

.file_menu {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    width:100%;
    border: 1px solid #1c1c1c;
    transition: all .2s;
}

.file_menu li {
    background-color: #302f2f;
}

.file_menu li a {
    color:#FFFFFF; 
    text-decoration:none; 
    padding:10px; 
    display:block;
}

.file_menu li a:hover {
    padding:10px;
    font-weight:bold;
    color: #F00880;
}

因為您想要它，所以這里是JS解決方案（比其他答案更干凈）：

var link = $("li[class^=nav_menu_link_drop]");

$(link).hover(

    function(){ 
        var content = $(this).next('div[id^="content"]');
        $(content).stop(true).slideDown(350);
    },
    function(){
         var content = $(this).next('div[id^="content"]');
         $(content).delay(350).slideUp(350);


    }
);

那做得好嗎？ http://jsfiddle.net/3aK9k/27/

Answer 5

如果我有你的權利，你不想要的動畫，對於簡單的動畫時間設置為0。你不需要.stop()你應該考慮使用.hover()代替mouseenter和mouseleave 。 這是鏈接： http : //api.jquery.com/hover/

例：

$(link1).hover(
    function(){ 
        $(content1).slideDown(0);
    },
    function(){
        $(content1).slideUp(0);
    }
);

這是您帶有更新代碼的小提琴： http : //jsfiddle.net/3aK9k/2/

編輯：我只是注意到，但您有無效的html您的div -tag位於ul -tag內，並將其放入您的li ...認真檢查您的標記...那不是我注意到的唯一錯誤...

編輯：嗯...好吧...也許您應該重新考慮自己的approuch，僅因為它起作用了就不應該使用無效的html