Когда-то навигационные панели делались из таблиц, заполненных нарисованными в Фотошопе кнопками. В последнее время, когда появилась возможность все больше и больше полагаться на возможности CSS, происходит движение в сторону большей семантичности. С точки зрения семантики, навигационнное меню — это список ссылок. С этой точки зрения мы на него и будем смотреть.
С помощью CSS можно с легкостью достичь множества эффектов, для которых ранее пришлось нарезать бы множество графических элементов. Разумеется, чем сложнее эффект, тем лучше браузер требуется для его поддержки, поэтому стоит в любой сложный эффект включать какой-нибудь простой элемент, чтобы обеспечить удобство для посетителей со старыми версиями. Сейчас мы рассмотрим несколько любопытных эффектов для вертикального меню. Горизонтальные меню в настоящее время менее удобны в реализации списками, поскольку обычно требуют поддержки псевдоклассов :before, :after, :first-child, свойства content и прочих сложных вещей.
Подготовительная работа
Нам понадобится список из нескольких ссылок и простейшие базовые стили для начала работы:
<style>
ul {border:1px solid black; width:30%; padding:0; margin:1em}
Возможно вы искали - Реферат: Обзор сетевых функций PHP
ul li {list-style:none}
ul li a {text-decoration:none; color:blue}
ul li a:hover {color:red}
</style>
<ul>
Похожий материал - Реферат: Основы сканирования изображений
<li><a href="#">Первая ссылка</a></li>
<li><a href="#">Вторая ссылка</a></li>
<li><a href="#">Третья ссылка</a></li>
<li><a href="#">Еще какая-то ссылка</a></li>
</ul>
Очень интересно - Реферат: Три способа улучшить юзабилити внешних поисковых серверов
Пара замечаний по этому коду. Во-первых, тут мы уже задали один простой эффект: перемену цвета при наведении мыши. Это самый простой элемент, и я бы рекомендовал включать его во все hover-эффекты, поскольку он понятен любому браузеру, понимающему hover, тогда как более сложные эффекты кто-то может и не понять. Второе замечание: list-style, конечно, можно написать в ul, ничего от этого не изменится. Просто мне захотелось сразу обозначить те четыре селектора, с которыми мы будем работать в дальнейшем.
Блокировка
Вообще мысль оформить навигацию списком довольно очевидна. Но у графических кнопок есть большое преимущество перед текстовыми ссылками: на кнопки можно нажимать по всей площади, тогда как у ссылки клику поддается только сам текст. Раньше люди клали жизнь на алтарь, пытаясь сделать "кликабельной" клетку таблицы. Теперь есть куда более простое (и что немаловажно, легальное) средство: display:block.
Установка этого атрибута сделает нашу ссылку нажимаемой по всей ширине списка. Чтобы нам было легче это заметить, добавим изменение фона у ссылки:
<style>
ul {border:1px solid black; width:30%; padding:0; margin:1em;}
Вам будет интересно - Реферат: РНР - что в этом слове?
ul li {list-style:none;}
ul li a {text-decoration:none; color:blue; display:block}
ul li a:hover {color:red; background:#eff}
</style>
Два очень важных замечания по MSIE 5.0 (что-то, возможно, верно и для более новых). Во-первых, он норовит вставить лишние пробелы между строками:
Похожий материал - Доклад: Логическое проектирование
Эта проблема решается неэлегантно, но просто: нужно убрать переносы строк между элементами списка:
<ul><li><a href="#">Первая ссылка</a></li><li><a href="#">Вторая ссылка</a></li><li><a href="#">Третья ссылка</a></li><li><a href="#">Еще какая-то ссылка</a></li></ul>
Вторая проблема куда серьезнее, и у нее, кажется, нет решения: если у списка или у какого-либо родительского элемента задана ширина (возможно даже 100%), ссылка не становится нажимаемой вне области текста. Правда, при наведении мыши на текст ссылки фоновый цвет меняется на всей ширине списка. Таким образом, заключаем, что MSIE5.0 более или менее правильно обрабатывает стили, но не инициализирует событие onMouseOver в согласии со свойством display. Что интересно: если список является непосредственным ребенком элемента body и ширина у него не задана, то display:block приносит ожидаемый эффект. Удивительно, не правда ли?
Кроме того, если у самого списка задана ширина (вне зависимости от его предков), то MSIE создает левый отступ (виден на картинке выше), от которого, кажется, никак не избавиться. Разве что насильственным text-indent:-1em.
Ссылка в рамке