Меню аккордеон при событии hover | jQuery
Всем доброго дня!
Нужен скрипт, который будет открывать подпункты меню "Submenu" при наведении на их родителя с небольшой задержкой и скрывать если отвести курсор. Заранее спасибо! <nav> <ul id="nav"> <li><a href="#">Blog</a> <ul class="submenu"> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> </ul> </li> <li class="current-menu-item"><a href="#">Page</a></li> <li><a href="#">Dropdown</a> <ul class="submenu"> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> </ul> </li> <li><a href="#">Contact</a></li> </ul> </nav> |
|
$(document).ready(function () {
var time = 300;
$("#nav").mouseenter(function(){
var $elem = $(".submenu", this);
if ($elem.css('display') === 'none') {
$elem.stop(true).delay(time).fadeIn(600);
} else {
$elem.stop().animate({opacity:1}, 600);
}
time = 100;
}).mouseleave(function(){
$(".submenu", this).stop(true).delay(300).fadeOut(600);
});
});
Только здесь при загрузке страницы открыты все имеющиеся подменю, а при повторном наведении так же открываются все. Как исправить? |
открывашка 218 для menu hover
Nikolay.K,
открывашка 218
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.submenu {
display: none;
} </style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
var a = $("nav"),
b = 700;
$(".submenu", a).each(function(a, c) {
$(c).parent().on({
mouseenter: function() {
$(c).stop(!0).delay(b).fadeIn(600);
b = 100
},
mouseleave: function() {
$(c).stop(!0).delay(300).fadeOut(600)
}
})
}).hide().eq(0).show();
a.on({
mouseleave: function() {
b = 700
}
})
});
</script>
</head>
<body> <nav>
<ul id="nav">
<li><a href="#">Blog</a>
<ul class="submenu">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
</ul>
</li>
<li class="current-menu-item"><a href="#">Page</a></li>
<li><a href="#">Dropdown</a>
<ul class="submenu">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>
|
Спасибо за помощь! Как при загрузке страницы скрыть подпункты, или оставить открытыми лишь у одного родителя?
|
Цитата:
Цитата:
вариант без css
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
var a = $("nav"),
b = 700,
s = $(".submenu", a);
s.each(function(a, c) {
$(c).parent().on({
mouseenter: function() {
$(c).stop(!0).delay(b).fadeIn(600);
s.not(c).stop(!0).delay(300).fadeOut(600)
b = 100
},
mouseleave: function() {
$(c).stop(!0).delay(300).fadeOut(600)
}
})
}).hide().eq(0).show();
a.on({
mouseleave: function() {
b = 700
}
})
});
</script>
</head>
<body> <nav>
<ul id="nav">
<li><a href="#">Blog</a>
<ul class="submenu">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
</ul>
</li>
<li class="current-menu-item"><a href="#">Page</a></li>
<li><a href="#">Dropdown</a>
<ul class="submenu">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>
|
Про "display: none;" и забыл как то) но ваш вариант то что надо. Спасибо за помощь!
|
| Часовой пояс GMT +3, время: 06:40. |