Боковое полноэкранное меню для uCoz

275 06.12.2015 в 18:54 ILNUROFF

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

Как правило адаптивная навигация активируется при нажатии или наведении на кнопку гамбургер. Полноэкранное меню это самая простейшая накладка которая налаживается на весь экран, таким образом у дизайнера появляется на много больше места и возможности для реализации меню.

Установка полноэкранного меню:
Скачиваем архив с нашего сайта и папку navigation заливаем в свой файловый менеджер.

Для начала, в верхнюю часть Вашего сайта после тега подключаем стили меню :

Код

Далее, в нижнюю часть сайта вставляете код полноэкранного меню:

Код

<div id="cd-nav" class="cd-nav">
<div class="cd-navigation-wrapper">
<div class="cd-half-block">
<h2>Меню нашего сайта</h2>
<nav>
<ul class="cd-primary-nav">
<li><a href="#" class="selected">Главная страница</a></li>
<li><a href="#">Форум сайта</a></li>
<li><a href="#">Сайты uCoz</a></li>
<li><a href="#">Файлы про uCoz</a></li>
<li><a href="#">Блог нашего сайта</a></li>
</ul>
</nav>
</div>

<div class="cd-half-block">
<address>
<ul class="cd-contact-info">
<li><a href="mailto:SUPPORT@YANDEX.RU">SUPPORT@YANDEX.RU</a></li>
<li><a href="http://diz-line.at.ua/">DIZ-LINE.AT.UA</a></li>
<li>
uCoz — бесплатная система управления сайтом и хостинг для сайтов, созданных с её использованием.
</li>
</ul>
</address>
</div>

</div>
</div>

Кнопка вызова меню:

Код

Там же, перед тегом вставляем:

Код

Мне нравится4 Скачать2.9 Kbзагрузок: 1