Приветствуем Вас на сайте!
Авторизировавшись на сайте Вы получаете возможность заказывать эксклюзивные вещи для Вашего сайта, скачивать новинки, общаться с друзьями.
Если у Вас ещё нет аккаунта на BEST STUDIO, вы можете создать его потратив не более 10-ти секунд используя форму справа с заголовком "Вход на сайт"
Если у Вас ещё нет аккаунта на BEST STUDIO, вы можете создать его потратив не более 10-ти секунд используя форму справа с заголовком "Вход на сайт"
Вход на сайт
Логин:
Пароль:
Вход
Войти по Логину и Паролю
О нас
Cтудия скриптов и дизайна BEST STUDIO, как студия перспективных веб-разработок, была основана 1 июля 2009 г. Уже более 17000 зарегистрированых пользователей! С момента ее создания мы четко придерживаемся принципа: «Быстро, качествено, дорого».
Заказывая работу для вашего сайта у нас, вы экономите время...
Заказывая работу для вашего сайта у нас, вы экономите время...
Стремитесь к лучшему - в Best Studio!
Войти | Зарегистрироваться
Настройки
Перезагрузите страницу
- Главная
- Все для uCoz
- Скрипты для uCoz
- Боковое полноэкранное меню
Адаптивная навигация бурно развивалась в веб — дизайне последние пару лет. Дизайнеры как могли упрощали её и делали интуитивно понятно и удобной для пользователей. Так и появилось множество разнообразных реализаций меню на сайте, а сегодня мы рассмотрим пример полноэкранного, адаптивного меню, которое реализуют дизайнеры на различных сайтах и проектах. Как правило адаптивная навигация активируется при нажатии или наведении на кнопку гамбургер. Полноэкранное меню это самая простейшая накладка которая налаживается на весь экран, таким образом у дизайнера появляется на много больше места и возможности для реализации меню.
Установка полноэкранного меню:
Скачиваем архив с нашего сайта и папку navigation заливаем в свой файловый менеджер.
1. Для начала, в верхнюю часть Вашего сайта после тега подключаем стили меню
Код
<link rel="stylesheet" href="/navigation/style.css">
2. В нижнюю часть сайта вставляете код полноэкранного меню:
Код
<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>
<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>
3. Кнопка вызова меню:
Код
<a href="#cd-nav" class="cd-nav-trigger"><span class="cd-nav-icon"></span></a>
4. Там же, перед тегом