—»     —»   Раскрывающаяся анимация для меню
  Раздел: Меню и Навигация   Нет комментариев  

Раскрывающаяся анимация для меню



Раскрывающаяся анимация для меню

Сегодня мы хотим заняться разработкой интересной раскрывающейся анимации для меню. Две панели перемещаются вперед, и открывают подменю с ссылками. Здесь используется CSS transform: rotate и perspective. В данном фрагменте кода нет jQuery, поэтому используется чистый код CSS. Две панели размещены отдельно, а значит, вам нужно будет добавлять ссылки в 2 разных контейнера. Анимация раскрытия дает нам доступ к остальным элементам меню. Давайте перейдем к разбору кода.

HTML-код

Это HTML-структура кода для меню. Каждая ссылка состоит из div-элемента для оболочки с тэгом link. Внутри этого меню есть заголовок ссылки и 2 панели. Каждая панель может нести в себе ссылки для подменю.

<div class="navbar">
<a class="menu" href="#">MENU</a>

<div class="link large" href="#">
<span class="active"><i class="icon-twitter"></i>Twitter</span>
<ul class="hover-bot">
<a href="">Reply</a>
<a href="">Favorite</a>
</ul>
<ul class="hover-top">
<a href="">Follow</a>
<a href="">Retweet</a>
</ul>
</div>
<div class="link" href="#">
<span class="active"><i class="icon-facebook"></i>Facebook</span>
<ul class="hover-bot">
<a href="">Comment</a>
</ul>
<ul class="hover-top">
<a href="">Like</a>
</ul>
</div>
<div class="link" href="#">
<span class="active"><i class="icon-google-plus"></i>Google Plus</span>
<ul class="hover-bot">
<a href="">Share</a>
</ul>
<ul class="hover-top">
<a href="">Add to Circle</a>
</ul>
</div>

<div class="end"></div>
</div>

CSS-код

Теперь давайте перейдем к стилизации меню. Основная часть анимации – это часть с эффект при наведении (hover) для каждого тега UL: hover-bot и hover-top. Используя RotateX CSS3 Transform, мы вращаем панели по направлению по оси Z, и вращаем их до тех пор, пока они не примут расположение на плоскости.

.navbar {
position: fixed;
left: 0;
width: 200px;
height: 100%;

-webkit-box-shadow: 1px 0 1px 0 rgba(0,0,0,.1);
box-shadow: 1px 0 1px 0 rgba(0,0,0,.1);

background-color: #666;
}
.navbar i { margin-right: 10px; }
.navbar a.menu {
display: block;
margin: 0;
width: 100%;
height: 50px;
color: #444;
background-color: #fff;
font-size: 23px;
line-height: 50px;
}
.navbar .link {
position: relative;
display: block;
margin: 0;
width: 100%;
height: 50px;
z-index: 1;

perspective: 100px;
-webkit-perspective: 100px; /* Safari and Chrome */

transition: .23s;
-webkit-transition: .23s;
}
.navbar .link:hover { height: 150px; }
.navbar .link.large:hover { height: 230px; }

.navbar .link a {
display: block;
color: #999;
text-align: left;
padding-left: 20px;

transition: .3s;
-webkit-transition: .3s;
}
.navbar .link a:hover {
color: #666;
padding-left: 30px;
}

.navbar .link span.active,
.navbar .link .hover-top,
.navbar .link .hover-bot {
display: block;
position: absolute;
width: 100%;
height: 50px;
line-height: 50px;
left: 0;
top: 0;
color: #777;
font-size: 12px;

transition: .23s;
-webkit-transition: .23s;
}

/* Larger foldout size */
.navbar .link.large .hover-top,
.navbar .link.large .hover-bot {
line-height: 45px;
height: 90px;
}
.navbar .link.large:hover .hover-bot {
transform: translateY(140px) rotateX( 0deg );
-webkit-transform: translateY(140px) rotateX( 0deg );
background-color: #f0f0f0;
}

.navbar .link span.active {
top: 0;
left: 0;
background-color: #fff;
color: #aaa;
font-size: 13px;
border-top: 1px solid rgba(0,0,0,.1);
}

.navbar .link .hover-top {
top: 50px;
transform-origin: 0% 0% 0px;
-webkit-transform-origin: 0% 0% 0px;

transform: rotateX( -90deg );
-webkit-transform: rotateX( -90deg );
z-index: -1;

background-color: #fff;
}
.navbar .link:hover .hover-top {
transform: rotateX( 0deg );
-webkit-transform: rotateX( 0deg );
background-color: #f0f0f0;
}
.navbar .link .hover-bot {
transform-origin: 0% 100% 0px;
-webkit-transform-origin: 0% 100% 0px;

transform: rotateX( 130deg );
-webkit-transform: rotateX( 130deg );
z-index: -1;

background-color: #888;
}
.navbar .link:hover .hover-bot {
transform: translateY(100px) rotateX( 0deg );
-webkit-transform: translateY(100px) rotateX( 0deg );
background-color: #f0f0f0;
}

.navbar .end {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
background-color: #fff;
border-top: 1px solid rgba(0,0,0,.1);
}

Посмотреть демо | Скачать
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 3384   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код




















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Январь 2017    »
ПнВтСрЧтПтСбВс
 1
2345678
9101112131415
16171819202122
23242526272829
3031