Создание выпадающего меню с помощью Javascript

Question

Вопрос по логике здесь:

Какой самый элегантный способ заставить меню появляться / исчезать при mouseover / onmouseout?

См. Следующий JsBin:

http://jsbin.com/owayeb/edit#source

Меню скрыто по умолчанию.

Если пользователь перемещает курсор над ссылкой, вызывается функция showme ().

Когда пользователь убирает курсор, вызывается функция hideme ().

Как заставить Меню сохраняться, пока пользователь отодвигает свою мышь от ссылки над меню?

Или это все неправильная школа мысли?

Answer 1

Предполагая, что это для каскадной навигации или чего-то подобного, я бы сделал что-то вроде ...

<style type="text/css">
ul#nav li {
    position: relative;
    height: 20px;
}
ul#nav li ul {
    display: none;
    position: absolute;
    top: 20px;
}
ul#nav li.selected ul { display: block; }
</style>

<ul id="nav">
<li>
    <a href="#" title="Link">Link</a>
    <ul>
        <li><a href="#" title="">Hi There!</a></li>
        <li><a href="#" title="">Secone Nav Item</a></li>
        ...
    </ul>
</li>
</ul>

В состоянии onmouseover ваших элементов списка вы добавили бы класс .selected к #nav таким образомвызывая отображение всех дочерних UL.Поскольку дочерние элементы UL находятся в ul # nav, ваше состояние при наведении будет оставаться активным, пока вы переворачиваете дочерние элементы.

Очевидно, что вам нужно настроить CSS так, чтобы он соответствовал желаемому виду, который вы хотите,но это общая идея.Например, если вы используете прототип js, ваш javascript будет выглядеть примерно так ...

$$('#nav li').each(function(x) {
    x.onmouseover = function() { $(this).addClassName('selected'); }
    x.onmouseout = function() { $(this).removeClassName('selected'); }
});

Answer 2

Я использую плагин superfish jQuery для создания выпадающих меню Javascript. Superfish - это расширенный плагин jQuery для меню в стиле Suckerfish, в котором используется существующее раскрывающееся меню с чистым CSS-кодом (так что оно без изящества ухудшается без JavaScript) и добавляются некоторые полезные улучшения.

Answer 3

Не уверен, что это то, что вы ищете или нет, но проверьте это!

http://jsfiddle.net/5NmTB/

Дайте мне знать, если у вас есть вопросы

Answer 4

Лучший и самый простой способ сделать это - использовать селектор: hover для отображения подменю.

Вот как бы я это сделал:
1. определить структуру меню

<ul id='menu'>
  <li>Menu Item</li>
  <ul id='submenu'>
    <li>Sub menu item 1</li>
    <li>Sub menu item 2</li>
  </ul>
</ul>

• Скрыть подменю в css и определить подменю: навести курсор, чтобы покинуть дисплей: блок

• Прикрепите к пункту меню, при наведении мыши, чтобы отобразить подменю (вы можете просто переключить класс или что-то еще и переключиться снова через 5 секунд.)

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

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

Answer 5

вы можете добавить того же слушателя onmouseover в drop div, чтобы он оставался открытым:

<div id="drop" class="dropdown" onmouseover="showme('drop')" onmouseout="hideme('drop')">
    Hi there!
  </div>