Специальное выпадающее меню

0

Я пытаюсь создать простое раскрывающееся меню со следующей структурой HTML. Эта структура является обязательной (я думаю), как объяснено на иллюстрациях ниже.

<nav role="navigation">
    <ul id="main-menu" class="nav top-nav clearfix">
        <li id="menu-item-1" class="menu-item"><a href="#">Menu 1</a></li>
        <li id="menu-item-2" class="menu-item"><a href="#">Menu 2</a></li>
        <li id="menu-item-3" class="menu-item"><a href="#">Menu 3</a></li>
    </ul>
    <ul id="sub-menu-1" class="sub-menu nav clearfix">
        <li class="menu-item"><a href="#">Sub Menu 1.1</a></li>
        <li class="menu-item"><a href="#">Sub Menu 1.2</a></li>
        <li class="menu-item"><a href="#">Sub Menu 1.3/a></li>
    </ul>
    <ul id="sub-menu-2" class="sub-menu nav clearfix">
        <li class="menu-item"><a href="#">Sub Menu 2.1</a></li>
        <li class="menu-item"><a href="#">Sub Menu 2.2</a></li>
        <li class="menu-item"><a href="#">Sub Menu 2.3/a></li>
    </ul>
</nav>

Чтобы лучше понять, чего я пытаюсь достичь, я сделал следующие иллюстрации:

  1. Простое меню с элементами, расположенными с встроенными блоками. Как вы можете видеть, меню масштабируется до 100% контейнера и имеет все элементы, расположенные в центре.

Изображение 174551

  1. При наведении курсора на пункт меню, в котором есть подменю. На рисунке показано, что Меню 1, которое имеет подменю 1, и оно должно отображать его при наведении курсора мыши, как это делает простая <ul><li><ul></ul></li></ul>. Поскольку вы можете видеть, что подменю должно масштабироваться до 100% контейнера и все элементы расположены в центре.

Изображение 174551

Я думаю, что лучший подход - с javascript (не уверен, что вы можете сделать это только с CSS), но я отчасти застрял. Подменю отображается в главном меню, но как только я нахожусь в подменю для навигации, подменю исчезает. Во всяком случае, это javascript:

$('nav #main-menu .menu-item a').hover(
    function() {
        var id = $(this).parent().attr('id');
        id = id.substr(id.length - 1);
        submenu = $('#sub-menu-' + id);
        submenu.show();
    }, 
    function() {
        var id = $(this).parent().attr('id');
        id = id.substr(id.length - 1);
        submenu = $('#sub-menu-' + id);
        submenu.hide();
    }
);

Я уверен, что есть лучший способ сделать это.

Я также создал FIDDLE для лучшего понимания.

  • 1
    Это потому, что когда вы наводите курсор в подменю, вы действительно зависаете из главного меню, и вызывается функция выключения. Работаем над полным решением.
  • 1
    Решение ТОЛЬКО для CSS jsfiddle.net/5ths8 . Это глупо, но вы должны быть в состоянии понять это и адаптировать это.
Теги:
drop-down-menu
menu

1 ответ

1
Лучший ответ
//show sub menu when we hover over an item
$('nav #main-menu > .menu-item')
 .on('mouseenter', function() {
    $('.sub-menu').hide();
    var id = $(this).attr('id');
    id = id.substr(id.length - 1);
    $('#sub-menu-' + id).show();
  });

//hide submenu when the mouse goes away
$('nav').on('mouseleave', function() { $('.sub-menu').hide(); });

Изменена ваша скрипка здесь: http://jsfiddle.net/3z8MR/10/

Редактировать Добавить эту строку, чтобы она соответствовала вашим спецификациям в комментариях

$('.sub-menu').on('mouseleave', function() { $(this).hide(); });
  • 0
    Ах, это был хороший момент. Я удалил свой ответ, так как он недействителен.
  • 0
    Все, кажется, хорошо, за исключением небольшой ошибки. Подменю должно быть активным (отображаться) только тогда, когда вы наводите курсор мыши на его родителя (пункт главного меню) или на самого себя. Ваш остается активным во всей области nav . Например, если я наведу курсор мыши на Menu 10 => Submenu 1 появится. Если я удерживаю указатель над областью nav и не касаюсь других элементов в главном меню, подменю продолжает отображать то, что не должно этого делать. Спасибо, в любом случае!
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню