Javascript Sorum Var.

17-01-2021, 02:08:06

Merhaba arkadaşlar,

Örnek Site bulunan beden tablosu butonuna tıklandıgı gibi birşey yapmak istiyorum. Sağ tarafdan gelecek site üzerinde duracak. Kısaca aynı veya benzeri. bu konuda yardımcı olabilecek arkadaşlar varmıdır ?

18-01-2021, 03:10:44

#2

G3da

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#hiddenContent .content{position:fixed;top:0;right:-450px;width:450px;height:100%;z-index:12;background-color:#fff;box-shadow:0 -25px 25px 0 rgba(0,0,0,.20);transition:right .25s ease-in-out 0s}
		#hiddenContent button{position:fixed;right:-450px;top:0;background:none;border:0;padding:0;width:50px;height:50px;background-color:#eee;cursor:pointer;z-index:11;transition:right .5s ease-in-out 0s}
		#hiddenContent button:focus{outline:none}
		#hiddenContent .mask{position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,.5);z-index:10;opacity:0;visibility:hidden;transition:all .1s ease-in-out 0s}
		#hiddenContent.show .content{right:0}
		#hiddenContent.show button{right:450px}
		#hiddenContent.show .mask{visibility:visible;opacity:1}
	</style>
</head>
<body>
	<button id="test">Demo</button>
	<div id="hiddenContent">
		<div class="content">
			<!-- İçerik alanı -->
		</div>
		<button type="button">
			<svg xmlns="http://www.w3.org/2000/svg" width="10.819" height="10.819" viewBox="0 0 10.819 10.819">
				<rect id="Rectangle_380" data-name="Rectangle 380" width="2.186" height="13.115" transform="translate(0 1.546) rotate(-45)" fill="#2d2d2d"/>
				<rect id="Rectangle_381" data-name="Rectangle 381" width="2.186" height="13.115" transform="translate(9.274) rotate(45)" fill="#2d2d2d"/>
			</svg>
		</button>
		<div class="mask"></div>
	</div>
	<script>
		let hiddenContent = function(display) {
			document.getElementById("hiddenContent").className = display;
		}
		document.getElementById("test").addEventListener("click", function(){
			hiddenContent("show");
		});
		document.querySelector("#hiddenContent button").addEventListener("click", function(){
			hiddenContent();
		});
		document.querySelector("#hiddenContent .mask").addEventListener("click", function(){
			hiddenContent();
		});
	</script>
</body>
</html>

18-01-2021, 16:04:59

#3

Receteart

teşekkürler.