Меню

Меню — это список ссылок на страницы, поэтому и размечают его наиболее часто с помощью списков.

вертикальное меню

В качестве контейнера будем использовать список, добавим ему свой CSS-класс. Каждый браузер по умолчанию отображает списки с внутреними и внешними отступами, а также добавляет маркеры к пунктам списка. Для правильного отображения меню нужно обнулить все отступы у списка, а также убрать маркеры. Маркерами списков управляет свойство list-style. Маркеры исчезнут, если ему задать значение none.  Обычно контейнер меню выделяют рамками или фоном. Чтобы пункты меню не прилипали к границам контейнера, добавляют внутренние отступы. В зависимости от дизайна сайта также добавляют внешние отступы и задают ширину. Простейший способ оформить пункты меню — добавить между ними отступы и задать стили ссылок. Хорошим тоном считается задавать стили ссылок для всех состояний: по умолчанию, посещенная, при наведении и щелчке. Но для этого дизайнер должен продумать и отрисовать все состояния ссылок.

много уровненное вертикальное меню

Так как уровней в меню может быть очень много, то второй, третий и более глубокие уровни оформляют максимально просто и единообразно. И только первый уровень оформляется более сложно. В HTML многоуровневые меню размечают как обычные многоуровневые списки.

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

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

У горизонтальных меню есть одна неприятность: иногда все пункты меню не влезают в одну строку. При этом всегда может возникнуть ситуация, когда что-то не влезло, её не избежать, но предусматривать такую ситуацию надо. Главное правило — ссылки в меню должны быть доступны и видимы при любых обстоятельствах. Мы можем только уменьшить вред от этого эффекта, сделав так, чтобы пункты меню переносились на новую строку целиком, запретив переносы текста внутри них.

Так как отступы мы задали ссылкам, то и рамки добавим им же. Причем нам нужно задать только рамки слева, а чтобы не было двойной рамки у самого первого пункта, добавим отрицательный внешний отступ слева. Обнулим отступ после элементов списка, но этого недостаточно, так как пробелы после блочно-строчных элементов добавляют небольшой отступ. Чтобы от него избавиться, зададим отрицательный внешний отступ справа элементам списка. Затем оформим состояние ссылки при наведении (добавим фон).

Вертикальное меню с выпадающим подменю

Еще один распространенный тип меню — это меню с выпадающими подменю. Обычно в таких меню только два уровня, но встречаются и многоуровневые, когда из выпадающего подменю может выпадать еще одно и так далее. Разметка таких меню простая — обычный многоуровневый список, но при создании такого меню необходимо использовать абсолютное и относительное позиционирование. Обычно элементам списка li верхнего уровня задают относительное позиционирование, а для выпадающего меню — абсолютное. Затем выпадающее подменю располагают в том месте, куда оно будет «выпадать». Лучше располагать так, чтобы оно немного «нависало» над родительским пунктом. Также нужно установить для подменю z-index больше, чем у родительских пунктов, чтобы подменю располагалось выше и перекрывало их при появлении. Так как абсолютное позиционирование сбрасывает ширину, то можно установить ширину для подменю. Сначала прячем выпадающее подменю по умолчанию, с помощью display: none;. Затем делаем так, чтобы при наведении мыши на пункт меню, внутри которого расположено подменю, оно появлялось. Для этого используем контекстный селектор в сочетании с псевдоклассом :hover и display: block;.

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

Разметка стандартная — двухуровневый список. Алгоритм оформления почти такой же, как и в предыдущем случае. Сначала задаем режимы позиционирования, затем стили для подменю, затем механизм выпадания. Так как мы хотим, чтобы выпадающее меню было вертикальным, то надо изменить селектор .main-menu li на .main-menu > li, чтобы блочно-строчными были только элементы списка верхнего уровня. Оформим выпадающее меню. Во-первых, зададим ширину для подменю. Во-вторых, зададим координаты. Сейчас подменю уже располагается хорошо, поэтому верхнюю координату трогать не будем, а зададим только координату слева. Пункты подменю тоже оформим очень просто. Во-первых, зададим для ссылок рамку со всех сторон, а не только слева. И, во-вторых, добавим отрицательный отступ снизу, чтобы не было двойных рамок.

Иногда нужно сделать так, чтобы выпадающее подменю было открыто по умолчанию (а не только при наведении мыши). Сначала к элементу списка в меню верхнего уровня, где должно быть открыто подменю, добавим класс opened. Затем используем селектор: .main-menu .opened .sub-menu. И в нём пропишем свойство, которое отображает подменю. Очень похоже на выделение активного пункта меню. Кстати, чтобы выделить сам пункт меню с открытым подменю, можно использовать вот такой селектор .main-menu > .opened > a, т.е. «ссылка, которая лежит непосредственно в элементе с классом opened».