mega-menu с помощью jQuery

Я пытаюсь создать «мега-меню», используя вложенный <ul> в пределах <li>. Используя jQuery (mouseover) на родительском <li>, я могу сделать <ul class="sec1" и <ul class="sec2">.mega-menu с помощью jQuery

Но мышь на li не работает, потому что выпадающее меню исчезает, как только вы развертываете родителя <li>. Как я могу сохранить раскрывающийся список активным, если мышь находится над родительским <li> или любым ребенком <ul>?

HTML-структура ниже.

<li>link 
<ul class="sec1"> 
    <li>sub-link1</li> 
    ...... 
    <li>sub-link5</li> 
</ul> 
<ul class="sec2"> 
    <li>sub-link1</li> 
    ...... 
    <li>sub-link5</li> 
</ul> 
</li>

благодаря

источник

2010-09-27 pixeltocode

У вас возникли проблемы? Какой браузер? Я не могу воспроизвести это с помощью http://jsfiddle.net/vMPRa/ (меню остается открытым в любом подменю) – Robert

спасибо. ваш jQuery, похоже, работает. Я использовал отдельные функции для показа и скрытия. могу ли я принять комментарий в качестве ответа? – pixeltocode

@Robert - вы хотите разместить свой JQuury в качестве ответа? – pixeltocode

Если вы пытаетесь построить меню Suckerfish стиле, вы должны попробовать hoverIntent plugin или еще лучше, использовать Superfish plugin, который имеет поддержку.

С уважением.

источник

2010-09-27 07:44:29 xmarcos

+1 для суперфиша –

Чтобы предотвратить закрытие мега-меню при наведении элементов-потомков внутри родителя li, вы должны использовать событие mousemove. Вот exmample, что я создал для вас: https://jsfiddle.net/imalitavakoli/bpmyu1sb/2/

И вы можете также рассмотреть возможность использования этого плагина и CSS основы JQuery: https://myflashlabs.github.io/24component-bars/

Вот и его мега пример меню: https://myflashlabs.github.io/24component-bars/previews/nav-03.html

Это поможет вам создать отзывчивое мега-меню, заголовок, боковую панель и нижний колонтитул с множеством функций быстро и легко, без каких-либо хлопот ... Это именно то, что вы хотите :)

Вы не знаете чтобы все это с самого начала, когда уже есть решение!

источник

2017-05-20 23:19:58 Ali

mega-menu с помощью jQuery

ответ

Смежные вопросы