jQuery 悬停下拉菜单全宽大小

Posted 2023-05-08

【中文标题】jQuery 悬停下拉菜单全宽大小

【英文标题】：jQuery Hover Drop-Down-Menu Full Width Size

【发布时间】：2014-04-03 02:20:42

【问题描述】：

我的网站中有一个垂直菜单。现在我在一些链接中需要一个下拉系统。 我在网上看到过这个例子：http://jsfiddle.net/4jxph/3018/ 但我想要一个全宽的子菜单。索尼的下拉系统是我想要的。 索尼下拉系统：Sony 我总是创建一个全宽大小的下拉菜单。 我的代码：http://www.jsfiddle.net/3aK9k/4。 所以我想要什么，当我将 content 悬停时，子菜单并再次指向菜单链接，该链接向下滑动子菜单，而不是子菜单应该在那里没有一些动作。

我希望我已经解释了我想要做什么。我认为这是可能的，但这使我对 JS 和 jQuery 的了解不堪重负。

谁能告诉我怎么做？

【问题讨论】：

你说的没有一些动作是什么意思？

还有一个问题 - 你想要精确的输出作为sony.de 给出的链接吗？

@Zword with "without some move" 我想说内容没有动画。

我想要这个与索尼下拉菜单的精确比例，它不必是相同的代码。 @Zword

所以你不想滑动动画？

【参考方案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);
    
);

FIDDLE

【讨论】：

@Selfproblemmade 我只是在使用第一把小提琴，但明天我可以试试第二把小提琴。也就是说，如果您的问题仍然需要答案。

耶，那太好了:)

这看起来和我想象的一模一样

【参考方案2】：

我在小提琴中制作了 slidedown，其工作原理与 sony.de:

Updated Fiddle(新)

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');
    
);

Fiddle with delay added like sony.de

【讨论】：

这就是我的意思，将内容悬停并悬停在内容中向下滑动的链接。容器又滑下来了，不应该这样

@Selfproblemmade 检查我的答案中的 New fiddle。告诉它是否适合您。如果有效，我将根据新的 fiddle 代码更新我的答案

告诉我On switch links do you want slide down? - 是或否

@Selfproblemmade 好的，我会根据我的理解再尝试一把小提琴。猜猜这将是你想要的小提琴

@Selfproblemmade 检查我的新答案并添加了新的小提琴

【参考方案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);
    
);

【讨论】：

这看起来不错，但是当您将鼠标悬停在子菜单上并悬停从子菜单滑下的链接时，容器应该保持不变

假设您将 .nav_menu_link_drop_1 和 2 更改为 .nav_menu_link_drop，您可以简单地执行 $('.nav_menu_link_drop').next().slideToggle();你不需要写两次相同的代码。

【参考方案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/

【讨论】：

我想要 100% 宽度的子菜单

那里是窗口宽度的 100%。嗯，不，你是对的，我想我忘了保存：在那里看>jsfiddle.net/4jxph/3031

是的，对不起，我以为我给了你最后一个版本：jsfiddle.net/4jxph/3031

但我想要通过显示子菜单来制作 slideDown(350) 和 slideUp(350) 动画！！当您添加此内容时，您将获得赏金

使用 CSS 过渡很容易。我在上面。

【参考方案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 内我注意到了...

编辑：嗯...好吧...也许你应该重新考虑你的方法，只是因为它有效，你不应该使用无效的 html

【讨论】：

看起来不错。但是当我第一次悬停链接时，内容是否应该出现持续时间（350）。当我将内容悬停并再次悬停链接时，应该没有 slideDown 的持续时间甚至没有动画。我添加了动画持续时间，但这仅适用于您第一次悬停链接时：jsfiddle.net/3aK9k/4

http://jsfiddle.net/3aK9k/8/ 你是这个意思吗？但就像我说的，你应该检查你的标记并采取不同的方法！

您的小提琴代码与您在回答中的名称相同，没有区别。请阅读我的问题的要求，以及我对您的回答的评论。