
Качающееся меню — меню с использованием свойств 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;
}
}