Дергается выпадающее меню
Здравствуйте. Есть данное меню, проблема заключается в том, что если вывести курсор за область выпадающего меню и быстро вернуть обратно в эту область (не на элемент li.dropdown), то оно опять появляется, иногда бывает что оно вообще не исчезает и приходится повторно проводить курсором. Объяснение так себе, поэтому для наглядности прикладываю гифку и ссылку на песочницу с самим меню. Будьте добры подскажите в чем может быть проблема. Спасибо
http://www.picshare.ru/view/7106951/ https://jsfiddle.net/6JbtX/1380/ <ul class="menu"> <li class="dropdown"> <a href="#" class="toplevel">menu</a> <ul class="submenu"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="toplevel">menu2</a> <ul class="submenu"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4t</a></li> </ul> </li> </ul> $(function() { var $dropdowns = $('li.dropdown'); $dropdowns .on('mouseover', function() { var $this = $(this); if ($this.prop('hoverTimeout')) { $this.prop('hoverTimeout', clearTimeout($this.prop('hoverTimeout'))); } $this.prop('hoverIntent', setTimeout(function() { $this.addClass('hover'); }, 250)); }) .on('mouseleave', function() { var $this = $(this); if ($this.prop('hoverIntent')) { $this.prop('hoverIntent', clearTimeout($this.prop('hoverIntent'))); } $this.prop('hoverTimeout', setTimeout(function() { $this.removeClass('hover'); }, 50)); }); }); |
simpl1k,
вопрос а нафига скрипт? |
simpl1k,
<!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .menu { width: 400px; list-style-type: none; } .toplevel { display: block; padding: 0 10px; line-height: 2; color: #fff; text-decoration: none; background: #f00; } .dropdown > a.another-color { background: #eeeeee } .dropdown { position: relative; z-index: 200; float: left; width: 200px; } .submenu { position: absolute; top: 0; left: 0; display: none; width: 200px; list-style-type: none; padding-top: 2em; z-index: 200; } .dropdown:hover .submenu { display: block; } .submenu a { display: block; padding: 5px; color: #fff; text-decoration: none; background: navy; } ul{ margin: 0; padding: 0; } </style> </head> <body> <ul class="menu"> <li class="dropdown"> <a href="#" class="toplevel">menu</a> <ul class="submenu"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="toplevel">menu2</a> <ul class="submenu"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4t</a></li> </ul> </li> </ul> </body> </html> |
Цитата:
Цитата:
|
Цитата:
и целиком копировать сообщения смысла нет и засоряет форум |
simpl1k,
вариант с задержкой и сменой фона <!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .menu { width: 400px; list-style-type: none; } .toplevel { display: block; padding: 0 10px; line-height: 2; color: #fff; text-decoration: none; background: #f00; -webkit-transition: all 1.2s ease-in-out .3s; -moz-transition: all 1.2s ease-in-out .3s; -o-transition: all 1.2s ease-in-out .3s; transition: all 1.2s ease-in-out .3s; } .dropdown > a.another-color { background: #eeeeee; } .dropdown { position: relative; z-index: 200; float: left; width: 200px; } .submenu { position: absolute; top: 0; left: 0; height: 0; width: 200px; list-style-type: none; padding-top: 2em; z-index: 200; overflow: hidden; -webkit-transition: all .8s ease-in-out .3s; -moz-transition: all .8s ease-in-out .3s; -o-transition: all .8s ease-in-out .3s; transition: all .8s ease-in-out .3s; } .dropdown:hover .submenu { height: 8em; } .dropdown:hover a.toplevel{ background-color: #FF00FF; -webkit-transition-delay: 0; -moz-transition-delay: 0; -o-transition-delay: 0; transition-delay: 0; } .submenu a { display: block; padding: 5px; color: #fff; text-decoration: none; background: navy; } ul{ margin: 0; padding: 0; } </style> </head> <body> <script> </script> <ul class="menu"> <li class="dropdown"> <a href="#" class="toplevel">menu</a> <ul class="submenu"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="toplevel">menu2</a> <ul class="submenu"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4t</a></li> </ul> </li> </ul> </body> </html> |
Цитата:
|
simpl1k,
попробуйте таймер не в prop а в data |
Часовой пояс GMT +3, время: 13:59. |