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

 

 

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

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

Шаг 1. HTML

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

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

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

Как создать адаптивное мега-меню для сайта

Шаг 2. CSS

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

Обратите внимание: я создал 2 классы, которые могут быть использованы для изменения поведения навигации. Обратите внимание, что оба класса должны быть применены к  <BODY> элемента:

  • nav-is-fixed  — если вы хотите фиксированную навигацию;
  • nav-on-left — если вы хотите навигацию с левой стороны на мобильных устройствах;

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

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

Вот и все. Готово!