Горизонтальные компоненты навигации на базе списков…

При работе над созданием раскрывающихся меню на базе списка я хочу просто взять список с вложенными списками для раскрытия и заставить это работать без добавления дополнительного кода - лишь простой XHTML-список и стили CSS. Но как же создать раскрывающееся меню из свободных от лишних идентификаторов и классов списков?

Все, что для этого требуется, - контекст, контейнер <div> с идентификатором, чтобы нужные CSS стили применялись к нужному списку. Фактически, создать такие меню с помощью CSS очень легко. Первым шагом на пути к созданию раскрывающихся меню станет создание горизонтального меню с основными пунктами.

Раскрывающиеся меню содержат подкатегории, каждая из которых раскрывается из содержащего его пункта. Они более эффективны и занимают меньше места, чем обычные вертикальные меню. По традиции такие меню создаются с помощью JavaScript, что ведет к раздутию кода.

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

Давайте взглянем на эти преимущества в действии, создав для начала горизонтальную навигацию и затем добавив раскрывающиеся подкатегории (рис. 1).  

(рис. 1) Простой горизонтальный элемент навигации.

 

Для создания этого компонента нам потребовался простой список внутри <div>:

Но для получения горизонтального меню (рис. 1), мы использовали простой вертикальный список (рис. 2).

(рис. 2) Вот скромное начало горизонтального меню.

Начнем с добавления простых стилей для <div> - линий по верхней и нижней границе, зададим размер шрифта и цвет фона, применим top-margin чтобы сместить его от верхней границы окна браузера.

По умолчанию элементы списка без стилей располагаются один над другим, поэтому нам нужно изменить их порядок на горизонтальный (рис. 3). Заодно мы сместим список от левого края <div> и зададим фоновый цвет для его элементов.

(рис. 3) Теперь список расположен горизонтально.

Обратите внимание, что границы <div> немедленно смыкаются (хотя это и не заметно в Internet Explorer), так как по рекомендациям W3C плавающие элементы должны иметь возможность свешиваться из содержащих их элементов.

Так как в этом <div> есть только плавающие элементы, получается, что он не имеет высоты из-за отсутствия контента как такового. Чтобы устранить это, удалим маркеры из списка и начнем добавлять стили для ссылок.

Простой способ сделать так, чтобы <div> все же содержал плавающие пункты меню, - это сделать контейнер также плавающим.

Теперь <div> раскроется и вместит плавающие элементы списка. Шрифт ссылок стал синим, при наведении на них указателя мыши он меняется на красный (рис. 4).

(рис. 4) Мы указали цвет ссылок для пассивного состояния и при наведении указателя мыши.

Но при этом у нас отсутствует визуальное разделение элементов меню. Несколько новых правил изменит ситуацию.

Результат мы видим на (рис. 5).

(рис. 5) Теперь элементы списка четко разделены.

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

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

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

Теперь ссылки заполняют все пространство ячеек, и мы можем щелкать мышью в любой ее точке (рис. 6).

(рис. 6) Теперь элементы меню заполняют всю область ячеек.

Итак, все, что осталось сделать, - это удалить временный серый фон и заставить фактический фон пунктов меню изменять цвет при наведении на него указателя мыши, добавив псевдокласс :hover для пунктов списка:

Результат виден на (рис. 7).

(рис. 7) Теперь фон пунктов меню меняет цвет при наведении на него указателя мыши.

Сейчас при наведении указателя мыши на пункт меню его фон меняет цвет во всех браузерах, кроме Internet Explorer для Windows.

IE/Win реагирует на псевдокласс :hover только при его добавлении к ссылке, тогда как более совместимые со стандартами браузеры распознают его для любого элемента. Поэтому, несмотря на то, что мы закончили работу над CSS-кодом для этого компонента, нам придется выполнить еще пару действий, чтобы «бедняга» Internet Explorer для Windows отображал первую вертикальную черту и откликался на наведение указателя мыши на пункт меню.

Вначале разберемся с вертикальной чертой. Мы можем решить эту проблему с помощью трюка со звездочкой и дописать CSS, распознаваемый только IE/Win.

До этого момента мы использовали элемент <ul> только для задания левого поля при создании отступа от края <div>. Так как <ul> содержит только плавающие элементы (пункты списка) он так же сомкнут, как и <div> в начале этого упражнения. Добавим временные границы:

чтобы просмотреть границы <ul> (рис. 8).

(рис. 8) Нижняя и верхняя границы <ul> смыкаются.

Нам нужно сделать <ul> плавающим, чтобы он вместил элементы списка:

В результате наше меню будет выглядеть, как показано на (рис. 9).

(рис. 9) Теперь <ul> вмещает в себя все элементы списка.

Теперь добавим левую границу для первого пункта меню - удалим временную рамку и добавим чёрную черту слева (обратите внимание, что побочным явлением при этом стало удвоением отступа от края <div>, придется исправить и это).

На (рис. 10) мы видим меню в Internet Explorer, осталось только создать эффект изменения фона при наведении указателя мыши.

(рис. 10) Левая вертикальная черта появилась, но фон все еще не меняется при наведении указателя.

До появления CSS2, добавлять изменение облика при наведении указателя мыши можно было только к ссылкам. Использование псевдокласса :hover в селекторе позволяет задавать шаблон поведения при наведении указателя мыши для разных объектов. Например, вот фрагмент CSS-кода для смены синего фона на красный.

Это очень просто, но браузер Internet Explorer не поддерживает эффекты наведения указателя для элементов ссылки, отличающихся от <а>.

К счастью, Питер Недерлоф (Peter Nederlof) создал файл поведения для Internet Explorer, который устраняет этот дефект. Файл называется csshover.htc и загрузить его можно по адресу: http://www.xs4all.nl/~peterned/hovercraft.html.

Вот как можно добавить его к CSS:

В данном случае я создал новый каталог CSS в том же каталоге, где располагаются файлы для этого примера, и поместил в него файл csshover.htc. Если вы расположите файл в другом каталоге, придется исправить URL.

С помощью файла csshover.htc, добавленного таким образом, браузер Internet Explorer сможет реагировать на наведение указателя мыши не только на ссылки.

Теперь фон пунктов меню будет меняться во всех браузерах. Наше горизонтальное меню готово. Вот полный код.

На следующем уроке… Мы возведем наше горизонтальное меню на следующий уровень - добавим раскрывающиеся меню.