Как сделать popover menu?

Question

[Indus Indusovich]

Как сделать такое выпадающее меню,без ul-li?
www.designchemical.com/lab/jquery-vertical-mega-me...

Вот такое на jquery\javascript,как сделать?

Answer 1

[Wol_fi]

Вам принципиальны теги? Ну не нравятся ul > li сделайте div > div.
код в самом тривиальном варианте будет примерно таким:

<div class="menu-item">
   <a href="#">menu name</a>
   <div class="sub-menu">
      sub menu content
   </div>
</div>
<div class="menu-item">
   <a href="#">menu name</a>
   <div class="sub-menu">
      sub menu content
   </div>
</div>
<div class="menu-item">
   <a href="#">menu name</a>
   <div class="sub-menu">
      sub menu content
   </div>
</div>
<script>
jQuery(document).ready(function($){
   $('.menu-item').hover(
      function(){
          $(this).find('.sub-menu').show();
      },
      function(){
          $(this).find('.sub-menu').hide();
      }
   );
});
</script>
<style>
.sub-menu{
 display:none;
}
</style>

Comments

[Indus Indusovich]

Принципиальны,в вашем примере проблема в том что по дефолту скрипт находит все .sub-menu и показывает их,то есть они изначально видны.А может как то с display none\block?

[Wol_fi]

Indus Indusovich: добавил style снизу в ответе, чтоб по дефолту все подменю скрыты были. Но думаю алгоритм вам понятен - по наведению на элемент (hoverOn) показываем внутренний блок, если курсор убран с элемента (hoverOut) блок прячем.

[Indus Indusovich]

Wol_fi: да,а функция find ищет sub-menu в конкретном div .menu-item?то есть это то что предотврощает открытиве всех сабменю при наведении на какой либо div.menu-item?

[Indus Indusovich]

Wol_fi: не работает к стати теперь https://jsfiddle.net/rbkpqunw/5/

[Алексей Зуев]

Indus Indusovich: посмотрите, какая версия jquery у вас выбрана, и почитайте статью

[Indus Indusovich]

Алексей Зуев: Понял,извиняюсь!

[Indus Indusovich]

Алексей Зуев: Wol_fi: Вот так вот будет правильно да?https://jsfiddle.net/rbkpqunw/13/
То есть при загрузке страницы прячем подкатегории.

[Wol_fi]

Indus Indusovich: Да, именно так.