На amazon.com и на walmart.com есть функция всплывающего окна, когда вы наводите курсор на отделы. Он работает аналогично меню, но фактическое прямоугольное окно с полными списками ссылок отображается при наведении курсора.
Я пытаюсь найти название этой функции. Интересно, «всплывающее окно» подходит? И как второй вопрос, есть ли плагины jQuery, которые делают подобные вещи. Я попробовал поискать плагины всплывающих окон, и на самом деле есть несколько, но они, похоже, не то, что я хочу.
Как сказал Алекс ... это не так сложно ... на самом деле, вам нужно сделать простой список в html:
<div id="menu">
<ul>
<li>
<div class="derpartment-title"><a href="#">Item 1</a></div>
<div class="submenu">
<ul>
<li><a href="#">Item 1.1</li>
<li><a href="#">Item 1.2</li>
<li><a href="#">Item 1.3</li>
</ul>
</div>
</li>
<li>
<div class="derpartment-title"><a href="#">Item 2</a></div>
<div class="submenu">
<ul>
<li><a href="#">Item 2.1</li>
<li><a href="#">Item 2.2</li>
<li><a href="#">Item 2.3</li>
</ul>
</div>
</li>
</ul>
</div>Затем вы просто скрываете класс .submenu в CSS:
.submenu {
display: none;
}А с помощью jquery добавьте класс в элемент списка hovered:
$('#menu li').bind('mouseenter',function(){
$(this).addClass('hovered');
}).bind('mouseleave',function(){
$(this).removeClass('hovered');
});затем в вашем CSS добавьте соответствующие свойства в подменю hovered:
.hovered .submenu {
display: block;
left: 100px /* or the width of the menu or even an auto width, don't know if works with auto */
}и в основном это должно работать с ним ... тогда вы просто добавляете свойства стиля, которые вам нужны для ссылок, фонов и т. д.
Я думаю, что это может быть похоже на ASP.NET AJAX HoverMenu .
Поэтому я взглянул на сайт, и это даже проще, чем я думал.
По сравнению с другими меню, которые вы можете найти в интернете, в этом нет особых эффектов и анимации.
Быстро просматривая Firebug, они скрывают весь контент и связываются со ссылочным <li>элементом (в стиле CSS).
Когда вы наводите курсор мыши на элемент меню, CSS изменяется с navSaMenuItemMiddleна navSaMenuItemMiddleOpenи div с абсолютной позицией заполняется содержимым пункта меню.
Сценарий таков и является собственностью Amazon.com.