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

Для начала нам надо создать контейнер меню, для контейнера меню мы определяем фиксированную ширину и центрируем его, устанавливая левое и правое поле в значение «auto», смотрим:

Теперь улучшим его с помощью свойств CSS3. Нужно использовать различные префиксы для разных браузеров (для семейства WebKit и семейства Mozila). Для скругленных углов правила будут такие:

Для фона мы будем использовать градиенты и цвета, для отображения фона в старых браузерах:

Первая строка устанавливает простой цвет фона (для старых браузеров), вторая и третья строки создают градиент по направлению сверху вниз с использованием двух цветов  : #0272a7 и #013953.

Теперь мы можем добавить темную границу и «заполировать» дизайн с помощью фальшивой вложенной рамки, созданной с помощью свойства “box-shadow”. Синтаксис одинаковый для всех совместимых браузеров: первое значение — горизонтальное смещение, второе — вертикальное смещение, третий — радиус размытия (маленькое значение делает тень более четкой; в нашем примере установлено значение 1 пиксель). Мы также устанавливаем все смещения в 0, так что размытие создает единообразную светлую рамку:

И вот так выглядит окончательный вид CSS:

Теперь не менее важный шаг, нам нужно создать навигацию на нашем меню:

И так, начинается самое интересное, пожалуй, в нашем меню, это создание стилей для пунктов меню, выравниваем все пункты меню влево и оставляем пространство между ними с помощью свойства margin-right ( свойство padding нужно для состояния hover):

Для состояний hover и выдвинутого меню используется серая цветовая схема для фона: основной цвет — светло серый (#F4F4F4), а градиент идет сверху вниз от цвета #F4F4F4 до  (#EEEEEE). Скругленные углы применяются только сверху, так как выпадающая часть будет соединяться с пунктом меню.

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

Затем нам надо округлить углы только сверху, делать это мы будем следующим образом:

Вот так будет выглядеть полный набор CSS для пункта меню в состоянии hover:

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

Затем набор правил CSS для ссылок:

В состоянии hover ссылки имеют серый фон, текст ссылок будет иметь более темный цвет (#161616) и белый цвет для теней текста:

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

CSS, требуемый нами код имеет следующий вид:

Вот такой результат у нас должен получится:

Если все вы делаете правильно, то далее вам стоит сделать кодировать выпадающее меню частично, “Классическое” выпадающее меню обычно содержит список вложенный в родительский элемент и выглядит следующим образом:

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

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

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

Фоновый цвет такой же, как и у пунктов меню. Новые браузеры будут выводить градиент от цвета #EEEEEE наверху до цвета #BBBBBB внизу:

Мы снова используем скругленные углы, за исключением левого верхнего угла:

Часть кода CSS для контейнеров  выглядит так:

А вот пример того, что сделали мы:

Теперь выпадающий контейнер отлично стыкуется с пунктом меню.

Для правильного вывода контейнеров мы должны задать им ширину:

А реакция на прохождение курсора мыши над пунктом меню осуществляется очень просто:

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

А выглядеть оно будет так:


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

Вот пример выпадающего контейнера с несколькими колонками. В данном примере мы используем различные комбинации всех видов колонок:

А вот так он будет выглядеть:

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

Для выполнения поставленной задачи мы используем новый класс .menu_right для пунктов меню. Таким образом установим правое поле и смещение вправо:

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

Теперь сделаем появление выпадающего пункта справа:

Теперь можно использовать установки для нашего меню:

Вот как будет выглядеть наш маленький пример:

Теперь начнем с базового стиля для параграфов и заголовков:

Будем использовать прелестный голубой цвет для ссылок в выпадающей части:

Теперь используем стиль для списков, возьмем за основу уже созданный стиль списков и подправим его: used in the navigation bar :

Используем теперь стиль для изображений:

И создадим стиль для параграфа с изображением слева:

Чтобы украсить наше меню используем прямоугольное выделение текста:

Теперь списки выпадающей части:

Internet Explorer, как известно, этот «интересный» браузер не воспринимает градиент и png, по этому вот маленькое решение данной проблемы:

И ВОТ ОКОНЧАТЕЛЬНЫЙ ВИД НАШЕГО КОДА:

Вот наконец-то готово наше меню, можно просмотреть и скачать исходники в начале уроке.

На главную