Создание раскрывающихся меню…

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

Раскрывающиеся меню на базе CSS не будут работать в браузере Internet Explorer для Mac. Тем не менее, я покажу, как использовать CSS и создать работающее меню и для этого браузера.

На этом уроке мы предположим, что каждому пункту нашего горизонтального меню соответствует определенная страница. Нам просто потребуется указать URL вместо символов # в теге href каждой ссылки.

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

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

(рис. 1) Вот наше готовое раскрывающиеся(выпадающее) меню.

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

Следует отметить несколько моментов, связанных с этим кодом:

1. Ни один элемент <ul> или <li> не использует идентификаторы или классы. Единственным отличием этого списка от обычного вложенного является содержащий <div> с идентификатором menunav, позволяющий применять нужные CSS-правила к целевому списку.

2. Этот код схож с разметкой горизонтального меню из предыдущего урока, но здесь добавлен список второго уровня, вложенный в каждый пункт меню. Очень важно правильно вложить список - необходимо поместить весь вложенный список от <ul> до </ul> внутрь пункта родительского списка, непосредственно перед закрывающим тегом </li> пункта списка.

3. Значения href просто заменены на #, в реальном мире необходимо заменить # фактической ссылкой на имеющуюся страницу.

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

Давайте теперь взглянем на (рис. 2).

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

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

Например, селектор ul li ul {...CSS правила...} предназначается только для элемента <ul>, содержащегося внутри элемента <li> родительского списка - как раз то, что нам нужно.

Как видно в следующем фрагменте кода, всего три простых объявления CSS помогут достичь нужного результата.

Результат показан на (рис. 3).

(рис. 3) Меню начинает обретать форму.

Если мы зададим ширину <ul> вложенного списка и затем заставим элементы <li> внутри него занимать 100% ширины, они образуют вертикальное меню. Без этого короткие слова будут располагаться на одной строке, и ширина каждого пункта будет разной.

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

Теперь давайте взглянем на (рис. 4).

(рис. 4) Наше раскрывающееся меню почти готово.

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

Посмотрите на (рис. 5).

(рис. 5) Раскрывающееся меню размещено точно под родительским пунктом.

За исключением таких проблем с отображением меню в Internet Explorer, как отсутствующая верхняя граница и наследуемая от предыдущего трюка левая граница <ul>, раскрывающееся меню готово и мы можем обратить внимание на то, как сделать его видимым только при наведении указателя мыши на родительский пункт меню.

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

Вначале, спрячем раскрывающееся меню, когда указатель мыши на него не наведен:

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

Этот селектор указывает, что раскрывающийся список <ul> должен отображаться только тогда, когда на родительский пункт списка <li> наведен указатель мыши.

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

Для этого сгруппируем второй селектор с объявлением display:block следующим образом:

Теперь меню отображается при наведении на родительский пункт и на само вложенное меню (рис. 6).

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

Теперь добавим трюк для Internet Explorer:

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

Для устранения этого недостатка нам потребуется сделать блочными элементами все родительские ссылки:

Наше меню приняло вид, представленный на (рис. 7).

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

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

Нужно удалить из кода строку:

Итак, в нашем распоряжении есть раскрывающееся меню, созданное «с нуля» и без использования JavaScript.

Если текст в пункте меню переносится на вторую строку, он отображается также с отступом и не касается границы ячейки.