Меню аккордеон при событии 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, время: 15:32. |