javascript jQuery 悬停下拉菜单全宽大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22122987/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Hover Drop-Down-Menu Full Width Size
提问by enguerranws
I have a vertical menu in my Website. Now i need a dropdown system in some links.
I've see this example on the internet: http://jsfiddle.net/4jxph/3018/But i want a full width submenu. The Dropdown System of Sony is what I want.
Dropdown system by Sony: SonyI've always craetet a full width size dropdown menu.
My Code: http://www.jsfiddle.net/3aK9k/4.
So what i want, when i hover the contentso the submenu and again to the menu link which slidedown the submenu than the submenu should be there without some moves.
我的网站中有一个垂直菜单。现在我需要在某些链接中使用下拉系统。
我在互联网上看到过这个例子：http: //jsfiddle.net/4jxph/3018/但我想要一个全宽子菜单。索尼的下拉系统就是我想要的。索尼的下拉系统：索尼我一直在创建一个全宽大小的下拉菜单。
我的代码：http: //www.jsfiddle.net/3aK9k/4。
所以我想要什么，当我content将子菜单悬停在子菜单上，然后再次滑下子菜单的菜单链接，而不是子菜单应该在那里没有一些移动。
I hope I've explain what i want to do. I think it is possible but that overwhelmed my knowledge of JS and jQuery.
我希望我已经解释了我想要做什么。我认为这是可能的，但这使我对 JS 和 jQuery 的了解不堪重负。
Can anyone tell me how to that?
谁能告诉我怎么做？
回答by Trevor
HTML
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
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);
}
);
回答by Zword
I have made slidedownin the fiddle which works exactly like sony.de:
我在小提琴中制作了幻灯片，它的工作原理完全像sony.de：
Updated Fiddle(New)
更新的小提琴（新）
HTML
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
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
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
拨弄延迟，如 sony.de
回答by Jay Patel
Check your needed code jSFiddle
检查您需要的代码jSFiddle
Download code file from Box
从Box下载代码文件
HTML Code
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 Code
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);
}
);
回答by enguerranws
You can achieve that with only CSS. Cleaner, simpler.
你可以只用 CSS来实现。更干净，更简单。
Live demo here: http://jsfiddle.net/4jxph/3031/
现场演示：http: //jsfiddle.net/4jxph/3031/
Here's the modified CSS :
这是修改后的 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;
}
Because you want it, here's the JS solution (cleaner than other answer):
因为你想要它，这里是 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);
}
);
Is that doing the job ? http://jsfiddle.net/3aK9k/27/
这是在做这项工作吗？http://jsfiddle.net/3aK9k/27/
回答by Ekusu
If I got you right you don't want the animation, for that simply set the animation time to 0. You dont need .stop()and you should consider using .hover()instead of mouseenterand mouseleave. Here is a link: http://api.jquery.com/hover/
如果我猜对了，您不需要动画，因为只需将动画时间设置为 0。您不需要.stop()，应该考虑使用and.hover()代替。这是一个链接：http: //api.jquery.com/hover/mouseentermouseleave
Example:
例子：
$(link1).hover(
function(){
$(content1).slideDown(0);
},
function(){
$(content1).slideUp(0);
}
);
Here is your fiddle with updated code: http://jsfiddle.net/3aK9k/2/
这是您使用更新代码的小提琴：http: //jsfiddle.net/3aK9k/2/
EDIT: I just noticed but you have invalid html your div-tag is inside the ul-tag put it in your li... seriosly CHECK your markup... thats not the only wrong thing i noticed...
编辑：我刚刚注意到，但您的 html 无效，您的div-tag 位于 -tag 内，ul将其放入您的li...认真检查您的标记...这不是我注意到的唯一错误...
EDIT: Uhm... OK... maybe you should rethink your approuch, only because it works you shouldn't use invalid html
编辑：嗯......好吧......也许你应该重新考虑你的方法，只是因为它有效你不应该使用无效的html
