Меню наведения, действующее в стиле

Question

У меня есть простое меню наведения. Рабочий пример here

Когда пользователь прокручивает слева направо немного до быстрого или попадает на прокладку, а не на серая часть, меню перемещается вниз, а затем снова и снова.

Я хочу, чтобы это было сделано для пользователя. Так что, когда они постоянно навешиваются на меню, это работает.

Вы можете видеть, что я имею в виду в моем примере, если вы играете вокруг мышки.

Есть ли способ сделать эту работу безупречной и ожидаемой?

$(document).ready(function($) { 
 
    $("#mmenu").hide(); 
 
    $("#main-menu").hover(function() { 
 
     $("#mmenu").slideToggle(500); 
 
    }); 
 
});

#main-menu{ 
 
\t background:#fff url(http://www.tzelan.com/wordpress/wp-content/uploads/2015/02/menu-black-bg.png) center center no-repeat; 
 
\t background-size: 9px 39px; 
 
\t border: 1px solid #b5b5b5; 
 
\t border-bottom:none; 
 
\t -webkit-border-radius: 5px 0 0 0; 
 
\t border-radius: 5px 0 0 0; 
 
\t position: absolute; 
 
\t left: 50px; 
 
\t text-align: center; 
 
\t top: 50px; 
 
\t vertical-align: middle; 
 
\t width: 25px; 
 
\t z-index:999; 
 
\t cursor:pointer; 
 
\t min-height: 100px; 
 
} 
 

 
#main-menu:after { 
 
\t background: url("http://www.tzelan.com/wordpress/wp-content/uploads/2015/01/menu-bottom-arrow.png") no-repeat scroll center bottom; 
 
\t bottom: -11px; 
 
\t content: ""; 
 
\t display: block; 
 
\t height: 24px; 
 
\t left: -1px; 
 
\t position: absolute; 
 
\t width: 27px; 
 
\t z-index: 999; 
 
} 
 

 
#main-menu #mmenu{ 
 
\t display: none; 
 
\t list-style: outside none none; 
 
\t position: relative; 
 
\t left: 0px; 
 
\t top:-5px; 
 
\t text-align: left; 
 
\t width: 275px; 
 
\t text-transform: uppercase; 
 
\t font-size: 10px; 
 
\t letter-spacing: 2px; 
 
\t font-family:"Apercu Light", Calibri, sans-serif; font-size-adjust:0.508; font-weight:200; font-style:normal; 
 
} 
 

 
#main-menu #mmenu li{ 
 
\t height: 25px; 
 
\t line-height: 25px; 
 
\t padding:7px 0 0; 
 
} 
 

 
#main-menu #mmenu li a{ 
 
\t background-color: #948f8f; 
 
\t color:#fff; 
 
\t text-decoration:none; 
 
\t text-align:left; 
 
\t padding:0 10px; 
 
\t display:block 
 
} 
 

 
#main-menu #mmenu li a:hover{ 
 
\t background-color: #ccc; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="menu"> 
 
\t <nav id="main-menu"> 
 

 
\t \t <ul id="mmenu"> 
 
\t \t \t <li><a href="#">Our Vision</a></li> 
 
\t \t \t <li><a href="#">Friends & Family</a></li> 
 
\t \t \t <li><a href="#">Studio Collection</a></li> 
 
\t \t \t <li><a href="#>Collected Curios</a></li> 
 
\t \t \t <li><a href="#">Live With Us</a></li> 
 
\t \t \t <li><a href="#">The Fifth Quarterly Publication</a></li> 
 
\t \t </ul> 
 
\t </nav> 
 
</div>

Answer 1

Я никогда не мог получить SetTimeout и clearTimeout работать, но я получил 99% близко запорными

код, который я использовал для тех, кто может смотреть это:

$(document).ready(function($) { 
    $("#mmenu").hide(); 
    $("#main-menu").hover(function() { 
     $("#mmenu").stop(true).slideToggle(500); 
    }); 
}); 

Единственное, что случается, если пользователь быстро прокручивает меню, зависание не заканчивается, поэтому они должны держать указатель мыши в меню до завершения зависания.

Если есть способ заставить анимацию полностью загрузить, а затем остановится, то это было бы прекрасно, но я думаю, что это просто придирки

Answer 2

Проблема является slideToggle запускается для каждого события парения. То, что вы, вероятно, хотите сделать, - это разогнать эти события каждые 500 мс. Вам нужно подумать о том, как вы хотите, чтобы он работал. Что происходит, когда кто-то движется через него? Вы хотите, чтобы они немного поместили курсор в меню перед его открытием? Что происходит, когда они удаляют свой курсор? Как долго? setTimeout и clearTimeout будут вашими друзьями.

PS, как сотовые телефоны его используют?