выпадающий блок без display:none
подскажите пожалуйста, можно ли как нибудь сделать выпадающий текстовый блок при нажатии на ссылку без display:none?
|
Изменять opacity и transform?
|
Попробуем в телепатию: вопрос на самом деле "Какие другие возможности скрыть блок, кроме display: none?"
Ответ: вариантов много, например position: absolute; top: -9999px; left:-9999px;или width: 0; height:0; overflow: hidden;... |
Цитата:
|
Цитата:
|
не, бро, слишком много кода, и надо чтобы закрывалось при клике, есть варики поменьше?
|
Цитата:
<style>
.dropdown > .dropdown__inner {
position: absolute;
border-radius: 0.35em;
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.25);
margin: -0.1em;
padding: 0.5em;
backdrop-filter: blur(8px);
opacity: 0;
transform: translateY(-8px);
pointer-events: none;
transition: 300ms;
cursor: default;
}
.dropdown > .dropdown__toggler:focus ~ .dropdown__inner,
.dropdown > .dropdown__inner:focus-within {
opacity: 1;
transform: translateY(0);
pointer-events: all;
}
.dropdown > .dropdown__inner::before {
content: "";
position: absolute;
top: -100vh;
left: 0;
right: 0;
bottom: 100%;
}
</style>
<div class="dropdown">
<button class="dropdown__toggler">≡ Button</button>
<p class="dropdown__inner">Hi, this is a drop down block</p>
</div>
|
во, классный вариант, ток у меня не меню, а типа faq , как сделать чтобы оставались открытыми вкладки ?
|
javascrip,
добавлять класс кнопкам. |
| Часовой пояс GMT +3, время: 11:34. |