v2.5.2
Giriş yap

Div harici yere basınca Divin Gizlenmesi

ledenav
388 defa görüntülendi

Çoğu sitede var. Örneğin Menüyü açtın. Menü harici bir yere basınca menü kapanıyor.
Yada bir baloncuk. Balon harici yere basınca balon kapanıyor.
Bunu nasıl yapabilirim?

Cevap yaz
Cevaplar (3)
p42s
836 gün önce

Kodu inceleyebilirsin.

Demo: https://codepen.io/P42s/pen/xxXRvVz

<div class="drop">
	<a class="drop-trigger" href="#dropdown1">
		😋 Meyveler
		<svg class="icon icon-arrow">
			<use xlink:href="#icon-arrow"></use>
		</svg>
	</a>
	<div class="drop-down" id="dropdown1" tabindex="-1">
		<ul>
			<li><a href="">🍏 Elma</a></li>
			<li><a href="">🍌 Muz</a></li>
			<li><a href="">🥕 Havuç</a></li>
			<li><a href="">🍊 Portakal</a></li>
		</ul>
	</div>
</div>

<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<defs>
		<symbol id="icon-arrow" viewBox="0 0 24 24">
			<path fill="none" d="M0 0h24v24H0z" />
			<path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z" />
		</symbol>
	</defs>
</svg>
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

a {
	text-decoration: none;
}

li {
	list-style: none;
}

body {
	font-family: sans-serif;
	font-size: 16px;
	display: grid;
	place-items: center center;
	width: 100%;
	height: 100vh;
	background-color: #fefefe;
}

.icon {
	width: 1em;
	height: 1em;
	display: inline-block;
	fill: currentcolor;
}

.drop {
	position: relative;

	&-trigger {
		display: flex;
		align-items: center;
		column-gap: 8px;
		padding: 12px 16px;
		background-color: #eee;
		border-radius: 8px;
		color: #000;

		.icon {
			font-size: 18px;
		}
	}

	&-down {
		display: none;
		padding: 16px;
		box-shadow: 0 0 20px 0px rgba(#000, 0.09);
		border-radius: 8px;
		position: absolute;
		background-color: #fff;
		top: 110%;
		transition: 0.4s;
		width: 100%;
		right: 0;
		animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;

		&:before {
			content: "";
			width: 10px;
			height: 10px;
			background-color: inherit;
			display: block;
			transform: rotate(45deg);
			position: absolute;
			top: -0.4em;
			right: 16%;
		}

		ul {
			display: flex;
			flex-direction: column;
			row-gap: 12px;

			li {
				a {
					color: #000;

					&:hover {
						color: red;
					}
				}
			}
		}

		&.active {
			display: block;
		}
	}
}

@keyframes shake {
	10%,
	90% {
		transform: translate3d(-1px, 0, 0);
	}

	20%,
	80% {
		transform: translate3d(2px, 0, 0);
	}

	30%,
	50%,
	70% {
		transform: translate3d(-4px, 0, 0);
	}

	40%,
	60% {
		transform: translate3d(4px, 0, 0);
	}
}
$(".drop-trigger").on("click", function () {
	$(this.hash).toggleClass("active").focus();
});

$(".drop-down").on("focusout", function () {
	$(this).removeClass("active");
});
mucahitbaser
836 gün önce

if (!e.target.closest('#notification-setting') && !e.target.closest('#open-setting')) this.notificationSettings = false

closest ile o element hariç nereye tıkladıysa kontrol et kardeşim sonra istediğin işlemi yap

ledenav
836 gün önce

Örneğin bu sitede mobil görünümde ,
Profil fotoğrafı üzerine basınca seçenekler açılıyor.
O menü harici başka bir yere basınca Kapanıyor.
O nasıl Yapılıyor?