Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   выпадающий блок без display:none (https://javascript.ru/forum/misc/79077-vypadayushhijj-blok-bez-display-none.html)

javascrip 13.12.2019 22:12

выпадающий блок без display:none
 
подскажите пожалуйста, можно ли как нибудь сделать выпадающий текстовый блок при нажатии на ссылку без display:none?

Malleys 13.12.2019 22:24

Изменять opacity и transform?

Aetae 13.12.2019 22:25

Попробуем в телепатию: вопрос на самом деле "Какие другие возможности скрыть блок, кроме display: none?"
Ответ: вариантов много, например
position: absolute; top: -9999px; left:-9999px;
или
width: 0; height:0; overflow: hidden;
...

javascrip 13.12.2019 23:12

Цитата:

Сообщение от Malleys (Сообщение 517446)
Изменять opacity и transform?

можешь на пример кода кинуть ссылку?

рони 13.12.2019 23:32

Цитата:

Сообщение от javascrip
может на пример кода кинуть ссылку?

https://javascript.ru/forum/project/...tml#post511222

javascrip 14.12.2019 00:02

не, бро, слишком много кода, и надо чтобы закрывалось при клике, есть варики поменьше?

Malleys 14.12.2019 00:22

Цитата:

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

javascrip 14.12.2019 16:04

во, классный вариант, ток у меня не меню, а типа faq , как сделать чтобы оставались открытыми вкладки ?

рони 14.12.2019 16:15

javascrip,
добавлять класс кнопкам.


Часовой пояс GMT +3, время: 19:13.