Вопрос следующий, возможно ли плавное появление блока dropdown
без использования JS jQuery и т.п.? Если да то как? transition
не срабатывал...
.menu:focus ~ .dropdown{
display: block;
}
.main-head .dropdown{
position: absolute;
margin-top: 85px;
right: 210px;
display: none;
}
<header class="main-head">
<div id="logo">
<p>Smart</p>
</div>
<button class="button menu">Кнопка</button>
<ul class="dropdown">
<li>
<a href="">Menu1</a>
</li>
<li>
<a href="">Menu2</a>
</li>
<li>
<a href="">Menu3</a>
</li>
<li>
<a href="">Menu4</a>
</li>
</ul>
</header>
transition
не применим к свойству display: none | block;
!
Вариант 1 opacity
:
.menu:focus ~ .dropdown{
opacity: 1;
}
.main-head .dropdown{
position: absolute;
margin-top: 85px;
right: 210px;
opacity: 0;
transition: all .5s ease-in-out;
}
<header class="main-head">
<div id="logo">
<p>Smart</p>
</div>
<button class="button menu">Кнопка</button>
<ul class="dropdown">
<li>
<a href="">Menu1</a>
</li>
<li>
<a href="">Menu2</a>
</li>
<li>
<a href="">Menu3</a>
</li>
<li>
<a href="">Menu4</a>
</li>
</ul>
</header>
Вариант 2 scale
:
.menu:focus ~ .dropdown{
transform: scale(1);
}
.main-head .dropdown{
position: absolute;
margin-top: 85px;
right: 210px;
transform: scale(0);
transition: all .3s ease-in-out;
}
<header class="main-head">
<div id="logo">
<p>Smart</p>
</div>
<button class="button menu">Кнопка</button>
<ul class="dropdown">
<li>
<a href="">Menu1</a>
</li>
<li>
<a href="">Menu2</a>
</li>
<li>
<a href="">Menu3</a>
</li>
<li>
<a href="">Menu4</a>
</li>
</ul>
</header>
Вариант 3 translateX
:
.menu:focus ~ .dropdown{
transform: translateX(0%);
}
.main-head .dropdown{
position: absolute;
margin-top: 85px;
right: 210px;
transform: translateX(-1000%);
transition: all .3s ease-in-out;
}
<header class="main-head">
<div id="logo">
<p>Smart</p>
</div>
<button class="button menu">Кнопка</button>
<ul class="dropdown">
<li>
<a href="">Menu1</a>
</li>
<li>
<a href="">Menu2</a>
</li>
<li>
<a href="">Menu3</a>
</li>
<li>
<a href="">Menu4</a>
</li>
</ul>
</header>
Вариант 4 translateY
:
.menu:focus ~ .dropdown{
transform: translateY(0%);
}
.main-head .dropdown{
position: absolute;
margin-top: 85px;
right: 210px;
transform: translateY(-1000%);
transition: all .3s ease-in-out;
}
<header class="main-head">
<div id="logo">
<p>Smart</p>
</div>
<button class="button menu">Кнопка</button>
<ul class="dropdown">
<li>
<a href="">Menu1</a>
</li>
<li>
<a href="">Menu2</a>
</li>
<li>
<a href="">Menu3</a>
</li>
<li>
<a href="">Menu4</a>
</li>
</ul>
</header>
Вариант с absolute
:
body {
overflow: hidden;
}
.menu:focus ~ .dropdown{
right: 210px;
}
.main-head .dropdown{
position: absolute;
margin-top: 85px;
right: -9999px;
transition: all .5s ease-in-out;
}
<header class="main-head">
<div id="logo">
<p>Smart</p>
</div>
<button class="button menu">Кнопка</button>
<ul class="dropdown">
<li>
<a href="">Menu1</a>
</li>
<li>
<a href="">Menu2</a>
</li>
<li>
<a href="">Menu3</a>
</li>
<li>
<a href="">Menu4</a>
</li>
</ul>
</header>
.dropdown {
position: relative;
overflow: hidden;
margin-top: 85px;
height: 0px;
width: 100px;
}
@keyframes down1 {
0% {
height: 0;
}
10% {
height: 10;
}
25% {
height: 25px;
}
40% {
height: 40;
}
50% {
height: 50px;
}
60% {
height: 60;
}
75% {
height: 75px;
}
80% {
height: 80;
}
100% {
height: 100px;
}
}
.menu:focus ~ .dropdown {
outline: 1px solid #ccc;
animation-name: down1;
animation-duration: 1s;
animation-timing-function: ease-in;
height: 100px;
}
<header class="main-head">
<div id="logo">
<p>Smart</p>
</div>
<button class="button menu">Кнопка</button>
<div class="dropdown">
<div>
<a href="">Menu1</a>
</div>
<div>
<a href="">Menu2</a>
</div>
<div>
<a href="">Menu3</a>
</div>
<div>
<a href="">Menu4</a>
</div>
</div>
</header>
Попробуйте @keyframes
при нажатии на dropdown
@keyframes
будет анимировать ваш ul
.
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Контент страницы находится в contanier со свойствами