Доброго Вам времени суток!
Есть двухуровневое меню следующего вида:
<ul class="select"><li><a href="#">Раздел 1</a>
<div class="select_sub show">
<ul class="sub">
<li><a href="#">подраздел меню 1.1</a></li>
<li><a href="#">подраздел меню 1.2</a></li>
<li><a href="#">подраздел меню 1.3</a></li>
</ul>
</div>
</li>
</ul>
<ul class="select"><li><a href="#">Раздел 2</a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">подраздел меню 2.1</a></li>
<li><a href="#">подраздел меню 2.2</a></li>
</ul>
</div>
</li>
</ul>
Необходимо чтобы при прохождении по пунктам первого уровня курсором мыши (Раздел 1 -> Раздел 2, событий $(".select").hover()), соответствующее подменю прежде чем исчезнуть, задерживалось на экране на некоторое время (событие (".select_sub").hover()).
Вопрос чисто эргономики - подменю быстро исчезает, прежде чем нерадивый посетитель доведет до него мышкой, проходя по другим элементом первого уровня)
Полагаю, что необходимо увязать два события hover с помощью инструмента hoverIntent... но пока ничего толком не вышло, за неимением опыта:
Мой, нерабочий вариант:
Вот мой вариант:
$(".select").hoverIntent({
sensitivity: 7,
interval: 100,
over: nothing,
timeout: 0,
out: outsub
});
function outsub(){
// добавить задержку перед исчезновением подменю
$(".select_sub").find("sub").delay(500).hide();
}
function nothing() {}
Предложите хотя бы алгоритм (структуру jQuery обработчиков) - реализовать попробую сам. Спасибо.