Сообщение от javascrip
|
не, бро, слишком много кода... есть варики поменьше?
|
Можно вообще без JS...
<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>