21 мая 2015
Адаптивное мега-меню для сайта
Ares Категория: Web-Мастеру » Уроки
У нас вы можете скачать бесплатно Адаптивное мега-меню для сайта .

Данный материал предоставлен сайтом Skripter.info исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Адаптивное мега-меню для сайта

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

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



Шаг 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. CSS

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

Обратите внимание: я создал 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, это обеспечит более плавную и привлекательную работу навигации.

Готово!

Скачивание файлов доступно только зарегистрированным пользователям










Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.