В последнее время мега-навигация стала весьма популярна, вы можете организовать в структурированный список множество информации, при этом не занимая много места на сайте, некоторые разработчики умудряются поместить половину контента своего сайта в навигационной панели. Сейчас не малую роль отыгрывает адаптивность, ведь посетителю важно передвигаться на сайте с максимальной удобностью и на различных экранах. В данном уроке мы решили объединить мега-меню и адаптивность, вот что с этого получилось.
Такое меню станет отличным дополнением для ресурсов где нужно вместить много различной информации и не только текстовой, например мы использовали бы такую навигацию на интренет-магазинах, или проектах где много различной тематики и ее необходимо правильно подать пользователю, давайте приступим.
Шаг 1. HTMLДля начала мы создаем общую панель, в которой будет размещаться наши навигационные блоки, обратите внимание, что навигация будет делиться на два типа-то,что есть видимым и то, что станет видимым, для этого мы добавляем верхний слой с установленным нами изображением-логотипом:
<header class="cd-main-header">
<a class="cd-logo" href="#0"><img src="img/cd-logo.svg" alt="Logo"></a>
<ul class="cd-header-buttons">
<li><a class="cd-search-trigger" href="#cd-search">Поиск<span></span></a></li>
<li><a class="cd-nav-trigger" href="#cd-primary-nav">Меню<span></span></a></li>
</ul>
</header>
Затем мы добавляем всю разметку которая нам необходима, обратите внимание, что разметка достаточно большая, так как у нас много информации которую мы используем, по этому мы приводим ее укороченную часть, полную разметку можно просмотреть в исходниках:
<div class="cd-overlay"></div>
<nav class="cd-nav">
<ul id="cd-primary-nav" class="cd-primary-nav is-fixed">
<li class="has-children">
<a href="#">Навигация</a>
<ul class="cd-secondary-nav is-hidden">
<li class="go-back"><a href="#0">Уроки</a></li>
<li class="see-all"><a href="#">Скрипты</a></li>
<li class="has-children">
<a href="#">Как написать</a>
...........
<li class="has-children">
<a href="#">Галерея</a>
<ul class="cd-nav-gallery is-hidden">
<li class="go-back"><a href="#0">Навигация по последним изображениям</a></li>
<li class="see-all"><a href="#">Смотртеть все изображения</a></li>
<li>
<a class="cd-nav-item" href="#">
<img src="img/img.jpg" alt="Product Image">
<h3>Изображение #1</h3>
</a>
</li>
...........
<li class="has-children">
<a href="#">Услуги</a>
<ul class="cd-nav-icons is-hidden">
<li class="go-back"><a href="#0">Меню услуг</a></li>
<li class="see-all"><a href="#">Смотреть услуги</a></li>
<li>
<a class="cd-nav-item item-1" href="#">
<h3>Нарисовать макет</h3>
<p>Мі сделаем для вас лучший макет</p>
</a>
</li>
............
<li>
<a class="cd-nav-item item-2" href="#">
<h3>Местоположение</h3>
<p>Мы добавим ваши координаты на сайт</p>
</a>
</li>
..............
<li><a href="#">Контакты</a></li>
</ul>
</nav>
Обратите внимание, те, кто плохо разбирается в веб-дизайне, к каждому блоку присвоен определенный класс, этот класс отвечает за стиль данного блока, стилизацию можно отредактировать в стилях. Давайте перейдем к стилям.
Шаг 2. CSSCSS довольно простой, хотя объем кода, требуемого для этого навигационного блока достаточно объемный. Вы можете загрузить исходный файл и проверить, как мы реализовали анимацию.
Обратите внимание: я создал 2 классы, которые могут быть использованы для изменения поведения навигации. Обратите внимание, что оба класса должны быть применены к элемента:
---nav-is-fixed - если вы хотите фиксированную навигацию;
---nav-on-left - если вы хотите навигацию с левой стороны на мобильных устройствах;
Вот некоторые параметры, которые позволят визуально повлиять на навигацию, не смотря на то, что код достаточно большой, мы выделили основные элементы, которые позволят вам сделать навигацию более привлекательной у себя на сайте:
// Цвета
$color-1: #2e3233; // grey dark
$color-2: #69aa6f; // green
$color-3: #e2e3df; // grey light
$color-4: #ffffff; // white
// Шрифты
$primary-font: sans-serif;
// Размер шапки
$header-height-S: 50px;
$header-height-L: 80px;
// Размер навигации
$nav-width-S: 260px;
// Форма поиска
$search-height-S: 50px;
$search-height-L: 120px;
// z-index
$below-content: 1;
$content: 2;
$above-content: 3;
Мы не использовали много сторонних скриптов, но мы добавили пару скриптов jQuery, это обеспечит более плавную и привлекательную работу навигации.
Готово!Скачивание файлов доступно только зарегистрированным пользователям