Вертикальное меню

Меню, в котором ссылки расположены друг под другом, называется вертикальным. К его достоинствам относят то, что ширину можно задавать как в пикселах, так и в процентах, подстраивая таким образом под любой макет. К тому же число пунктов вертикального меню может быть достаточно велико, при увеличении его высоты просмотр происходит посредством вертикальной полосы прокрутки вебстраницы. Меню также можно снабдить своей собственной полосой прокрутки для случая большого числа пунктов.

Простое меню с рамкой

Вначале создадим простое меню, состоящее из четырех пунктов. Ссылкой будет служить не только текст, но и пустое пространство справа от него (рис. 7.8). Для этого следует в стиле селектора А указать display: block.

Рис. 7.8. Вид горизонтального меню

Ширина меню в пикселах или процентах устанавливается через свойство width, которое применяется к классу menu (пример 7.6). Здесь же задаются параметры рамки вокруг меню и отступы от неё до ссылок. Для того чтобы вокруг ссылки при наведении на нее курсора мыши появлялась цветная граница, требуется сделать следующее. Вначале к селектору А добавляем невидимую рамку, цвет которой совпадает с цветом веб-страницы, так, в примере используется белый цвет. Маскирование границы необходимо, поскольку текст ссылки иначе станет смещаться от своего исходного положения. Теперь для псевдокласса :hover остается только указать желаемые параметры рамки, цвет текста и фона.

Пример 7.6. Простое меню XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head> <title>Меню</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css">

.menu {

margin: 0; padding: 0; /* Отключаем отступы и поля */ width: 200px; /* Ширина меню в пикселах */

padding: 5px; /* Отступы от рамки до пунктов меню */

}border: 1px solid black /* Рамка вокруг меню */

.menu LI {

}list-style: none; /* Убираем маркеры */

.menu A {

padding: 2px 5px; /* Отступ от рамки вокруг ссылки до текста */ display: block; /* Ссылка как блочный элемент */

border: 1px solid white; /* Маскируем рамку вокруг ссылки */ }text-decoration: none; /* Убираем подчеркивание у ссылок */

.menu A:hover {

background: #faf3d2; /* Цвет фона под ссылкой */ color: #800000; /* Новый цвет ссылки */

}border: 1px dashed #634f36; /* Рамка вокруг ссылки */

</style>

</head>

<body>

<ul class="menu">

<li><a href="link1.html">Чебурашка</a></li>

Меню и подменю

Меню, которое содержит большое число пунктов, имеет смысл разделить на части, тем самым создавая так называемые подменю. Подобная организация меню хорошо воспринимается пользователем, к тому же она достаточно часто используется в различных программах, следовательно, будет привычной и на сайте.

Вариантов создания подменю может быть множество, например, на рис. 7.10 показан способ, когда подменю отображается справа от выделенного пункта.

Рис. 7.10. Вид меню с выбранным подменю

Небольшая стрелка справа от текста нужна для наглядности, она показывает, что за пунктом скрывается подменю.

Из-за того, что требуется применять упорядоченность элементов и прямую зависимость их друг от друга, теги <div> не очень годятся на роль создания подобного меню. Лучше использовать списки, а именно теги <ul> и <li>. Их внутренняя организация как нельзя лучше подходит для создания меню различного уровня вложенности. Начинается меню с тега <ul>, а затем каждый пункт меню верхнего уровня добавляется через тег <li>. Создание подменю происходит за счет конструкции <ul>, которая помещается внутрь <li> (пример 7.8).

Пример 7.8. Структура меню при использовании списков

<ul>

<li>Пункт 1

<ul>

<li>Подпункт 1.1</li> <li>Подпункт 1.2</li>

</ul>

</li> <li>Пункт 2

<ul>

<li>Подпункт 2.1</li> <li>Подпункт 2.2</li>

</ul>

</li>

</ul>

Формирование подменю третьего уровня вложенности происходит аналогично, путём добавления тега <ul> внутрь подпункта <li>.

Стиль предназначен для оформления пунктов меню и сокрытия подменю. Поскольку тег <ul> отображает элементы как список, то вначале следует спрятать маркеры, установив для селектора LI свойство list-style: none. Также надо убрать различные отступы и поля, которые по умолчанию добавляются для элементов списка (пример 7.9).

Подменю вначале оказывается скрытым за счет использования свойства display со значением none, затем оно отображается при наведении на пункт меню (display: block). Для этого используется псевдокласс :hover, добавляемый к селектору LI.

Рамка вокруг пунктов добавляется к селектору LI. Чтобы при этом не возникало сдвоенных линий в

местах стыка пунктов, граница внизу убирается. Самые нижние пункты остаются в этом случае без линии, и для них нижняя граница устанавливается через селектор UL.

Чтобы в меню различать пункты, у которых нет подменю, и пункты с подменю, логично добавить к таким пунктам небольшой рисунок, например треугольник-стрелку, как на рис. 7.10. Изображение добавляется как фоновое с помощью свойства background, применяемого к селектору А. В качестве значений указывается путь к графическому файлу и положение картинки. Так 100% 50% означает, что рисунок будет одновременно выравниваться по правому краю и по центру вертикали пункта. Отменить показ рисунка для отдельных пунктов можно указав background-image: none в теге <a>, но лучше ввести отдельный класс, назовём его nobullet и будем использовать в нужных местах.

Пример 7.9. Меню с подменю XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head> <title>Меню</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css">

.menu, .menu UL {

width: 180px; /* Ширина меню */

margin: 0; padding: 0; /* Отключаем отступы и поля */

}border-bottom: 1px solid #CCC; /* Линия снизу */

.menu LI {

list-style: none; /* Убираем маркеры */

position: relative; /* Подпункты позиционируются относительно */ border: 1px solid #CCC; /* Рамка вокруг пунктов меню */ }border-bottom: none; /* Границу снизу не проводим */

.menu UL {

position: absolute; /* Подменю позиционируются абсолютно */ display: none; /* Скрываем подменю */

top: -1px; /* Сдвигаем вверх на толщину линии */ }left: 178px; /* Сдвигаем подменю вправо */

.menu A {

display: block; /* Ссылка как блочный элемент */ padding: 5px; /* Поля вокруг надписи */

text-decoration: none; /* Убираем подчеркивание у ссылок */ background: url(images/bullet.png) 98% 50% no-repeat;

/* Отображаем рисунок стрелки */

}color: #666; /* Цвет текста */

.menu UL A {

}background-image: none; /* Для подпунктов рисунок убираем */

.menu LI:hover {

}background-color: #f0f0f0; /* Цвет фона активного пункта */

.menu LI:hover UL {

}display: block; /* При выделении пункта отображается подменю */

.menu .nobullet {

}background-image: none; /* Прячем рисунок */

</style>

</head>

<body>

<ul class="menu">

<li><a href="russian.html">Русская кухня</a>

<ul>

<li><a href="linkrl.html">Бeфcтpoгaнoв</a></li> <li><a href="linkr2.html">Гycь с яблоками</a></li>

<li><a href="linkr3.html">Kpyneник новгородский</a></li> <li><a href="linkr4.html">Paки по-русски</a></li>

</ul>

</li>

<li><a href="ukrainian.html">Украинская кухня</a>

<ul>

<li><a href="linkul.html">Вареники</a></li>

<li><a href="linku2.html">Жаркое по-харьковски</a></li> <li><a href="linku3.html">Капустняк черниговский</a></li> <li><a href="linku4.html">Потапцы с помидорами</a></li>

</ul>

</li>

<li><a href="caucasus.html">Кавказская кухня</a>

<ul>

<li><a href="linkcl.html">Cyп-харчо</a></li>

<li><a href="linkc2.html">Лилибдж</a></li> <li><a href="linkc3.html">Чихиртма</a></li> <li><a href="linkc4.html">Шашлык</a></li>

</ul>

</li>

<li><a href="asia.html" class="nobullet">Кухня Средней Азии</a></li>

</ul>

</body>

</html>

Данный пример не работает в браузере IE6, поскольку он поддерживает псевдокласс :hover только для ссылок и соответственно, не понимает его для селектора LI.