Анимированное док-меню в стиле Android. jQuery и CSS3

Модификации основанные на языке JavaScript.

Скрипты(Огромная галерея скриптов, на любой вкус и цвет)
Аватара пользователя
CabinetAdmin

Анимированное док-меню в стиле Android. jQuery и CSS3

CabinetAdmin 17 июн 2013, 15:15 Сообщение

Анимированное док-меню в стиле Android при помощи jQuery и CSS3.
Меню расположено в фиксированном нижнем положении в закрытом состоянии, при клике на стрелку панель с эффектом 3D повернётся и из под неё появятся иконки.

Изображение


Первым делом нам нужно подключить скрипты, скачивайте архив, распаковывайте и закачиваете на форум:
android_dock_menu.rar
(134.48 КБ) 160 скачиваний


Открываем шаблон overall_header.html, перед тегом </head> ставим:

Код: Выделить всё

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="путь до файла/android_dock_menu.js"></script>


    Если библиотека jQuery у вас уже подключена, то:

    Код: Выделить всё

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

    Ставить не нужно.

Разметка нашего меню, в шаблоне overall_footer.html перед </body>:

Код: Выделить всё

<div id="dock-wrapper"> <div class="dock"> <div class="dock-front"> <img src="images/arrow-up.png" alt="Стрелка вверх" id="arrow-up" /> </div> <div class="dock-top"> <img src="images/arrow-down.png" alt="Стрелка вниз" id="arrow-down" /> </div> </div> <div class="item"> <a href="#"><img src="images/launcher-pro.png" width="60" /></a> <a href="#"><img src="images/2do.png" width="60" /></a> <a href="#"><img src="images/antivirus.png" width="60" /></a> <a href="#"><img src="images/drive.png" width="60" /></a> <a href="#"><img src="images/plex.png" width="60" /></a> <a href="#"><img src="images/maps.png" width="60" /></a> </div> </div>


Разметка очень простая и состоит из двух блоков, в одном находятся стрелки, в другом сами иконки. Количество иконок в панели легко добавляется.

Далее подключаем наш CSS, основной код:

Код: Выделить всё

#dock-wrapper { bottom: 0; width: 100%; height: 60px; position: fixed; text-align: center; -webkit-perspective: 3000px; -moz-perspective: 3000px; -ms-perspective: 3000px; -o-perspective: 3000px; perspective: 3000px; } .dock { height: 70px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: -webkit-transform 1s; -moz-transition: -moz-transform 1s; -ms-transition: -ms-transform 1s; -o-transition: -o-transform 1s; transition: transform 1s; } .dock-show { -webkit-transform: translateZ(-25px) rotateX(-95deg); -moz-transform: translateZ(-25px) rotateX(-95deg); -ms-transform: translateZ(-25px) rotateX(-95deg); -o-transform: translateZ(-25px) rotateX(-95deg); transform: translateZ(-25px) rotateX(-95deg); } .dock-front, .dock-top { position: absolute; display: block; width: 100%; height: 40px; padding: 10px 0; box-shadow: 0px -3px 6px rgba(0,0,0,0.3); } .dock-front { background-image: -webkit-gradient(linear, left top, left bottom, from(#434345), to(#161616)); background-image: -webkit-linear-gradient(top, #434345, #161616); background-image: -moz-linear-gradient(top, #434345, #161616); background-image: -ms-linear-gradient(top, #434345, #161616); background-image: -o-linear-gradient(top, #434345, #161616); background-image: linear-gradient(to bottom, #434345, #161616); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#434345', endColorstr='#161616',GradientType=0 ); -webkit-transform: translateZ(30px); -moz-transform: translateZ(30px); -ms-transform: translateZ(30px); -o-transform: translateZ(30px); transform: translateZ(30px); } .dock-top { background-image: -webkit-gradient(linear, left top, left bottom, from(#505052), to(#161616)); background-image: -webkit-linear-gradient(top, #505052, #161616); background-image: -moz-linear-gradient(top, #505052, #161616); background-image: -ms-linear-gradient(top, #505052, #161616); background-image: -o-linear-gradient(top, #505052, #161616); background-image: linear-gradient(to bottom, #505052, #161616); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#505052', endColorstr='#161616',GradientType=0 ); -webkit-transform: rotateX(90deg) translateZ(29px); -moz-transform: rotateX(90deg) translateZ(29px); -ms-transform: rotateX(90deg) translateZ(29px); -o-transform: rotateX(90deg) translateZ(29px); transform: rotateX(90deg) translateZ(29px); } #arrow-up, #arrow-down { cursor: pointer; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; transition: all .2s; } #arrow-up:hover { margin-top: -.2em; } #arrow-down:hover { margin-top: .2em; }


Практически все функции реализованы с помощью css3, поэтому надо понимать что эффекта в старых браузерах не будет.
Цветовое оформление нашего меню можно изменить таким образом, что в закрытом состоянии у неё может быть один цвет, а в открытом совершенно другой. За закрытый вид отвечает .dock-front { ... }, за открытый .dock-top { ... }.

Теперь нам осталось добавить ещё один небольшой css код:

Код: Выделить всё

.item { position: absolute; width: 526px; left: 50%; margin-left: -263px; } .item img { position: absolute; z-index: -1; cursor: pointer; } .item img:first-child { left: 0; } .item img:nth-child(2) { left: 90px; } .item img:nth-child(3) { left: 180px; } .item img:nth-child(4) { left: 270px; } .item img:nth-child(5) { left: 360px; } .item img:nth-child(6) { left: 450px; }


Обратите внимание на пронумерованные классы. Каждая цифра соответствует порядковому номеру иконки с лева направо и определяет её отступ от предыдущей. В случае использования иконок меньшего размера, чем приведённого в демо (60px), можно отрегулировать расстояние между ними.
При добавлении количества иконок, например иконок у вас семь, то после шестого с новой строки ставим:

Код: Выделить всё

.item img:nth-child(7) { left: 550px; }


Также при использовании иконок небольших или наоборот больших размеров может возникнуть проблема с тем, что иконки либо появляются не полностью, либо расположены слишком высоко над панелью, регулируется это в нашем скрипте:

Код: Выделить всё

return function () { item.eq(index).stop().animate({ 'top' : '-7.8em' }); };


-7.8em - меняем до получения оптимального варианта.

Анимация при наведении:

Код: Выделить всё

//Item hovered $('.item img').hover(function() { $(this).stop().animate({ 'top' : '-8.4em' }, 'fast'); }, function() { $(this).stop().animate({ 'top' : '-7.8em' }, 'fast'); });


-7.8em - выставляем также как и выставляли предыдущее значение.
-8.4em - ставим немного большее число относительно двух предыдущих.

Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект


Похожие темы

Вернуться в «JavaScript / jQuery»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость