К особенностям горизонтального меню
можно отнести тот момент, что оно зависит
от ширины веб-страницы, которая
ограничена разрешением монитора, его
размерами, настройками браузера и
операционной системы. По этой причине
большое количество пунктов меню делать
не рекомендуется, иначе это может
привести к появлению горизонтальной
полосы прокрутки или переформатированию
текста меню. Вид меню в таком случае
становится непрезентабельным или
неудобным для использования.
Добавление горизонтального подменю во
многом сводит на нет указанные недочеты,
кроме того, показывает пользователю
иерархическую вложенность документов и
веб-страницы, доступные для посещения.
Для такого меню число пунктов первого
уровня можно сократить, зато расширить
подменю, тем более что его пункты можно
располагать в несколько строк. Только
следует принимать во внимание, что число
строк в каждом подменю должно быть
одинаковым, иначе будет происходить
сдвиг текста, расположенного после меню.
Вначале создаем структуру нашего меню.
Она включает в себя слой с именем menu,
который является основным и группу слоев
формирующих подменю (пример 1).
Пример 1. Структура слоев в меню <div id=menu>
<a href=russian.html>Русская кухня</a>
<a href=ukrainian.html>Украинская кухня</a>
<a href=caucasus.html>Кавказская кухня</a>
<a href=asia.html>Кухня Средней Азии</a>
</div>
Заметьте, что идентификатор (параметр id
тега DIV) у каждого подменю свой, а имя
класса одно на всех. Это позволяет
устанавливать характеристики слоя
одновременно, и в то же время, изменять
атрибуты стиля для каждого слоя
индивидуально.
Стиль для меню будет зависеть от того,
какой вид меню и подменю вы хотите
использовать. Но в любом случае элементы
с классом submenutext скрываются от просмотра
с помощью атрибута display со значением none (пример
2). Также, чтобы не происходило смещение
текста под меню, требуется установить
высоту подменю (селектор #submenu), добавив
параметр height с подходящим значением.
Пример 2. Стиль для изменения вида меню
<style type="text/css">
#menu {
padding-left: 20px /* Отступ слева от вкладок */
}
#menu A {
padding: 2px 10px 1px; /* Поле по вертикали и
горизонтали */
border: 1px solid black; /* Рамка для создания
вкладки */
margin-right: 5px; /* Расстояние между вкладками */
background: #f0f0f0; /* Цвет фона вкладок */
text-decoration: none /* Убираем подчеркивание у
ссылок */
}
#submenu {
background: #fc0; /* Цвет фона подменю */
border-top: 1px solid black; /* Линия под вкладками */
padding: 5px; /* Поля вокруг текста */
height: 30px /* Высота подменю в пикселах */
}
#submenu A {
color: #333 /* Цвет ссылок в подменю */
}
#menu .tabactive {
background: #fc0; /* Цвет фона активной вкладки */
border-bottom: 1px solid #fc0;/* Линия под вкладками */
color: maroon /* Цвет текста в активной вкладке */
} </style>
Остается только добавить скрипт. Создаем
свою функцию subMenu, в качестве аргументов
используется указатель на текущую
вкладку (переменная obj) и указатель на
идентификатор подменю (переменная menu).
Аргумент obj требуется, чтобы изменять
стиль активной вкладки через метод className.
Ему присваивается имя класса tabactive,
свойства которого задаются в стилях (пример
3). При этом все необходимые свойства
оформления активной вкладкой хранятся в
одном месте и их легко модифицировать.
Чтобы скрыть и отобразить нужное подменю,
изменяем свойство display определенного
слоя через функцию getElementById. Переменные
prevtab и prevmenu нужны, чтобы сохранять
соответственно указатель на предыдущую
активную вкладку и указатель на то
подменю, которое отображалось в
последний раз. Это позволяет
восстанавливать первоначальные свойства
данных объектов.
Пример 3. Скрипт для отображения подменю
<script type="text/javascript">
var prevmenu, prevtab;
function subMenu(obj, menu) {
if (document.getElementById) {
// Скрываем предыдущее подменю
if (prevmenu) document.getElementById(prevmenu).style.display =
"none";
#submenu A {
color: #333 /* Цвет ссылок в подменю */
}
#menu .tabactive {
background: #fc0; /* Цвет фона активной вкладки */
border-bottom: 1px solid #fc0; /* Линия под вкладками */
color: maroon /* Цвет текста в активной вкладке */
}
</style>
<script type="text/javascript">
var prevmenu, prevtab
function subMenu(obj, menu) {
if (document.getElementById) {
if (prevmenu) document.getElementById(prevmenu).style.display =
"none"
document.getElementById(menu).style.display = "block"
if (prevtab) { prevtab.className = "" }
obj.className = "tabactive"
prevmenu = menu
prevtab = obj
Для вызова функции subMenu используется
событие onMouseOver, которое возникает при
наведении курсора мыши на вкладку меню. В
качестве указателя на текущую вкладку в
аргументе функции subMenu применяется
ключевое слово this. Имя идентификатора
подменю следует брать в кавычки.
Приведенное в примере 4 меню по своему
виду незначительно различается в
браузерах Internet Explorer и Firefox. Однако на сам
принцип работы меню это не влияет, к тому
же с помощью стилей оформление меню можно
менять по своему вкусу и желанию.