Показать сообщение отдельно
  #7 (permalink)  
Старый 14.12.2019, 00:22
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от 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>

Последний раз редактировалось Malleys, 14.12.2019 в 00:59. Причина: Улучшенный вариант
Ответить с цитированием