мега меню html css
Адаптивное выпадающее мега меню на CSS
Урок посвящён созданию адаптивного выпадающего меню шириной во всю ширину страницы или блока навигации, на чистом CSS. Мега меню обычно используется на сайтах интернет-магазинов и любых других сайтах электронной коммерции, так как оно является оптимальным способом для организации и отображения содержимого.
Общий принцип создания мега меню не отличается от создания обычного горизонтального выпадающего меню. Разница заключается лишь в том, что относительное позиционирование получает не каждый элемент списка, в который вкладывается выпадающее меню, а меню верхнего уровня или любой другой блок-контейнер. В этом случае мы можем задать для выпадающего меню ширину 100%, которая будет равна ширине меню верхнего уровня, а не ширине элемента списка. Для выпадающего меню обычного размера нужно приписать класс и задать для него относительное позиционирование.
Каждый столбец внутри выпадающего меню представляет собой элемент списка, содержащий внутри заголовок (опционально) и вложенное меню.
Рис. 1. Контейнер для колонок мега меню 
Рис. 2. Вложенное меню
Высота каждой колонки может разной и если вы добавите фон или границы для вложенного меню, то разница в высоте будет заметна. Поэтому, чтобы решить эту проблему, подключим Jquery плагин matchHeight.
Необходимые файлы раздела head
Добавим адаптивность для мобильных устройств
Активация плагина matchHeight
Эффекты для появления мега меню
В приведённом примере меню появляется, скользя снизу-вверх. Чтобы разнообразить свои проекты, можно воспользоваться одним из следующих эффектов:
Узнайте, как создать мега-меню (раскрывающееся меню с полной шириной в навигационной панели).
Мега меню
Создать мега меню
Создайте раскрывающееся меню, которое появляется, когда пользователь перемещает указатель мыши на элемент внутри панели навигации.
Шаг 1) добавить HTML:
Пример
Mega Menu
Category 1
Category 2
Category 3
Пример как работает
Используйте элемент контейнера (например,
Шаг 2) добавить CSS:
Пример
/* Navbar container */
.navbar <
overflow: hidden;
background-color: #333;
font-family: Arial;
>
/* Links inside the navbar */
.navbar a <
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
>
/* The dropdown container */
.dropdown <
float: left;
overflow: hidden;
>
/* Dropdown content (hidden by default) */
.dropdown-content <
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
>
/* Create three equal columns that floats next to each other */
.column <
float: left;
width: 33.33%;
padding: 10px;
background-color: #ccc;
height: 250px;
>
/* Style links inside the columns */
.column a <
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
>
/* Add a background color on hover */
.column a:hover <
background-color: #ddd;
>
/* Clear floats after the columns */
.row:after <
content: «»;
display: table;
clear: both;
>
Пример как работает
Мы создали стиль навигационной панели и навигационные ссылки с фоном-цвет, обивка и т.д.
Мы создали стиль выпадающего кнопки с фоном-цвет, обивка и т.д.
.dropdown-content класс содержит фактическое раскрывающееся меню. Он скрыт по умолчанию и будет отображаться при наведении курсора (см. ниже). Он позиционируется, чтобы быть видимым прямо под кнопкой раскрывающегося списка, и ширина установлена на 100%, чтобы охватить весь экран.
Вместо использования границы мы использовали box-shadow свойство, чтобы выпадающее меню выглядело как «карточка». Мы также используем z-index для размещения раскрывающегося списка перед другими элементами.
:hover селектор используется для отображения раскрывающегося меню, когда пользователь перемещает указатель мыши на кнопку раскрывающегося списка.
.column классы используются для создания трех столбцов, плавающих рядом друг с другом в раскрывающемся меню (для отображения различных категорий).
Адаптивное мега меню
Пример
Совет: Перейдите в наш CSS раскрывающегося меню учебник, чтобы узнать больше о раскрывающихся списках.
Совет: Откройте раскрывающееся меню, чтобы узнать больше о всплывающих раскрывающихся списках
Совет: Перейдите на наш CSS навигации Учебник, чтобы узнать больше о NavBars.
Совет: Перейдите на нашу отзывчивую верхнюю навигацию, чтобы узнать о том, как создать адаптивную навигационную панель.
Большой обзор красивых многоуровневых меню с codepen
На Сodepen появляется много хороших решений от разных специалистов, и я считаю, что лучшие из них нужно собирать в одном месте. Поэтому 2 года назад начал сохранять у себя на компьютере интересные скрипты по разным тематикам.
Раньше я их выкладывал в группе продукта облачной IDE mr. Gefest, это были сборки из 5-8 решений. Но теперь у меня стало скапливаться по 15-30 скриптов в разных тематиках (кнопки, меню, подсказки и так далее).
Такие большие наборы следует показывать большему числу специалистов. Поэтому выкладываю их на Хабр. Надеюсь они будут Вам полезны.
В этом обзоре мы рассмотрим многоуровневые меню.
Flat Horizontal Navigation
Красивая навигационная панель с плавно появляющимся подменю. Код хорошо структурирован, используется js. Судя по использованным возможностям, работает в ie8+.
http://codepen.io/andytran/pen/kmAEy
Material Nav Header w/ Aligned Dropdowns
Адаптивная панель ссылок с двухколонным подменю. Все сделано на css и html. Применены css3 селекторы, которые не поддерживаются в ie8.
http://codepen.io/colewaldrip/pen/KpRwgQ
Smooth Accordion Dropdown Menu
Стильное вертикальное меню с плавно раскрывающимися элементами. Используется transition, transform js-код.
http://codepen.io/fainder/pen/AydHJ
Pure CSS Dark Inline Navigation Menu
Темная вертикальная навигационная панель с иконками из ionicons. Применяется javascript. В ie8 скорее всего будет работать без анимации.
http://codepen.io/3lv3n_snip3r/pen/XbddOO
Pure CSS3 Mega Dropdown Menu With Animation
Стильное меню с двумя форматами вывода: горизонтальным и вертикальным. Используются иконки и css3-анимация. В ie8 точно будет ужасно выглядеть, но зато в других браузерах все круто.
Ссылка на вертикальную: http://codepen.io/rizky_k_r/full/sqcAn/
Ссылка на горизонтальную: http://codepen.io/rizky_k_r/pen/xFjqs
CSS3 Dropdown Menu
Горизонтальное меню с большими элементами и выпадающим списком ссылок. Чистый и минималистичный код без js.
http://codepen.io/ojbravo/pen/tIacg
Simple Pure CSS Dropdown Menu
Простое, но стильное горизонтальное меню. Используется font-awesome. Все работает на css и html, без js. В ie8 будет работать.
http://codepen.io/Responsive/pen/raNrEW
Bootstrap 3 mega-dropdown menu
Отличное решение для интернет-магазинов. Отображает несколько уровней категорий и большие изображения (например, товар по акции). В его основе лежит boostrap 3.
http://codepen.io/organizedchaos/full/rwlhd/
Flat Navigation
Стильная навигационная панель с плавным подменю. В старых браузерах отобразится с проблемами.
http://codepen.io/andytran/pen/YPvQQN
3D nested navigation
Responsive Mega Menu — Navigation
Горизонтальное адаптивное меню. Выглядит неплохо, но мобильная версия немного «хромает». Используется css, html и js.
http://codepen.io/samiralley/pen/xvFdc
Pure Css3 Menu
Оригинальное меню. С простым и чистым кодом без js. Применяйте для «вау» эффектов.
http://codepen.io/Sonick/pen/xJagi
Full CSS3 Dropdown Menu
Красочное выпадающее меню с одним уровнем вложенности. Используются иконки из font-awesome, html и css.
http://codepen.io/daniesy/pen/pfxFi
Css3 only dropdown menu
Достаточно неплохое горизонтальное меню с тремя уровнями вложенности. Работает без js.
http://codepen.io/riogrande/pen/ahBrb
Dropdown Menus
Минималистичное меню с оригинальным эффектом появления вложенного списка элементов. Радует, что это решение тоже без javascript.
http://codepen.io/kkrueger/pen/qfoLa
Pure CSS DropDown Menu
Примитивное, но эффективное решение. Только css и html.
http://codepen.io/andornagy/pen/xhiJH
Pull Menu — Menu Interaction Concept
Интересный концепт меню для мобильного телефона. Я такого ещё не видел. Используется html, css и javascript.
http://codepen.io/fbrz/pen/bNdMwZ
Make Simple Dropdown Menu
Чистый и простой код, без js. В ie8 точно работать будет.
http://codepen.io/nyekrip/pen/pJoYgb
Pure CSS dropdown [work for mobile touch screen]
Решение неплохое, но слишком уж много используется классов. Радует, что нет js.
http://codepen.io/jonathlee/pen/mJMzgR
Dropdown Menu
Симпатичное вертикальное меню с минимальным javascript-кодом. JQuery не используется!
http://codepen.io/MeredithU/pen/GAinq
CSS 3 Dropdown Menu
Горизонтальное меню с дополнительными подписями может хорошо украсить Ваш сайт. Код простой и понятный. Javascript не применяется.
http://codepen.io/ibeeback/pen/qdEZjR
KVdKQJ (автор очень долго думал над названием)
Красивое решение с большим количеством кода (html, css и js). Придумано 3 формата подменю. Для интернет-магазинов решение хорошо подходит.
http://codepen.io/martinridgway/pen/KVdKQJ
CSS3 Menu Dropdowns (особенное решение)!
Темное горизонтальное меню с тринадцатью (13) вариантами анимации! Обязательно советую ознакомиться, пригодится в быту.
http://codepen.io/cmcg/pen/ofFiz
П.С.
Надеюсь, Вам понравилась сборка из 23 решений. Если хотите и дальше их читать, то пройдите снизу опрос.
Всем приятной работы.
Создаем мега меню для сайта с помощью CSS3
В данном уроке мы рассмотрим как создать мега меню для сайта, с красивыми выпадающими окнами и плавной анимацией. Стиль меню будет выполнен в минималистическом стиле, при этом будет приведено в пример четыре варианта меню с различной структуризацией и вариантом исполнения. Такое меню очень легкое в весе, легко устанавливается и поддерживает не только современные браузеры но и старые, такие как старый ослик IE. В исходниках будут вложены различные стили для навигации, благодаря им Вы сможете легко изменить цветовую палитру.
Много различным бесплатных шаблонов вы можете найти на сайте наших партнеров, также имеются и премиум шаблоны с круглосуточной техподдержкой и помощью в настройке:
Ранее мы уже уделяли данному направлению различные уроки, но данная навигация станет по настоящему хорошим дополнением для вашего ресурса. Практичность, цветовое разнообразие и быстрота работы весьма порадует. И так, давайте приступим.
Шаг 1. HTML
Разметка состоит из контейнера в котором заключены команды вызова пунктов меню с присвоенными к ним ссылками и подписями, также определяем каждый отдельный элемент списка атрибутом li:
Как создать отменное CSS3 мега-меню с выпадающим списком
Часто используемые на сайтах электронной коммерции или на сильно масштабируемых сайтах, мега-меню становятся все более и более популярны, т.к. они предлагают эффективные решения, когда необходимо поместить много контента, сохраняя чистую разметку. В этом руководстве мы узнаем, как создать кросс-браузерное мега-меню, на чистом 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» пока что не имеет никакого выпадающего меню:
Шаг 2: создаем выпадающее меню
Классическое выпадающее меню обычно содержит список вложенный в родительский элемент и выглядит следующим образом:
Основная структура
Для нашего мега-меню вместо вложенных списков используем обычные DIV, которые будут работать как и любые другие вложенные элементы:
Это базовая структура выпадающего меню. Идея в том, чтобы суметь вставить любой контент, например, параграфы, картинки, кастомные списки или форму обратной связи, но при этом организованный в колонки.
Контейнеры выпадающего меню
Контейнеры разного размера будут содержать весь контент. Я задал имена сообразно с количеством колонок, которое элементы содержат.
Чтобы спрятать выпадающее меню, используем posaition:absolute с отрицательным левым margin:
Наш запасной цвет фона останется тем же, что мы использовали для элементов меню. Современные браузеры отобразят градиент, который начинается с #EEEEEE наверху (чтобы совпасть с градиентом родительского элемента) к #BBBBBB внизу.
Мы вновь используем закругленные края, кроме как для левого верхнего:
Чтобы показать, давайте взглянем, как бы это выглядело, если бы мы не придали значения этой детали:
Как видите, выпадающее меню отлично прикладывается к своему родительскому элементу.
Чтобы получить отличный контейнер выпадающего меню, нам нужно задать ширину для каждого:
А чтобы выпадающее меню появлялось при hover, напишем:
Используем контейнеры выпадающего меню
Наши классы готовы, мы теперь можем включить их в меню. Мы используем их все, начиная с контейнера с пятью колонками, и заканчивая контейнером с одной:
Вот превью кода сверху:
Шаг 3: Создаем колонки внутри контейнера выпадающего меню
Теперь, когда контейнеры готовы, создадим внутри них колонки с увеличивающимся размером, следуя принципу стеки 960.
Используем колонки
Вот пример выпадающего контейнера, содержащего несколько колонок. В этом примере у нас несколько комбинаций, использующих разные виды колонок:
Шаг 4: Центрируем по правому краю
Давайте посмотрим, как мы можем выровнять наше меню и выпадающие списки по правому краю навигационной панели; не только элементы меню, но и выпадающий контейнер тоже должен изменить свое место.
Последнее, но не менее важное: мы хотим, чтобы выпадающее меню появлялось справа, чтобы этого добиться, используем наш новый класс и переназначим значение left, прикрепив \лемент к правому краю:
Теперь все готово для использования в меню:
И небольшое превью кода:
Шаг 5: Добавляем контент и задаем стили
Теперь, когда у нас готова вся структура, добавим столько контента, сколько пожелаем: текст, списки, изображения и т.д.
Основные стили
Начнем с основных стилей для p и заголовков:
Можем задать красивый синий цвет ссылкам выпадающего меню:
Задаем стили спискам
Переделаем наши списки; нужно перезадать некоторые стили, такие как background-color и border, которые мы использовали в навигационной панели:
Задаем стили изображениям
И создаем параграф с картинкой по левому краю:
Контейнеры с текстом
Чтобы выделить некоторый контент, вот пример темного контейнера с закругленными углами и слабой тенью внутри:
Задаем стили спискам
В завершение вот еще один способ изменить ваши списки, использую CSS3:
Шаг 6: справляемся с кросс-браузерностью и IE6
Все браузеры понимают hover на неякорные тэги. кроме Internet Explorer 6; так что наше мега-меню все еще не работает в этом браузере. Решим это с помощью специального файла, который как раз справляется с это проблемой. Вы можете найти его здесь, использовать условные комментарии специально для IE6; больше информации в этой статье от CSS-Tricks.
Чтобы применить только к IE6 используем следующий код:
Я использовал парочку PNG файлов в этом уроке, а все знают, что IE6 не поддерживает прозрачность, так что придется идти по другому пути:
Дам вам выбрать один из техЮ что вам подойдут. Теперь давайте взглянем на весь документ.
Конечный результат
Дополнительная информация по теме
Заключение
Надеюсь вы получили удовольствие от этого урока по созданию мега-меню. Спасибо, что прошли этот путь!