[英]Jquery slideDown menu when hover
Okay so I've been trying to make a navigation that will have a box sliding down when hovered, and I found this: Keep Jquery slideDown menu open when hovering over that menu? 好的,所以我一直在尝试进行导航,将鼠标悬停时将其向下滑动,然后我发现: 将鼠标悬停在该菜单上时,保持Jquery slideDown菜单处于打开状态?
The third answer almost worked for me, but my problem is, when I hover the main menu, the submenu will also slide down, and when I hover the submenu, nothing will happen. 第三个答案几乎对我有用,但是我的问题是,当我将鼠标悬停在主菜单上时,子菜单也会向下滑动,而当我将鼠标悬停在子菜单上时,什么也不会发生。
I'm not sure if this is would possible, but I'd like to make a navigation that will slide down only the one that I hover on. 我不确定这是否可行,但我想进行一次导航,使其仅向下滑动我所悬停的导航。
This is my code so far. 到目前为止,这是我的代码。 I really suck at this, I don't know Jquery, so if you could help me, please do.
我真的很烂,我不了解Jquery,所以如果可以帮助我,请这样做。 Thank you so much!
非常感谢!
Jquery jQuery的
$(document).ready(function () {
var menu = $('.menu')
menu.hide();
$('#mainbutton').mouseover(
function () {
menu.stop(true, true).slideDown(400);
}
);
$(".menu").mouseleave(
function () {
menu.stop(true, true).slideUp(400)
})
});
CSS 的CSS
#navigation {
border: solid 1px black;
height: 300px;
}
.mainbutton {
margin-top: 10px;
-webkit-order: 2;
margin-right: 0%;
background-color: #f1f1f1;
}
.dropdown {
-webkit-order: 3;
background-color: #fff;
border: 2px dotted #f1f1f1;
width: 195px;
height: auto;
text-align: justify;
background: url('http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=25977922');
}
.menu {
display: -webkit-flex;
-webkit-flex-flow: row nowrap;
-webkit-justify-content: flex-start;
-webkit-align-items: center;
padding-left: 8%;
}
.menu a, a:visited {
font-family: Abstrec, sans-serif;
color: #505050;
text-decoration: none;
font-size: .5em;
margin-bottom: 10px;
margin-top: 10px;
border-bottom: 2px solid #dbdbdb;
padding-bottom: 10px;
}
.menu a:hover {
color: #bfbfbf;
-webkit-transition:.3s;
transition:.3s;
border-bottom: 2px solid #aef4e7;
}
.itemone {
-webkit-order: 1;
height: auto;
padding: 5px;
z-index: 3;
text-align: justify;
}
HTML 的HTML
<div class="navigation">
<div class="nav">
<div id="mainbutton">
<center> <a href="#">about</a> </center>
</div> </div> </div>
<div class="dropdown">
<div class="menu">
<div id="itemone"></div>
this is a sample text
this is a sample text
this is a sample text
this is a sample text
this is a sample text
<br></div></div>
<div class="navigation">
<div class="nav">
<div id="mainbutton">
<center> <a href="#">tagboard</a> </center>
</div> </div> </div>
<div class="dropdown">
<div class="menu">
<div id="itemone"></div>
this is a sample text
this is a sample text
this is a sample text
this is a sample text
this is a sample text
<br></div></div>
PS: jsfiddle wont let me generate. PS:jsfiddle不会让我生成。 i don't know why so sorry if it's a mess up.
我不知道为什么会因此而感到抱歉。
Anyway if you'd like to see it then here: http://sdmkn.blogspot.com/ 无论如何,如果您希望在这里看到它,请访问: http : //sdmkn.blogspot.com/
Thank you so much!! 非常感谢!!
Here's an example FIDDLE 这是一个示例FIDDLE
<nav>
<ul>
<li>Item 1
<ul>
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut tortor vel mi elementum consequat eu quis velit. Vestibulum nec bibendum lacus, sit amet tristique nulla.
</li>
</ul>
</li>
<li>Item 2
<ul>
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut tortor vel mi elementum consequat eu quis velit. Vestibulum nec bibendum lacus, sit amet tristique nulla.
</li>
</ul>
</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</nav>
nav {
width: 250px;
}
ul {
list-style: none;
}
li {
background: #ddd;
width: 100%;
line-height: 25px;
margin: 0 0 5px;
padding: 2px 0;
text-align: center;
cursor: pointer;
}
li ul {
display: none;
}
li ul li {
position: relative;
padding: 0;
text-align: left;
box-sizing: border-box;
}
(function($) {
$('ul li').mouseover(function() {
$('ul',this).stop().slideDown(400, 'linear');
});
$('li, li ul').mouseout(function() {
$('li ul').stop().slideUp(400, 'linear');
});
})(jQuery);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.