Боковое меню “Motion” с SVG эффектом
827материалов
228тем на форуме
3003комментария
6152пользователя

Боковое меню “Motion” с SVG эффектом


Описание:

С помощью возможностей JQuery мы можем превратить меню навигации в динамическое меню. Хотя сейчас для создания динамической навигации можно использовать только CSS3, JQuery делает меню еще более функциональным. Помимо динамических функций, дизайн также играет немаловажную роль. Хотя бы потому, что это то, что посетители видят в первую очередь, когда заходят на ваш сайт. Если меню будет непрезентабельным, это даст пользователям плохой опыт взаимодействия. Хороший дизайн меню в свою очередь увеличит качество вашего сайта, и даст лучший опыт взаимодействия пользователей.

Установка:

Между <head> и </head> вставляете код:
Код
<script src="http://webmaster-ucoz.ru/ucoz/js/menu/menu.min.js"></script>
<style>
.menu {
     position: fixed;
     top: 0;
     left: -400px;
     bottom: 0;
     line-height: 100vh;
     width: 400px;
     -webkit-filter: url("#blur");
}
.menu-bg {
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     background: #333;
     transform-origin: 100% 0;
}
.menu-items {
     position: relative;
     display: inline-block;
     width: 100%;
     vertical-align: middle;
     line-height: 1;
}
.menu-item {
     display: block;
     color: #fff;
     font-size: 28px;
     padding-top: 18px;
     padding-bottom: 18px;
     padding-right: 40px;
     text-align: right;
}
.menu-toggle {
     position: fixed;
     top: 20px;
     left: 20px;
     z-index: 100;
     display: block;
     width: 40px;
     height: 40px;
     cursor: pointer;
     background: none;
     border: none;
     margin: 0;
}
.menu-toggle span {
     position: absolute;
     top: 50%;
     left: 0;
     display: block;
     width: 100%;
     height: 2px;
     background-color: #7D87AE;
     font-size: 0px;
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     -webkit-transition: background-color 0.2s;
     transition: background-color 0.2s;
}
.menu-open.menu-toggle span {
     background-color: transparent;
}
.menu-toggle span:before,
.menu-toggle span:after {
     position: absolute;
     left: 0;
     width: 100%;
     height: 100%;
     background: #7D87AE;
     content: '';
     -webkit-transition: -webkit-transform 0.2s;
     transition: transform 0.2s;
}
.menu-toggle span:before {
     -webkit-transform: translateY(-10px);
     transform: translateY(-10px);
}
.menu-toggle span:after {
     -webkit-transform: translateY(10px);
     transform: translateY(10px);
}
.menu-open.menu-toggle span:before {
     -webkit-transform: translateY(0) rotate(45deg);
     transform: translateY(0) rotate(45deg);
}
.menu-open.menu-toggle span:after {
     -webkit-transform: translateY(0) rotate(-45deg);
     transform: translateY(0) rotate(-45deg);
}
</style>

Код меню в нижнюю часть сайта перед </body> вставляете код меню:
Код
<div class="menu">
<div class="menu-bg js-blur"></div>
<nav class="menu-items">

<a href="http://webmaster-ucoz.ru/scripts/bokovoe-menju-motion" class="menu-item">
<span class="js-blur">uCoz.Ru</span>
</a>

<a href="http://webmaster-ucoz.ru/scripts/bokovoe-menju-motion" class="menu-item">
<span class="js-blur">uKit.Com</span>
</a>

<a href="http://webmaster-ucoz.ru/scripts/bokovoe-menju-motion" class="menu-item">
<span class="js-blur">Yraaa.Ru</span>
</a>

<a href="http://webmaster-ucoz.ru/scripts/bokovoe-menju-motion" class="menu-item">
<span class="js-blur">uGarts.Pro</span>
</a>

<a href="http://webmaster-ucoz.ru/scripts/bokovoe-menju-motion" class="menu-item">
<span class="js-blur">ZorNet.Ru</span>
</a>

</nav>
</div>
<button class="menu-toggle"><span>Меню</span></button>
</div>

Там же в  нижней части сайта перед </body> вставляете код:
Код
<script src="http://webmaster-ucoz.ru/ucoz/js/menu/motionblur.js"></script>
<script src="http://webmaster-ucoz.ru/ucoz/js/menu/menu.js"></script>

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

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

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

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


Skifchik
Skifchik @Skifchik 25.09.2016 14:291
+3
Классное меню. Спасибо
Knyaz
Супер like
Ромчик
Рад что Вам понравилось
gopkot97
Хотелось бы поподробнее, в каком шаблоне прописывать участок <head> - </head>
Просто я не очень хорошо разбираюсь в CSS)
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта