Опубликовано Оставить комментарий

Качающееся меню на CSS

Качающееся CSS меню

Качающееся меню — меню с использованием свойств transition и transform

Ролик о создании простого меню на CSS стал популярным на канале, потому возвращаемся к теме и создаём качающееся меню на CSS. Если вы знакомы с темой построения выпадающих меню, следует смотреть видео с момента рассказа о добавлении свойств перехода — transition и transform. 

Давайте подключим «Open Sans», чтобы воспользоваться популярным шрифтом:

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">/pre>

Создадим HTML-код соответствующий строке в формате Emmet:

.container>nav>ul.swing>li*5>(a[href=#]>lorem1)

и добавим в её пункты подменю:

ul>li*4>a[href=#]>lorem1

В brackets и с9 работает и разворот полной строки, но в codepen столкнулся с тем, что следующая строка срабатывает однократно, а после свёртки Ctrl + z перестаёт разворачиваться:

.container>nav>ul.swing>li*5>(a[href=#]>lorem1)+ul>li*4>a[href=#]>lorem1

Можно использовать и готовый HTML ниже, но оставлю его больше для тех, кто не успел познакомиться с Emmet:

<div class="container"><!-- контейнер для всего -->
 <nav>
 <ul class="swing"><!-- список для меню - пункты верхнего уровня -->
 <li><a href="#">Lorem.</a></li>
 <li><a href="#">Laboriosam.</a>
 
 <ul><!-- выпадающее меню -->
 <li><a href="#">Lorem.</a></li>
 <li><a href="#">Iure?</a></li>
 <li><a href="#">Ducimus.</a></li>
 <li><a href="#">Quae.</a></li>
 </ul>
 
 </li>
 <li><a href="#">Atque?</a></li>
 <li><a href="#">Sequi?</a>
 
 <ul><!-- выпадающее меню -->
 <li><a href="#">Lorem.</a></li>
 <li><a href="#">Iure?</a></li>
 <li><a href="#">Ducimus.</a></li>
 <li><a href="#">Quae.</a></li>
 </ul>
 
 </li>
 <li><a href="#">Placeat.</a></li>
 </ul>
 </nav>
</div>

Оформляем качающееся меню

Анимация в CSS нами рассматривалась ранее

html{
 background: #eee;
}
* {
 box-sizing: border-box; /* подсчёт бордюров и отступов внутрь бокса */
}
.container{
 width: 1000px;
 /*border: 1px solid #999;*/
 margin: auto;
}
.swing{
 display: table; /* поэкспериментируйте с display:table! */
 width: 100%;
 padding: 0;
 margin: 0;
 text-align: center; 
 background: #fff;
}

.swing li{
 display: table-cell; /* li-шки, ведите себя как ячейки! */
 position: relative;
 background: #aaa; 
 transition: all .1s ease-out;
 perspective: 500px;
/* border: 1px solid #000; */
}
.swing ul{
 min-width: 100%;
 display: block;
 position: absolute;
 left: 0px;
 top: 100%;
 padding: 0;
 visibility: hidden; 
 transform-origin: 50% 0;/* можно было бы и не трогать, но так лучше */
}
.swing li:hover ul{
 visibility: visible;
 animation: swing 1s ease; 
 box-shadow: 0 0 5px #000; 
}
.swing ul li{
 display: block; 
 width: 100%; 
}
.swing a{
 text-decoration: none; 
 display: inline-block;
 width: 100%;
 color: #333;
 text-shadow: 0 1px 1px #fff;
 line-height: 40px;
 font-family: 'Open Sans', sans-serif;/*ради этого прикручивали link*/
 white-space: nowrap;
}
.swing ul li{
 background: #ccc;
}
.swing ul li:hover{
 background: #ddd;
}
.swing li:hover{
 background: #ccc;
 color: #fff;
 text-shadow: 0 1px 1px #222;
}
@keyframes swing { /* анимация на keyframes */
 0%{
 opacity: .999;
 transform: rotatex(90deg);
 }
 40%{
 transform: rotatex(-20deg) rotatey(7deg) ;
 }
 60%{
 transform: rotatex(20deg) rotatey(-5deg) 
 }
 100%{
 opacity: 1;
 transform: rotatex(0deg);
 animation-timing-function: ease-in-out;
 }
}

Добавить комментарий