К особенностям горизонтального меню можно отнести тот момент, что оно зависит от
ширины веб-страницы, которая ограничена разрешением монитора, его размерами,
настройками браузера и операционной системы. По этой причине большое количество
пунктов меню делать не рекомендуется, иначе это может привести к появлению
горизонтальной полосы прокрутки или переформатированию текста меню. Вид меню в
таком случае становится непрезентабельным или неудобным для
использования.
Добавление горизонтального подменю во многом сводит на нет
указанные недочеты, кроме того, показывает пользователю иерархическую
вложенность документов и веб-страницы, доступные для посещения.
Для
такого меню число пунктов первого уровня можно сократить, зато расширить
подменю, тем более что его пункты можно располагать в несколько строк. Только
следует принимать во внимание, что число строк в каждом подменю должно быть
одинаковым, иначе будет происходить сдвиг текста, расположенного после
меню.
Вначале создаем структуру нашего меню. Она включает в себя слой с
именем 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. Однако
на сам принцип работы меню это не влияет, к тому же с помощью стилей оформление
меню можно менять по своему вкусу и желанию.