Всё для ВебМастера

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

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



Шаг 1. HTML

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



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



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

Шаг 2. CSS

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

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

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

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



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

Готово!