Задержка свертывания выпадающего меню
Очень нужно! Подскажите, пожалуйста, как реализовать следующие. Есть многоуровневое меню, при наведение на пункт - открывается меню нижнего уровня. Если курсив уходит с открывшегося меню оно прячется через 1-2 сек. Если за эти пару секунд пользователь вернул курсив на меню, оно остается открытым. Вроде, все получается, кроме того что б оно оставалась открытым при возврате, в любом случае при уходе оно через определенное время закрывается.=((( Вот так бы хотелось что б это выглядело - http://super-skoda.com.ua/. Я совсем новичок в Jquery, буду очень признателен за помощь!
|
Нужно хранить идентификатор таймера ( var timerId = setTimeout(...) ), а при возвращении мышки очищать таймер через clearTimeout(timerId).
|
Спасибо! Но я все равно не могу разобраться((( Буквально пару дней имею дело с JS. Посмотрите, пожалуйста, код - что неправильно? Меню вообще перестали закрываться....
$(document).ready(function(){ $('.top_menu > ul li').hover(function() { var linkChild=$(this).children('ul'); linkChild.css('display','block'); }, function() { var linkChild=$(this).children('ul'); var timerId = setTimeout(function() { linkChild.hide(); },800) if(linkChild.mouseenter()){clearTimeout(timerId);} });}) |
$(el).hover(fn1, fn2) - clearTimeout нужно делать в первой функции (она срабатывает по наведению на элемент).
И перменную timerId нужно вывести в область видимости обеих функций, то есть на уровне hover() (строчкой выше, например) |
Блин. Ничего не получается( Капец. Это конечно наглость с моей стороны, но был бы очень признателен за приблизительный код или ссылку где объясняется как сделать такую менюшку...
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <script src="http://code.jquery.com/jquery-latest.js"></script> <style> #nav_menu_content * { margin: 0; padding: 0; margin: 0; padding: 0; -moz-user-select: none; -khtml-user-select: none; user-select: none; } #nav_menu_content{ background:#fff url(http://s2.uploads.ru/dNObX.png) repeat-y -76px 0; /*border:red solid 1px;*/ list-style: none; padding-left: 12px; display:inline:block; width:134px; } #nav_menu_content ul { background-color:#3D81F3; list-style-position: outside; text-align:left; position: absolute; margin-left:100px; margin-top:-20px; padding: 0 3px 0 0; list-style: none; display: none; } #nav_menu_content li { border-bottom:#fff solid 1px; list-style: none; margin:4px auto 4px 4px; padding:2px 4px; } #nav_menu_content ul>li { border:red solid 1px; list-style: none; margin:4px auto 4px 4px; padding:2px 4px; } #nav_menu_content > li:hover { background-color:#fff; } </style> </head> <body style="padding-left:13%;padding-top:60px;"> <ul id='nav_menu_content'> <li><a href='#0'>Категория 1</a> <ul> <li><a href="#">Субкатегория 1</a> </li> <li><a href="#">Субкатегория 2</a> </li> <li><a href="#">Субкатегория 3</a> </li> </ul> </li> <li><a href='#0'>Категория 2</a> <ul> <li><a href="#">Субкатегория 4</a> </li> </ul> </li> <li><a href='#0'>Категория 3</a> <ul> <li><a href="#">Субкатегория 5</a> </li> <li><a href="#">Субкатегория 6</a> </li> </ul> </li> <li><a href='#0'>Категория 4</a> <ul> <li><a href="#">Субкатегория 7</a> </li> <li><a href="#">Субкатегория 8</a> </li> <li><a href="#">Субкатегория 9</a> </li> </ul> </li> </ul> <script type="text/javascript"> var timerId0; $('#nav_menu_content >li').mouseenter(function(){ var a=$(this).find("ul:first"); clearTimeout(timerId0) $('#nav_menu_content >li>ul.active').not(a).fadeOut("slow"); a.addClass('active').fadeIn("slow"); }).mouseleave(function(){ var a=$(this).find("ul:first"); if(a.hasClass('active')) timerId0=setTimeout(function(){a.fadeOut("slow");},970) }); </script> </body> </html> |
Deff, а что делает return false?
|
danik.js,
:D Ждало, когда спросишь |
Вот ты и дождалось )
|
Ого! Спасибо огромное, сейчас буду пробовать)))
|
Часовой пояс GMT +3, время: 11:33. |