Горизонтальное меню с подменю
К особенностям горизонтального меню
можно отнести тот момент, что оно зависит
от ширины веб-страницы, которая
ограничена разрешением монитора, его
размерами, настройками браузера и
операционной системы. По этой причине
большое количество пунктов меню делать
не рекомендуется, иначе это может
привести к появлению горизонтальной
полосы прокрутки или переформатированию
текста меню. Вид меню в таком случае
становится непрезентабельным или
неудобным для использования.
Добавление горизонтального подменю во
многом сводит на нет указанные недочеты,
кроме того, показывает пользователю
иерархическую вложенность документов и
веб-страницы, доступные для посещения.
Для такого меню число пунктов первого
уровня можно сократить, зато расширить
подменю, тем более что его пункты можно
располагать в несколько строк. Только
следует принимать во внимание, что число
строк в каждом подменю должно быть
одинаковым, иначе будет происходить
сдвиг текста, расположенного после меню.
Вначале создаем структуру нашего меню.
Она включает в себя слой с именем 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>
<div id=submenu>
<div id=sm1 class=submenutext>
<a href=linkr1.html>Бефстроганов</a> |
<a href=linkr2.html>Гусь с яблоками</a>
|
<a href=linkr3.html>Крупеник
новгородский</a> |
<a href=linkr4.html>Раки по-русски</a>
</div>
<div id=sm2 class=submenutext>
<a href=linku1.html>Вареники</a> |
<a href=linku2.html>Жаркое по-харьковски</a>
|
<a href=linku3.html>Капустняк
черниговский</a> |
<a href=linku4.html>Потапцы с
помидорами</a>
</div>
<div id=sm3 class=submenutext>
<a href=linkc1.html>Суп-харчо</a> |
<a href=linkc2.html>Лилибдж</a> |
<a href=linkc3.html>Чихиртма</a> |
<a href=linkc4.html>Шашлык</a>
</div>
<div id=sm4 class=submenutext> </div>
</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 /* Высота подменю в пикселах */
}
.submenutext {
display: none /* Прячем подменю */
}
#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";
// Отображаем текущее подменю
document.getElementById(menu).style.display = "block";
if (prevtab) {
// Восстанавливаем стиль предыдущей
активной вкладки
prevtab.className = "";
}
// Устанавливаем для текущей вкладки
стиль с классом tabactive
obj.className = "tabactive";
// Сохраняем указатель на подменю и
текущую вкладку
prevmenu = menu;
prevtab = obj;
}
}
</script>
Остается теперь все свести воедино и
получить нужный код для создания меню с
подменю (пример 4).
Пример 4. Окончательный код
<html>
<head>
<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
}
.submenutext {
display: none; /* Прячем подменю */
1height: 30px
}
#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
}
}
</script>
</head>
<body>
<div id=menu>
<a href=russian.html onMouseOver="subMenu(this,'sm1')">Русская
кухня</a>
<a href=ukrainian.html onMouseOver="subMenu(this,'sm2')">Украинская
кухня</a>
<a href=caucasus.html onMouseOver="subMenu(this,'sm3')">Кавказская
кухня</a>
<a href=asia.html onMouseOver="subMenu(this,'sm4')">Кухня
Средней Азии</a>
</div>
<div id=submenu>
<div id=sm1 class=submenutext>
<a href=linkr1.html>Бефстроганов</a> |
<a href=linkr2.html>Гусь с яблоками</a> |
<a href=linkr3.html>Крупеник новгородский</a>
|
<a href=linkr4.html>Раки по-русски</a>
</div>
<div id=sm2 class=submenutext>
<a href=linku1.html>Вареники</a> |
<a href=linku2.html>Жаркое по-харьковски</a> |
<a href=linku3.html>Капустняк черниговский</a>
|
<a href=linku4.html>Потапцы с помидорами</a>
</div>
<div id=sm3 class=submenutext>
<a href=linkc1.html>Суп-харчо</a> |
<a href=linkc2.html>Лилибдж</a> |
<a href=linkc3.html>Чихиртма</a> |
<a href=linkc4.html>Шашлык</a>
</div>
<div id=sm4 class=submenutext> </div>
</div>
...
</body>
</html>
Для вызова функции subMenu используется
событие onMouseOver, которое возникает при
наведении курсора мыши на вкладку меню. В
качестве указателя на текущую вкладку в
аргументе функции subMenu применяется
ключевое слово this. Имя идентификатора
подменю следует брать в кавычки.
Приведенное в примере 4 меню по своему
виду незначительно различается в
браузерах Internet Explorer и Firefox. Однако на сам
принцип работы меню это не влияет, к тому
же с помощью стилей оформление меню можно
менять по своему вкусу и желанию.
<< предыдущая
||
следующая >>
|
|
|
Автор: Влад Мержевич
Ресурс: www.htmlbook.ru |
|
Статьи веб-мастеру
Новичкам
