регистрация

Боковое меню “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
Материал просмотрен: 1617 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 5 комментариев

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

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


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