<!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>