Горизонтальное меню c красивым эффектом

Горизонтальное  меню с анимированным эффектом, так смотрится при
наведении курсора мыши на пункт меню. Такой вид меню легко установить у себя на блоге. Давайте разберёмся, как это сделать с помощью простого Java Scriptа.

Заходим в НАСТРОЙКИ = выбираем ДИЗАЙН = ДОБАВИТЬ ГАДЖЕТ
В открывшемся окне выбираем HTML/JavaScript Добавить

 Вставляем свой код и жмём СОХРАНИТЬ .

КОПИРУЕМ ЭТОТ КОД 

<style type="text/css"> .block-menu { display: block; background: #000; } .block-menu li { display: inline-block; } .block-menu li a { color: #fff; display: block; text-decoration: none; font-family: 'Passion One',Arial,sans-serif; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; font-smoothing: antialiased; text-transform: uppercase; overflow: visible; line-height: 20px; font-size: 24px; padding: 15px 10px; } /* animation domination */ .three-d { -webkit-perspective: 200px; -moz-perspective: 200px; perspective: 200px; -webkit-transition: all .07s linear; -moz-transition: all .07s linear; transition: all .07s linear; position: relative; } .three-d:not(.active):hover { cursor: pointer; } .three-d:not(.active):hover .three-d-box, .three-d:not(.active):focus .three-d-box { -moz-transform: translateZ(-25px) rotateX(90deg); -webkit-transform: translateZ(-25px) rotateX(90deg); -o-transform: translateZ(-25px) rotateX(90deg); transform: translateZ(-25px) rotateX(90deg); } .three-d-box { -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; -webkit-transform: translatez(-25px); -moz-transform: translatez(-25px); -o-transform: translatez(-25px); transform: translatez(-25px); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; pointer-events: none; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; } .front { -webkit-transform: rotatex(0deg) translatez(25px); -moz-transform: rotatex(0deg) translatez(25px); -o-transform: rotatex(0deg) translatez(25px); transform: rotatex(0deg) translatez(25px); } .back { -webkit-transform: rotatex(-90deg) translatez(25px); -moz-transform: rotatex(-90deg) translatez(25px); -o-transform: rotatex(-90deg) translatez(25px); transform: rotatex(-90deg) translatez(25px); color: #FFE7C4; } .front, .back { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: black; padding: 15px 10px; color: white; pointer-events: none; -moz-box-sizing: border-box; box-sizing: border-box; } </style><br /> <ul class="block-menu"> <li><a href="###" class="three-d"><br /> Главная<br /> <span class="three-d-box"><span class="front">Главная</span><span class="back">Главная</span></span><br /> </a></li> <li><a href="###" class="three-d"><br /> О блоге<span class="three-d-box"><span class="front">О блоге</span><span class="back">О блоге</span></span><br /> </a></li> <li><a href="###" class="three-d"><br /> Услуги<br /> <span class="three-d-box"><span class="front">Услуги</span><span class="back">Услуги</span></span><br /> </a></li> <li><a href="###" class="three-d"><br /> Карта<br /> <span class="three-d-box"><span class="front">Карта</span><span class="back">Карта</span></span><br /> </a></li> <li><a href="###" class="three-d"><br /> Архив<br /> <span class="three-d-box"><span class="front">Архив</span><span class="back">Архив</span></span><br /> </a></li> </ul>

Прежде чем вставлять код в гаджет, скопируйте код и вставьте его в блокнот, замените пункты меню на свои, если вас не устраивают прописанные и вставляйте вместо решеток "###" свои ссылки.

==========================
Понравилась статья? Поделитесь с друзьями