Отличное боковое выдвижное меню с SVG эффектом для вашего сайта на uCoz. Меню обладает свойством компактности, то есть когда оно не нужно,то за место полной части меню можно увидеть лишь иконку которая отвечает за вывод данного меню. Появляется оно с эффектом похожую на тряску, после в ряд как и в обычном меню будут расположены кликабельные ссылки,число которых зависит от ваших задумок.
Установка
Между 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>
