Боковое полноекранное меню для uCoz
827материалов
228тем на форуме
3004комментария
6157пользователей

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


Введение:

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

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

Установка полноэкранного меню:

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

Для начала, в верхнюю часть Вашего сайта после тега </head> подключаем стили меню
Код
<link rel="stylesheet" href="/navigation/style.css">

Далее, в нижнюю часть сайта вставляете код полноэкранного меню:
Код
<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@webmaster-ucoz.ru">SUPPORT@WEBMASTER-UCOZ.RU</a></li>
<li><a href="http://webmaster-ucoz.ru/">WEBMASTER-UCOZ.RU</a>, <a href="http://yraaa.ru/">YRAAA.RU</a></li>
<li>
uCoz — бесплатная система управления сайтом и хостинг для сайтов, созданных с её использованием.
</li>
</ul>
</address>
</div>

</div>
</div>

Кнопка вызова меню:
Код
<a href="#cd-nav" class="cd-nav-trigger"><span class="cd-nav-icon"></span></a>

Там же, перед тегом </body> вставляем:
Код
<script src="/navigation/main.js"></script>

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 11.09.2016 в 19:00
Материал просмотрен: 2449 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 14 комментариев

Пожаловаться
Сказать спасибо
Источник

14 комментариев


Roman
Роман Сергеев @Roman 10.10.2015 17:011
+10
Очень понравилось, спасибо за меню happy
Romchik
Не за что
YaVi
Виктор @YaVi 10.10.2015 21:532
+6
Отличное меню) Очень удобное)
Romchik
Очень рад, что Вам понравилось)
Kosten
Kocsten @Kosten 11.10.2015 01:035
+3
Отличное меню, визуально наблюдал на сайте и отлично смотрится.
ANDRUHA061
странно, почему то у меня не открывается оно, все сделал как написано crying
Roman
Роман Сергеев @Roman 15.10.2015 14:117
+1
Ссылку на сайт дайте
Ромчик
Ссылку на сайт, я посмотрю что за проблема
Oлer
Олег Марков @Oлer 23.01.2016 19:589
0
В полный экран не всегда бывает удобно. На сайте webmaster-ucoz лучше, имхо. Спасибо за меню:))
1 2 »
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта