регистрация
856материалов
3307комментариев
234темы на форуме
6952пользователя

Боковое меню “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
Материал просмотрен: 1915 раз
Категория материала: Скрипты для 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
Партнерская программа uKitCPA
Создать сайт вместе с uKit.com
Статистики нашего сайта
Правила чата
Пользователи онлайн
Закрыть мини-чат
+Открыть мини-чат
0
Онлайн всего: 2
Гостей: 2
Пользователей: 0