Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Как создать отменное CSS3 мега-меню с выпадающим списком

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called CSS3 Mastery.
Build Awesome Practical CSS3 Buttons

Russian (Pусский) translation by Alex Bogdanov (you can also view the original English article)

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

Шаг1: Создаем навигационную панель

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

Создаем контейнер для меню

Применим обычные стили CSS. Для контейнера меню мы зададим фиксированную ширину и расположим его по центру, задав левому и правому margin значения "auto".

Теперь, посмотрим, что мы можем сделать с помощью функционала CSS3. Используем различный синтаксис для браузеров на основе Webkit (Safari) и для браузеров на основе Mozilla (таких как Firefox).

Закругляем углы:

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

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

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

Вот конечный код для контейнера #menu:

Задаем стили элементам меню

Сперва отцентрируем все элементы меню по левому краю и сделаем им отступ при помощи margin-right (padding нам понадобится для эффекта на hover):

Для эффекта на hover и выпадающего меню я выбрал серую цветовую схему на фон.

Нашим запасным цветом будет светлый серый цвет (#F4F4F4), а градиент мы зададим от верха (#F4F4F4) до низа (#EEEEEE). Закругленные края будут применены только к верхним краям, т.к. наше выпадающее меню появитсясразу же под элементами меню.

Левый и правый padding будет немного меньше т.к. мы используем border в 1px, появляющийся при hover. Если мы не изменим padding, элементы меню сдвинутся на два пикселю вправа из-за добавленных левой и правой границ при наведении мыши на контейнер. Чтобы этого избежать, удалим 1px от padding с обеих сторон, так что теперь у нас стало 9 пикселей, а не 10.

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

Вот конечный CSS код для элементов меню при hover:

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

Вот конечный CSS код для ссылок:

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

Наконец, нам нужен способ указать, присутствует ли выпадающее меню или нет. Мы это сделаем с помощью простой иконки стрелочки на фоне, она будет расположена справа при помощи padding и сверху margin, которые разместят стрелочку в нужном месте. При hover верхний margin установится на 7px вместо 8, т.к. у нас имеется border, появляющийся при наведении мыши (в ином случае стрелочка будет сдвигаться на один пиксель вниз при наведении):

Вот конечный код для контейнера меню и ссылок; только элемент "home" пока что не имеет никакого выпадающего меню:

Результат:

Building a CSS3 Mega Drop Down Menu

Шаг 2: создаем выпадающее меню

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

Основная структура

Для нашего мега-меню вместо вложенных списков используем обычные DIV, которые будут работать как и любые другие вложенные элементы:

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

Контейнеры выпадающего меню

Контейнеры разного размера будут содержать весь контент. Я задал имена сообразно с количеством колонок, которое элементы содержат.

Чтобы спрятать выпадающее меню, используем posaition:absolute с отрицательным левым margin:

Наш запасной цвет фона останется тем же, что мы использовали для элементов меню. Современные браузеры отобразят градиент, который начинается с #EEEEEE наверху (чтобы совпасть с градиентом родительского элемента) к #BBBBBB внизу.

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

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

Building a CSS3 Mega Drop Down Menu

Наш пример:

Building a CSS3 Mega Drop Down Menu

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

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

А чтобы выпадающее меню появлялось при hover, напишем:

Используем контейнеры выпадающего меню

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

Вот превью кода сверху:

Building a CSS3 Mega Drop Down Menu

Шаг 3: Создаем колонки внутри контейнера выпадающего меню

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

Используем колонки

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

Превью кода:

Building a CSS3 Mega Drop Down Menu

Шаг 4: Центрируем по правому краю

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

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

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

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

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

И небольшое превью кода:

Building a CSS3 Mega Drop Down Menu

Шаг 5: Добавляем контент и задаем стили

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

Основные стили

Начнем с основных стилей для p и заголовков:

Можем задать красивый синий цвет ссылкам выпадающего меню:

Задаем стили спискам

Переделаем наши списки; нужно перезадать некоторые стили, такие как background-color и border, которые мы использовали в навигационной панели:

Задаем стили изображениям

И создаем параграф с картинкой по левому краю:

Контейнеры с текстом

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

Задаем стили спискам

В завершение вот еще один способ изменить ваши списки, использую CSS3:

Шаг 6: справляемся с кросс-браузерностью и IE6

Все браузеры понимают hover на неякорные тэги... кроме Internet Explorer 6; так что наше мега-меню все еще не работает в этом браузере. Решим это с помощью специального файла, который как раз справляется с это проблемой. Вы можете найти его здесь, использовать условные комментарии специально для IE6; больше информации в этой статье от CSS-Tricks.

Чтобы применить только к IE6 используем следующий код:

Я использовал парочку PNG файлов в этом уроке, а все знают, что IE6 не поддерживает прозрачность, так что придется идти по другому пути:

Дам вам выбрать один из техЮ что вам подойдут. Теперь давайте взглянем на весь документ.

Конечный результат

HTML

CSS

Дополнительная информация по теме

Заключение

Надеюсь вы получили удовольствие от этого урока по созданию мега-меню. Спасибо, что прошли этот путь!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.