регистрация
856материалов
3260комментариев
227тем на форуме
6729пользователей

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