регистрация
857материалов
3222комментария
249тем на форуме
7324пользователя
Хотите узнать что случилось и что дальше будет с сайтом?
Да, хотелось-бы :-)

Боковое меню “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>


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

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

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


Skifchik
Skifchik @Skifchik 25.09.2016 14:291
+3
Классное меню. Спасибо
Knyaz
Супер
Ромчик
Рад что Вам понравилось
gopkot97
Хотелось бы поподробнее, в каком шаблоне прописывать участок <head> - </head>
Просто я не очень хорошо разбираюсь в CSS)
b
Bed Ven @bvgames 24.03.2017 13:506
0
здравствуйте а как можно перенести меню в правую часть сайта
fearfire
В Mozilla Firefox не работает sad
avatar
Правила чата
Закрыть мини-чат
+Открыть мини-чат
0
Онлайн всего: 2
Гостей: 2
Пользователей: 0