CSS/JQuery Горизонтальное меню с 2 строками

занятый кот http://i61.tinypic.com/2nu3ok3.jpg

Я создал меню с jquery: div 1 для главного меню и div 2 для подменю. Когда вы наводите курсор мыши на элемент, в выбранном меню появляется div 2.

Могу ли я сделать меню более оптимизированным?

Можете ли вы создать меню CSS на 2 строках с функцией, описанной на изображении?

<div id="main-menu">
 <ul>
 <li><a href="#" rel="" target="_blank">Home</a></li>
 <li><a href="#" rel="submenu1" target="_blank">test</a></li>
 </ul>
</div>

<div id="menu-wrap">
 <div id="menu">
 <div id="submenu1">
 <ul>
 <li><a href="#" target="_blank">sub menu 1</a></li>
 <li><a href="#" target="_blank">sub menu 2</a></li>
 </ul>
 </div>
 </div>
</div>

можно реализовать меню без использования jquery, но только CSS?

1 ответ

Для того, чтобы это сработало, подменю нужно будет вложить (в DOM) внутри своих записей в главном меню. Нам нужно будет изменить разметку HTML, используя списки.

Описание кода: мы создадим контейнер для всего, и плаваем так. После контейнера у нас будет div, который просто очищает float, поэтому остальная часть страницы отображается правильно. Внутри контейнера у нас будет неупорядоченный список для главного меню - каждый элемент списка будет содержать ссылку и неупорядоченный список для подменю. Первоначально эти списки подменю будут display:none. Нам нужно будет расположить подменю абсолютно, чтобы они отображались ниже под главным меню, а не посередине. Затем волшебство происходит с помощью псевдо-селектора :hover и вложенного выбора: когда элемент списка главного меню зависает, его дочерний знак ul будет установлен для display:block.

Изменения в HTML:

<div id="menu-container">
 <ul id="main-menu">
 <li> <a href="#" target="_blank">Home</a> </li>
 <li> <a href="#" target="_blank">Menu Item 1</a>
 <ul>
 <li><a href="#" target="_blank">Submenu 1 Item 1</a></li>
 <li><a href="#" target="_blank">Submenu 1 Item 2</a></li>
 </ul>
 </li>
 <li> <a href="#" target="_blank">Menu Item 2</a>
 <ul>
 <li><a href="#" target="_blank">Submenu 2 Item 1</a></li>
 <li><a href="#" target="_blank">Submenu 2 Item 2</a></li>
 </ul>
 </li>
 <li> <a href="#" target="_blank">Menu Item 3</a>
 <ul>
 <li><a href="#" target="_blank">Submenu 3 Item 1</a></li>
 <li><a href="#" target="_blank">Submenu 3 Item 2</a></li>
 </ul>
 </li>
 </ul>
</div>

<div> </div>

И сопровождающий CSS:

#menu-container {
 float:right;
}
#main-menu {
 text-align:right;
 position:relative;
}
.submenu {
 position:absolute;
 left:0;
 top:1em;
 width:100%;
 text-align:center;
 display:none;
}
#main-menu, .submenu {
 list-style:none;
}
#main-menu li, .submenu li {
 display:inline;
}
#main-menu li:hover ul {
 display:block;
}
.clear {
 clear:both;
}

Смотрите демо-версию здесь.

Возможно, это потребует некоторой настройки для поддержки устаревших браузеров, если это необходимо. Некоторый код (для эффекта зависания) был получен из раскрывающегося меню "Списка списков" Suckerfish CSS.

licensed under cc by-sa 3.0 with attribution.