Создаём можное выпадающее меню на CSS

css меню

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


Перед тем, как мы приступим к созданию выпадающего меню на CSS, я Вам рекомендую просмотреть демо-результат работы.

Также скачайте исходники себе на компьютер! Итак, начнем создавать выпадающее меню на css.

css меню

Шаг 1: Строим строку навигации

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Теперь применим CSS. Контейнер для меню будет фиксированной ширины и отцентрирован, задав значения left:auto и right:auto свойству margin

Сейчас посмотрим, как мы можем его улучшить, используя CSS 3. Мы должны использовать разный синтаксис для Webkit браузеров (таких как Safari) и для Mozilla браузеров (таких как Firefox).
Для закругления углов синтаксис будет такой:

Чтобы сохранить согласованность при выборе цвета, можно воспользоваться сервисом Facade, он поможет выбрать более светлый или более темный цвет, чем цвет основного фона.

В первый строке устанавливается обычный фоновый цвет для старых браузеров. Во второй и третьей строке используется градиент от верха страницы к низу используя переход цвета от #0272a7 к #013953.

Сейчас мы можем добавить более темную и изысканную границу, применив рамку и тень к нашему блоку меню. Синтаксис одинаковый для всех браузеров: первое значение – горизонтальное смещение; вторая – вертикальное смещение; третья – радиус размытия (маленькое значение делает его проще, в нашем примере он будет 1рх). Мы установили все смещения в 0, таким образом, значение размытия будет равномерным по всей границе.

Вот полный CSS код контейнера #menu.

Добавляем стили к пунктам меню

Начнем со всех пунктов меню, выровненных по левому краю и с отступом между ними margin-right (padding будет необходим для наведенного состояния пункта меню):

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

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

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

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

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

К ссылкам мы применим тень от текста, используя простой синтаксис: первое и второе значение это вертикальный и горизонтальный отступы для тени (1рх например). Третье значение – размытие (то же 1 рх). Затем назначаем черный цвет для тени.

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

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

Наконец, нам нужен индикатор того, что данный пункт меню содержит выпадающие подпункты. В качестве такого индикатора будем использовать фоновое изображение стрелки правее текста ссылки. Отпозиционируем его вправо, применим padding-right, и дадим небольшой отступ сверху. Отступ сверху в наведенном состоянии будет 7рх, а не 8рх, потому что у нас есть border в 1 рх вокруг наведенного пункта меню.

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

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

Результат выглядит так:

css меню

ШАГ 2: Делаем выпадающие подпункты

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

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

Для нашего «мега» меню вместо вложенных списков мы будем использовать div – ы, что будет работать как несколько вложенных списков.

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

Контейнеры выпадающих подпунктов

Ширина контейнеров зависит от его содержимого. Я выбираю имя тега в зависимости от числа столбцов, содержащихся в контейнере.

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

Фоновый цвет у контейнера выпадающих подпунктов будет такой же как и у выбранного пункта меню. Современный браузеры показывают градиент от #ЕЕЕЕЕЕ (такой же как и у пункта меню) до #BBBBBB.

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

Проиллюстрируем это. Посмотрите, как это выглядит, если оставить закругленный левый верхний угол:

css меню

А вот так выглядит у нас:

css меню

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Как вы видите подпункт аккуратно приклеен в своему основному пункту меню.

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

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

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

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

То, что должно получиться, использовав вышеуказанный код.

css меню

ШАГ 3: Создание столбцов выпадающего контейнера

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

Использование столбцов

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

Выглядит это так:

css меню

ШАГ 4: Выравнивание вправо

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

Чтобы сделать это добавляем новый класс .menu_right в родительский список пунктов. Таким образом, мы переустановим right margin и float направо.

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

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

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

Должно выглядеть так.

css меню

ШАГ5: Добавляем контент и стили к выпадающим пунктам

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

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

Давайте начнем с базовых стилей для абзацев и заголовков.

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

Стили для списков

Украсим наши списки. Мы хотим переопределить такие стили как фоновый цвет или границы списков, которые используются в основном меню (навигационной панели).

Стили для картинок

И сделаем абзацы с изображениями слева

Текстовые блоки

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

Переустанавливаем стили для списков

Наконец, воспользуемся другим путем для добавления стилей к спискам, используя опять-таки CSS 3.

ШАГ 6: Совместимость браузеров и IE 6

Все браузеры поддерживают наведенное состояние мыши на тегах не являющимися ссылками за исключением IE 6, поэтому наше «мега» меню не будет работать с этим старым браузером. Мы можем исправить эту проблему благодаря файлу, который поддерживает данный функционал. Вы можете найти его тут и использовать в условном комментарии только для IE 6. Подробное пояснение можно найти в этой статье.

Для полноценного IE используем следующий код:

Я использовал несколько PNG файлов в данной статье, а каждый знает, что IE 6 не поддерживает прозрачности. Чтобы это исправить есть множество решений.

Конвертировать их в формат GIF или PNG-8
Использовать скрипт
Назначить фоновый цвет отличный от серого, например с TweakPNG

Из этих решений вы можете выбрать то, которое больше вам подходит.

Теперь давайте посмотрим на полный пример.

Окончательный код

HTML:

CSS:

Заключение

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

Автор: Guillaume Marty

Перевод и редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Источник: http://net.tutsplus.com

E-mail: contact@webformyself.com

Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения

P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Учебник по основам CSS для начинающих

Прямо сейчас изучи CSS с нуля!

Смотреть курс

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (23)

  1. Наталья

    Дорогие ребята, Виктор, Андрей и вся ваша команда!
    Приятно, что вы так много делаете полезной и нужной работы по обучению новичков, так сказать, приобщаете неучей к работе в интернете. Все хорошо, все замечательно, только уж слишком много грамматических ошибок в текстах. Если хотите, я бы могла проверять все ваши тексты, на наличие ошибок, за отдельную плату.
    Ваш ответ жду на E-mail: Natalochka-yralochka73@yandex/com
    С уважением, Наталья.

    • RohViktor

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

  2. Андрей

    Вот о таком меню я мог только мечтать, начну пробовать создать его в срочном порядке!
    Если получится поменяю на своих сайтах! Большущее Вам спасибо, за такую инфу!!!
    Когда поменяю отпишусь!

  3. Андрей

    1.-moz-border-radius: 10px /* Пропущена точка с запятой ;*/
    2.-webkit-border-radius: 10px;
    3.border-radius: 10px;

  4. Сергей

    Наталья!
    А сколько Вы заплатили за полученную информацию, чтобы просить «отдельную плату» за редакторство?
    Да и «слишком много» — перебор!
    Приятно, что такие люди как Вы признают себя «неучами».
    Извиняюсь за колкость, но достали «грамотеи».
    Ведь можно было приватно подсказать!!!

  5. Albert

    Спасибо!
    Указывайте ссылку на первоисточник КОНКРЕТНО, а не на главную сайта. Хотел посмотреть оригинал, так и не нашёл.

  6. iHizgil

    Спасибо за то, что привели полный код!
    Смотрел на других сайтах-только запутали.Приводят сначала один код, например, так выглядит обычное меню: , но нам нужно мега меню и так во всем.Хотел отказаться, но было жалко: менюшка замечательно вписывалась в стиль сайта, а из-за некоторых я чуть её не потерял.Спасибо вам!

  7. Маша

    Огромное спасибо, очень помогло)

  8. freekir

    А в IE 6 должно работать? Просто я пробую, меню само отображается, а выпадающие списки нет. Вот думаю у меня косяк или этот способ не под IE 6.

  9. Евгений

    Замечательный урок. Я применил на одном из сайтов. Скажите , а что нужно изменить, чтобы сделать такое меню в footer-е? чтобы открывалось вверх?

  10. Семён.

    Спасибо за урок! Подскажите, как через CSS отключить часть кода в HTML, аналог , что бы подправить немного меню под себя?

    • Андрей Кудлай

      Например, с помощью свойства display и его значения none, которые прописываются для скрываемого элемента.

      • Семён.

        Подскажите, как тут сделать ориентацию по сайту, т.е. на какой странице находишься?

      • Семён

        А как тут сделать что бы было видно на какой странице ты находишься?

        • Андрей Кудлай

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

  11. Марина

    Спасибо за урок, все подробно описано, можно создавать самим по образцу. Но никак не могу разобраться, как подключить файл index.html этого меню в header моего сайта. Очень прошу помогите, а уже замучилась!
    Заранее спасибо, Марина.

  12. Максим

    не смыслы в свойствах класса указывать float и display: inline, ибо когда указан флоат, то для элемента автоматом задается display: block

  13. Андрей

    Хочу сказать вам огромное спасибо. Очень доволен результатом)

  14. Инкогнито

    Полностью не дочитал, но то что мне нужно было — нашел. Одна идейка сильно помогла, очень благодарен))

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree