Я пытаюсь создать простое раскрывающееся меню со следующей структурой 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>
Чтобы лучше понять, чего я пытаюсь достичь, я сделал следующие иллюстрации:
<ul><li><ul></ul></li></ul>
. Поскольку вы можете видеть, что подменю должно масштабироваться до 100% контейнера и все элементы расположены в центре.
Я думаю, что лучший подход - с 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 для лучшего понимания.
//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(); });
nav
. Например, если я наведу курсор мыши на Menu 10
=> Submenu 1
появится. Если я удерживаю указатель над областью nav
и не касаюсь других элементов в главном меню, подменю продолжает отображать то, что не должно этого делать. Спасибо, в любом случае!