Логин:
Пароль:
Страница 1 из 11
Форум » О uCoz » Скрипты » Боковое полноэкранное меню
Боковое полноэкранное меню
AndreyДата: Суббота, 17.10.2015, 09:28:06 | Сообщение # 1
Технарь
Offline
3

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

И так приступим к установки

Сначала подключим после </head> CSS стиль нашего меню:
Код
<link rel="stylesheet" href="/nav/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="http://an-art.at.ua/">АН - ФРТ</a></li>
<li>
АН - АРТ фотообработка, колоризация... Любой слозности
</li>
</ul>
</address>
</div>

</div>
</div>


Устанавливаем кнопку вызова нашего меню:
Код
<a href="#cd-nav" class="cd-nav-trigger"><span class="cd-nav-icon"></span></a>


Подключаем после </body> js - скрипт нашего меню:
Код
<script src="/nav/main.js"></script>


И из прикреплённого ниже архива заливаем к себе на хост папку "nav"

Всё, меню установлено!

Материал подготовил: Andrey
Для того чтоб скачать прикреплённые файлы нужно Зарегестрироватся, или войти на сайт под своим логином
 
профиль
Форум » О uCoz » Скрипты » Боковое полноэкранное меню
Страница 1 из 11
Поиск: