Отправляет email-рассылки с помощью сервиса Sendsay

Рассылка закрыта

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

← Апрель 2005 →
	1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30

Автор

Влад Мержевич

Статистика

12.722 подписчиков
-26 за неделю

← Все выпуски →

Рецепты HTML # 154

Информационный Канал Subscribe.Ru

	Помощь по сайту

Добрый день.

На сайте изменилось описание Справочника по CSS. Если вы еще по какой-то причине не скачали справочник, то это обязательно следует исправить.

Скачать Справочник по CSS

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

Адрес статьи — htmlbook.ru/content/249.html

Горизонтальное меню с подменю

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

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

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

Вначале создаем структуру нашего меню. Она включает в себя слой с именем 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. Стиль для изменения вида меню

#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. Скрипт для отображения подменю

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. Окончательный код

#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>

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. Однако на сам принцип работы меню это не влияет, к тому же с помощью стилей оформление меню можно менять по своему желанию.

Интересные темы форума

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

Проверка, отключен ли показ картинок в браузере
С помощью JavaScript определяем, отключил посетитель сайта показ изображений или нет.

Как сделать всплывающее меню
Создание всплывающего меню на JavaScript.

Рисование фигур с помощью бордеров
Интересная техника рисования простыми средствами – один HTML и CSS.

Постраничный вывод записей в гостевой книге
Как выводить записи из текстового файла в гостевую книгу по страницам, с определенным числом записей на каждую страницу.

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

Copyright © 2002 - 2004 Влад Мержевич, по всем вопросам пишите по адресу vlad@htmlbook.ru
Материалы сайта охраняются законом об авторском праве. Ни одну статью нельзя воспроизводить или использовать в какой бы то ни было форме, для каких бы то ни было целей или какими бы то ни было средствами без письменного разрешения автора.

http://subscribe.ru/
http://subscribe.ru/feedback/

Подписан адрес:
Код этой рассылки: inet.webbuild.htmlbook

Отписаться

В избранное