CSS.MANUAL.RU



Введение
Синтаксис CSS
Включение стилей в документ
Значения свойств
Свойства шрифта
Свойства текста
Свойства цвета и фона
Свойства обрамления
Свойства позиционирования
Визуальные свойства
Свойства списков
Свойства полос прокрутки
Тег SPAN
Статьи
Идеология CSS
Как использовать CSS
Меню с помощью CSS
Алфавитный указатель
Ссылки
Обратная связь
Форум





  Меню с помощью CSS

Наверное, вы не раз видели на web-страницах меню, наподобие тех, которые активно используются в программных приложения, когда при наведении курсора мыши на пункт меню, фон этого пункта и цвет надписи меняются. Часто подобного эффекта добиваются с помощью JavaScript. По моему мнению, этот метод является слишком тяжеловесным, к тому же, если броузер клиента не поддерживает JavaScript (или поддерживает) или JavaScript у клиента отключен, то это может обернуться неприятными последствиями. Поэтому для создания меню я рекомендую использовать CSS. Это удобно и намного проще чем JavaScript.

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

Начнем с определения стиля:


a.menuitem:link{
border-style: solid;
border-width: 1;
border-bottom-width: 0;
border-color: black;
background-color: silver
color: black;
text-decoration: none;
padding-left: 1em;
width: 20%
}
a.menuitem:visited {
color: black;
text-decoration: none;
}
a.menuitem:active {
color: black;
text-decoration: none;
}
a.menuitem:hover {
color: white;
background-color: navy;
text-decoration: none;
}

А теперь – обо всем по порядку. Для определения стилей мы используем определенный нами регулярный класс menulink и псевдокласс link (подробнее о регулярных кассах и псевдоклассах можно прочитать в разделе синтаксис). Это значит, что стиль будет применяться только к тем тегам <A>, для которых значение параметра class равно menulink. Сначала мы определим стиль всей ссылки вообще. Мы определяем:

  • Стиль рамки (border-style: solid) – рамка будет сплошной линией
  • Толщину рамки (border-width: 1; border-bottom-width: 0) – все стороны рамки, кроме нижней, будут иметь толщину 1 пиксель. Нижняя будет иметь толщину 0 пискелев.
  • Цвет рамки (border-color: black) будет черным
  • Цвет фона (background-color: silver) будет светло-серым
  • Цвет шрифта (color: black) будет черным
  • Ссылка не будет подчеркнутой (text-decoration: none)
  • Ширину отступа от рамки слева (padding-left: 1em) – он будет равет ширине буквы m в текущем шрифте.
  • Ширину ссылки (width: 20%) – она будет равна 20% от ширины объемлющего элемента

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

Стили мы определили, теперь пора писать и само меню. Это делается так:

<A HRef = "some.html" class = "menuitem">Пункт 1</A><Br>
<A HRef = "some.html" class = "menuitem">Пункт 2</A><Br>
<A HRef = "some.html" class = "menuitem">Пункт 3</A><Br>
<A HRef = "some.html" class = "menuitem">Пункт 4</A><Br>
<A HRef = "some.html" class = "menuitem">Пункт 5</A><Br>
<A HRef = "some.html" class = "menuitem">Пункт 6</A><Br>
<A HRef = "some.html" class = "menuitem" style = "border-bottom-width: 1px">Пункт 7</A><Br>

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

Теперь вы можете проверить это меню. Убедитесь, что этот пример работает верно на броузерах, поддерживающих стили. А на броузерах, не поддерживающих стили, это меню, по крайней мере, не портит вид страницы.






Владимир Климонтович (контакт), Copyright (C) 2003
При поддержке проекта MANUAL.RU