мега меню для сайта
Адаптивное выпадающее мега меню на CSS
Урок посвящён созданию адаптивного выпадающего меню шириной во всю ширину страницы или блока навигации, на чистом CSS. Мега меню обычно используется на сайтах интернет-магазинов и любых других сайтах электронной коммерции, так как оно является оптимальным способом для организации и отображения содержимого.
Общий принцип создания мега меню не отличается от создания обычного горизонтального выпадающего меню. Разница заключается лишь в том, что относительное позиционирование получает не каждый элемент списка, в который вкладывается выпадающее меню, а меню верхнего уровня или любой другой блок-контейнер. В этом случае мы можем задать для выпадающего меню ширину 100%, которая будет равна ширине меню верхнего уровня, а не ширине элемента списка. Для выпадающего меню обычного размера нужно приписать класс и задать для него относительное позиционирование.
Каждый столбец внутри выпадающего меню представляет собой элемент списка, содержащий внутри заголовок (опционально) и вложенное меню.
Рис. 1. Контейнер для колонок мега меню 
Рис. 2. Вложенное меню
Высота каждой колонки может разной и если вы добавите фон или границы для вложенного меню, то разница в высоте будет заметна. Поэтому, чтобы решить эту проблему, подключим Jquery плагин matchHeight.
Необходимые файлы раздела head
Добавим адаптивность для мобильных устройств
Активация плагина matchHeight
Эффекты для появления мега меню
В приведённом примере меню появляется, скользя снизу-вверх. Чтобы разнообразить свои проекты, можно воспользоваться одним из следующих эффектов:
Как создать отменное 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 не поддерживает прозрачность, так что придется идти по другому пути:
Дам вам выбрать один из техЮ что вам подойдут. Теперь давайте взглянем на весь документ.
Конечный результат
Дополнительная информация по теме
Заключение
Надеюсь вы получили удовольствие от этого урока по созданию мега-меню. Спасибо, что прошли этот путь!
Мега-Меню В Веб-Дизайне: Новаторство И Классика
Свою популярность большое меню приобрело с ростом числа проектов e-commerce. Оно обладает большим потенциалом и веб-дизайнеры стараются придумывать самые разнообразные способы его использования. Мы расскажем о классических приемах и новаторских идеях в материале ниже.
За прошедшие годы мы уже видели множество разных тенденций в мире веб-дизайна; некоторые уходили в прошлое, некоторые, наоборот, будут еще долгое время использоваться и использоваться. Но каким бы странным это не было, за 2017 год применение некоторых трендов стало чем-то особенным. Иными словами, несмотря на кажущуюся их бесполезность и недолюбливание со стороны пользователей, веб-мастера применяют такие элементы в своих проектах. И что самое занятное, эти проекты получаются успешными.
Одной из таких тенденций является большое выпадающее меню или «мега-меню». Популярное несколько лет назад большее меню, увы, недолговечно, как тренд и элемент. Дизайнеры в большинстве рассматривают данную концепцию во вторую очередь. Но, так или иначе, они до сих пор встречаются и используются. Это десктопные проекты, что также включают в себя и элементы мобильного дизайна. И практически бесконечной популярности этого элемента есть вполне логичное объяснение.
Что ты такое мега-меню?
Вне зависимости от количества новых веяний и веб-сайтов, которые угасают или разгораются вовсю, основное внимание мастеров всегда уделяется улучшению пользовательского опыта или UX. При помощи навигации, будь это полноэкранная или одностраничная прокручиваемая, мы пытаемся удовлетворить два требования: простота использования и удобство работы. Именно поэтому, казалось бы, похожие друг на друга тематически и типически сайты могут иметь совсем разное восприятие у пользователей.
Свою популярность большое меню приобрело с ростом числа проектов e-commerce. И причина в том, что оно сильно отличается от обычных больших выпадающих списков. Иными словами, вместо того, чтобы просто раскрыться вниз, оно расширяется и расширяется, а также имеет много колонок.
Сейчас мегаменю в моде, что ни говори. И посетители одним взглядом на него формируют правильное направление тематики, типа, позиционирования контента на данном сайте. Если мега-меню позволит упросить посетителям доступ к еще большей информации на сайте, то, разумеется, его мастера создают. Однако эта тенденция совершенно неприменима к мобильному веб-дизайну, поскольку на малых по размеру экранах для такого большого меню попросту нет места. И все равно, мега-меню имеет большую популярность.
Так какие идеи используют веб-дизайнеры для того, чтобы такая большая навигация органически вписывалась в проект в целом? Какие новаторские решения можно увидеть на просторах интернета?
Маркеры
Но иногда стрелочки подменю могут появляться только при наведении указателя мышки. Это может и красиво, анимационно, но не всегда удобно для пользователя. Задача веб-дизайна – создание удобства для пользователя в ознакомлении с информацией.
Мелко и незаметно
Это способно сводить с ума в попытке понимания, но почему-то это используют. Большое выпадающее меню создают с таким маленьким шрифтом и крошечными отступами между строк, что все буквально сливается в одну «кашу». Словно веб-дизайнерам не хватает пространства на холсте. Раскрывающееся подменю интернет-магазина Ozon.ru текст имеет настолько мелкий шрифт, будто бы мастера старались объять необъятное. И это при том, что кликать нужно строго по тексту ссылку. Если кликнуть рядом, то переход на страницу не произойдет.
Интересно решение на clipper round the world, где меню не крупное, но при наведении на ссылки можно увидеть, что они кликабельны. Сами они расположены широко и активны как текст, так и отступы рядом с ним. Блочный вариант элементов меню позволяет разумнее распределять свободное пространство.
Анимация при наведении
Hover-эффект позволяет дизайнерам отказаться от иконок и использования пустого пространства и наглядно говорит о том, что ссылка содержит подменю. Обычно веб-мастера используют CSS hover для создания подсвечивания. Это отличная идея для наглядности и удобства. Посетителям гораздо приятнее подвести курсор к ссылке и увидеть список подменю, дабы узнать, есть ли там что-то нужное для него.
Анимация выделения может выглядеть как изменение цвета шрифта, появление подчеркивания, выделение маркером, свето-теневая игра и многое иное, на что хватает фантазии.
Варианты меню на royal robbins, thbhotels, dx3webs, luxe, treblecone поражают своим разнообразием. Где-то анимирован текст, где-то дополнительно иконки, выделения, цвет шрифта и даже его размер. Каждый веб-дизайн имеет собственный стиль, поэтому не стоит стремиться к стандарту использования черного и белого. Но так или иначе, активные ссылки должны выделяться и окрашиваться.
И, разумеется, что один из дополнительных цветов рабочей палитры будет как раз кстати. На сайте Nvidia как раз существует смена сероватого цвета на зеленый при наведении курсора, поскольку металлик (серый), черный и зеленый – основные цвета компании. Но в случае с AMD использование черного и белого более чем оправдано, ибо вместе с красным – это основные цвета бренда.
Мгновенное открытие
Но анимация всегда служит некой цели, поэтому UI/UX дизайнеры стараются использовать её практически. Оживить интерфейс, привлечь внимание посетителя, повлиять на эмоции, заворожить взор. Но никак не замедлить процесс работы с сайтом. Обычно задержка анимации рекомендуется не более 1,5 секунд, но иногда мастера делают 2 секунды. Разумеется, если это оправдано.
Например, сайт css menu maker имеет быстро выпадающее меню, продолжительностью около 300 миллисекунд. Но анимация осуществляется, только если курсор переводится в другое место. Это пример реально быстрой анимации; анимации, которая ощущается подсознательно пользователем и которая совершенно не перегружает собой общий дизайн сайта.
Секрет мега-меню
Таким образом, раздумывая стоит ли вообще использовать мега-меню или нет, популярно оно или устарело, стоит обратиться на сайты крупнейших компаний, на которых, как ни странно, оно есть. Но разное. Дизайнеры, в первую очередь, рассматривают не сам факт наличия меню, а его форму и функцию. А потому существует два основных подхода к улучшению использования и восприятия его.
Классика и новаторство
Классические и проверенные временем выпадающие списки в наши дни выгладят все же громоздко и тяжело. Именно поэтому их стараются сделать небольшими по количеству ссылок, использовать сероватый цвет шрифта и малый его размер. Тем не менее, мегаменю обладает большим потенциалом, будучи в состоянии легко сортировать информацию без заполнения собой пространства окна браузера. И на пути к такому превосходному проявлению большого меню веб-дизайнеры находят возможности усовершенствования данного элемента сайта. Новаторство и стандартизация принципов сайтостроения сливаются и дарят нам необычные решения, оригинальные, красивые и функциональные.
Boutique Olympique Lyon помогает сориентироваться даже тем, кто не силен в французском языке, ибо все ссылки меню имеют соответствующую иконку: носки, футболки, шорты, куртки, мячи, перчатки, флаги, шлепанцы и прочее.
Gibbston valley дарит посетителям совершенно иной взгляд на меню: и текстовое, и иллюстрированное. Каждая ссылка подменю обладает своей иллюстрацией и явно показывает, о чем будет идти речь в материале.
Le slip francais также создан по аналогии с предыдущим примером, но вместо фотографий мастера использовали иконки, выполненные в тематическом стиле интернет-магазина, да и страны в целом (синий-красный-белый).
Reservoir-la обладает весьма элегантным меню, полностью соответствующее эстетике всего сайта. При небольшом размере шрифта надписи вполне читаемы, а боковое рекламное изображение дает четкое и наглядное представление чему посвящён данный раздел. По аналогии создан и Camelbak
Первый проект имеет мега-меню, но оно раскрывается вниз и образует строго две колонки. При этом анимация немного увеличена по времени и потому она плавная и очень заметная. Да, мега-меню всегда строго на одном месте, полностью текстовое, но аккуратное, наглядное и простое.
Во втором примере, мегаменю создавалось не как классический список, но в виде нескольких линий меню. При этом каждый пункт верхней линии имеет свои подпункты на нижней. И все без исключения располагаются горизонтально, друг за другом. Аналогично создано и меню проекта W2C Customs Trade Management.
Итоги
Электронная коммерция, новостные сайты, интернет-журналы и проекты со сложной информационной иерархией всегда будут предпочитать использовать мегаменю с богатыми возможностями. Они позволяют охватить все категории и представить их взору посетителей простым и интуитивно понятным образом, экономя время пользователя и пространство на холсте. При добавлении иконок или иллюстраций, если позволяет тематика проекта, меню получается чуть более информативным и понятным.
Да, мега-меню улучшает изучение вашего сайта, помогает найти нужное и соответственно продать больше. Но оно не применимо для мобильных платформ, оно может не сочетаться с некоторыми трендами веб-дизайна, оно может раздражать посетителей своим объемом.
Но всегда нужно помнить – при правильном использовании его функционал оправдан. И именно поэтому выпадающих списков может быть один или два. Идей использования очень много и, да, мега-меню не столько популярны, сколько необходимы при определённых условиях
Делаем мега меню.
Часто используемые на сайтах электронной коммерции или масштабных порталах, мега меню становятся все более и более популярными, так как они предлагают эффективное решение для вывода объемного контента при сохранении шаблона. В данном уроке мы рассмотрим процесс построения кросс-браузерного, отличного мега меню с использованием только CSS (будет использовано несколько свойств CSS3 для улучшения дизайна).
Шаг 1: Построение навигационной линейки
Начнем с основного меню, построенного на неупорядоченном списке и нескольких базовых правил CSS.
Создаем контейнер меню
Будем использовать несколько базовых правил CSS. Для контейнера меню мы определяем фиксированную ширину и центрируем его, устанавливая левое и правое поле в значение «auto».
Теперь улучшим его с помощью свойств CSS3. Нужно использовать различные префиксы для разных браузеров (для семейства WebKit и семейства Mozila).
Для скругленных углов правила будут такие:
Для фона мы будем использовать градиенты и цвета, для отображения фона в старых браузерах.
Первая строка устанавливает простой цвет фона (для старых браузеров), вторая и третья строки создают градиент по направлению сверху вниз с использованием двух цветов : #0272a7 и #013953.
Вот окончательный вид кода CSS для контейнера #menu:
Задаем стили для пунктов меню
Выравниваем все пункты меню влево и оставляем пространство между ними с помощью свойства margin-right ( свойство padding нужно для состояния hover):
Левый и правый отступы здесь немного меньше, потому что у нас есть рамочка шириной 1 пиксель появляющаяся при изменении состояния пункта меню. Если сохранить те же значения отступов, то пункт меню сдвинется вправо на два пикселя, потому что слева и справа добавляется ширина рамки при изменении состояния пункта меню. Для исключения такого поведения мы удаляем 1 пиксель от отступа с обеих сторон, поэтому значение будет равно 9 пикселям.
Вот полный набор правил CSS для пункта меню в состоянии hover:
В состоянии hover ссылки имеют серый фон, текст ссылок будет иметь более темный цвет (#161616) и белый цвет для теней текста:
В завершении нам надо сделать индикацию того, что пункт меню имеет выпадающую часть. Для этого мы будем использовать маленькую стрелку, расположенную справа от пункта меню с установленными отступами и полями для выравнивания. В состоянии hover поля будут иметь значение 7 пикселей, а не 8, так как при наведении курсора мыши вокруг пункта меню появляется дополнительная рамка, которая сдвинет стрелку:
Вот окончательный код для контейнера меню и ссылок. Только пункт «Главная» не имеет выпадающего контента:
HTML
А выглядеть оно будет вот так:
Шаг 2: Кодируем выпадающую часть меню
“Классическое” выпадающее меню обычно содержит список вложенный в родительский элемент и выглядит следующим образом:
Общая структура
Для нашего Мега Меню вместо дерева списков мы будем использовать стандартные элементы div, который будут работать как вложенные списки:
Это базовая структура выпадающего меню. Идея заключается в том, чтобы включать любой вид контента, например, параграфы, изображения, списки или контактные формы. При этом организовывать все это в колонки.
Контейнеры для выпадающей части
Контейнеры с различными размерами будут содержать весь конетнт выпадающей части. Названия контейнеров соответсвует количеству колонок, которые они содержат.
Для скрытия выпадающей части мы будем использовать абсолютное позиционирование с отрицательным значением левого поля:
Фоновый цвет такой же, как и у пунктов меню. Новые браузеры будут выводить градиент от цвета #EEEEEE наверху до цвета #BBBBBB внизу:
Мы снова используем скругленные углы, за исключением левого верхнего угла:
Часть кода CSS для контейнеров выглядит так:
Вот так могбы выглядеть выпадающий контейнер, если не уделять внимания деталям:
А вот пример того, что сделали мы:
Теперь выпадающий контейнер отлично стыкуется с пунктом меню.
Для правильного вывода контейнеров мы должны задать им ширину:
А реакция на прохождение курсора мыши над пунктом меню осуществляется очень просто:
Использование выпадающих контейнеров
Наши классы готовы для использования в меню. Мы будем использовать каждый из них начиная с 5-и колоночного и заканчивая одноколоночным:
А выглядеть оно будет так:
Шаг 3: Создаем колонки для выпадающего контейнера
Теперь, когда контейнеры готовы, нужно создать колонки расширенных размеров.
Использование колонок
Вот пример выпадающего контейнера с несколькими колонками. В данном примере мы используем различные комбинации всех видов колонок:
А вот так он будет выглядеть:
Шаг 4: Выравнивание вправо
Теперь разберемся с тем, как нам выровнять пункты меню и выпадающие контейнеры по правой границе навигационной панели. Изменять надо и пункты меню и соответствующие им выпадающие контейнеры.
Теперь посмотрим на выпадающий контейнер. В предыдущем коде CSS мы устанавливали скругление для всех углов за исключением левого верхнего для того, чтобы установить соответствие родительскому пункту меню. Теперь мы сделаем тоже самое для правой грани. Таким образом, мы создадим новый класс .align_right, в котором скругление для правого верхнего угла будет установлено в 0.
Теперь сделаем появление выпадающего пункта справа:
Теперь можно использовать установки для нашего меню:
Вот как будет выглядеть наш маленький пример:
Шаг 5: Добавляем контент и устанавливаем стиль для него
У нас готова структура меню, теперь можно добавить контент: тексты, списки, изображения и так далее.
Общий стиль
Начнем с базового стиля для параграфов и заголовков:
Будем использовать прелестный голубой цвет для ссылок в выпадающей части:
Стиль для списков
Возьмем за основу уже созданный стиль списков и подправим его: used in the navigation bar :
Стиль для изображений
И создадим стиль для параграфа с изображением слева:
Прямоугольники для выделения текста
Для выделения какого-нибудь контента будем использовать темный прямоугольник со скругленными углами и нежной тенью:
Списки в выпадающей части
Также изменим стили для списков, которые будут размещаться в выпадающем контенте:
Шаг 6: Handling Browser Compatibility and IE6
Для указания IE6 будем использовать следующий код:
В данном уроке используется несколько PNG файлов, а IE6 не поддерживает прозрачность. Для решения данной проблемы можно использовать различные варианты решений:
Вы сами выберете подходящий вариант решения в зависисмости от условий вашего проекта.