jQuery下拉菜单悬停向下/向上滑动 [英] jQuery Dropdown Menu hover Slide Down/Up
本文介绍了jQuery下拉菜单悬停向下/向上滑动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当菜单项悬停时，我有一个下拉菜单正在尝试制作动画.
I have a dropdown menu that I am trying to animate when the menu item is hovered.
$(document).ready(function () {
//Show then hide ddown menu on hover
$('.menuitem').hover(function () {
$(this).children('.navmain').stop(true).slideDown(500);
}, function () {
$(this).children('.navmain').stop(true).slideUp(500);
});
});
推荐答案
在这里您可以找到解决方案 https://jsfiddle.net/8sukcnqe/6/
Here you go with a solution https://jsfiddle.net/8sukcnqe/6/
$(document).ready(function () {
//Show then hide ddown menu on hover
$('.menuitem').hover(function () {
$(this).children('.navmain').slideDown(500);
}, function () {
$(this).children('.navmain').slideUp(500);
});
});
* {
/* Used so padding and margins fit in elements defined size */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0; margin: 0;
}
.wrapper {
margin: 0 auto;
width: 100%;
background-color: #010101;
}
/* Navigation Bar Styling */
.top {
background-color: #010101;
width: 100%;
/* Used so the menu drop down can be placed absolutely */
position: relative;
border: 1px solid #B2BEB5;
text-align:center;
height: 43px;
}
.top li {
list-style: none;
display:inline-block;
text-align: center;
}
/* Style links in nav bar */
.top > li > a {
color: #fff;
font-weight: 700;
text-decoration: none;
line-height: 43px;
height:43px;
padding: 0 15px; 0 15px;
text-transform: uppercase;
font-family: 'Noto Serif', serif;
letter-spacing:1.5px;
font-size:15px;
}
.top > li:hover {
text-decoration:underline;
}
/* On hover show the menu drop down */
/* Position the menu drop down relative to the nav bar */
.top > li > div {
position: absolute;
left: 0;
top: 41px;
/* Don't show unless the nav bar li is hovered */
display: none;
background: #fff;
padding: 10px 10px;
box-shadow: 2px 4px 4px rgba(0,0,0,0.4);
/* Hide anything that might be outside the div */
overflow: hidden;
}
/* End of Navigation Bar Styling */
/* Drop Down Menu Styling */
.navmain {
width: 100%;
border: 1px solid #B2BEB5;
}
.nav-divider {
display: inline-block;
width: 1.8%;
}
.nav-focus-art {
display: inline-block;
width: 20%;
vertical-align: top;
text-align: left;
animation-duration: 4s;
}
.nav-art-author, .nav-art-title {
display: inline-block;
padding: 5px 0px;
}
.nav-art-title {
font-size: 1.4em;
}
.nav-art-image {
display: inline-block;
}
.nav-divider-2 {
display: inline-block;
width: 3.8%;
}
.nav-headlines {
display: inline-block;
width: 40%;
font-size: 1.2em;
font-weight: bold;
text-align: left;
padding-right: 3px;
}
.nav-headline-link {
border-bottom: 1px solid #B2BEB5;
padding: 0 0 5px 0;
}
.nav-headline-text {
padding: 10px 0px;
font-family: 'Arapey', serif;
color:#000000;
font-size:17px;
font-weight:400;
}
.nav-art-author {
font-size: 15px;
text-decoration:none;
}
a.nav-text-link:link,a.nav-text-link:visited,a.nav-text-link:hover,a.nav-text-link:active{
text-decoration:none;
color:#603c68;
font-weight:400;
}
a.nav-text-link:hover{
text-decoration: none;
font-weight:700;
}
.nav-headline-link:last-child {
border-width: 0px;
}
.nav-links {
display: inline-block;
width: 20%;
vertical-align: top;
text-align: left;
}
.nav-link { padding-bottom: 20px;}
.nav-empty-cell { padding-top: 40px;}
.nav-headline-link:first-child {
color: #bfa76a;
font-size:40px;
font-family: 'Playfair Display', serif;
font-weight:700;
}
.nav-link:first-child {
}
/* End of Drop Down Menu Styling */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<ul class="top" id="ddm">
<li><a href="#">home</a></li>
<li class="menuitem"><a href="#">bras</a>
<div class="navmain">
<div class="nav-divider"></div>
<div class="nav-headlines">
<div class="nav-headline-link">BRAS</div>
<div class="nav-headline-text">Giē Giē specializes in finding comfortable, well fitting, beautiful bras for all women. Come and experience a professional bra fitting with one of our certified fitters. We have a fabulous selection of amazing bras, sizes ranging from 28 inch to 56 inch bands and AA to J cups!!</div>
</div>
<div class="nav-divider-2"></div>
<div class="nav-focus-art">
<span class="nav-art-author"><a href="#" class="nav-text-link">Everyday (or T-shirt) Bra</a></span><br>
<span class="nav-art-author"><a href="#" class="nav-text-link">Strapless Bra</a></span><br>
<span class="nav-art-author"><a href="#" class="nav-text-link">Sports Bra</a></span><br>
<span class="nav-art-author"><a href="#" class="nav-text-link">Nursing Bra</a></span><br>
<span class="nav-art-author"><a href="#" class="nav-text-link">Minimizer Bra</a></span><br>
<span class="nav-art-author"><a href="#" class="nav-text-link">Everyday (or T-shirt) Bra</a></span><br>
<span class="nav-art-author"><a href="#" class="nav-text-link">Push-up Bra</a></span><br>
</div>
<div class="nav-divider-2"></div>
<div class="nav-focus-art">
<span class="nav-art-author"><a href="#" class="nav-text-link">Post-surgical Bra</a></span><br>
<span class="nav-art-author"><a href="#" class="nav-text-link">Mastectomy Bra</a></span><br>
<span class="nav-art-author"><a href="#" class="nav-text-link">Sports Bra</a></span><br>
<span class="nav-art-author"><a href="#" class="nav-text-link">Backless Bra</a></span><br>
<span class="nav-art-author"><a href="#" class="nav-text-link">Bathing Suits (or swimwear?)</a></span><br>
<span class="nav-art-author"><a href="#" class="nav-text-link">Boustiers</a></span><br>
<span class="nav-art-author"><a href="#" class="nav-text-link">Bralettes</a></span><br>
</div>
<div class="nav-divider-2"></div>
</div> <!-- End of nav-main -->
</li>
<li><a href="#">MASTECTOMY</a></li>
</ul>
已删除CSS代码
/* On hover show the menu drop down */
.top > li:hover > div {
display: block;
}
无论如何，您正在使用slideDown& slideUp至display& hide，所以需要CSS property.
Anyway, you are using slideDown & slideUp to display & hide, so need of CSS property.
希望这会对您有所帮助.
Hope this will help you.
这篇关于jQuery下拉菜单悬停向下/向上滑动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
