Aşağı Doğru Açılan Menü/Satır
<html>
<head>
<style>
.alt-menu {
width:10%;
position:relative;
float:left;
}
#acilirmenu{
display: none; /*Buradan görünmez kılıyoruz. */
}
#menum { display:none; position:absolute; width:100%; }
#acilirmenu:checked + #menum { display:block; }
</style>
</head>
<body>
<div class="yenialan">
<div class="alt-menu alt-1">
<label for="acilirmenu"><b>EKLE / KAPAT</b></label><input type="checkbox" id="acilirmenu"/>
<div id="menum">Ekleme Yapacağınız Alan</div>
</div>
</body>
</html>
Sağdan Açılır Kapanır Menü Kodları
Aşağıdaki kodları direk olarak “.html” olarak kaydedip canlı deneyebilirsiniz.(HTML + CSS + JS BİRLİKTE)
<html>
<head>
<title>
Açılır Kapanır Menü "Sağdan" | Furkan DEMİRCİ
</title>
<style>
a {
text-decoration:none;
}
ul {
color:blue;
}
li {
margin-bottom: 10px;
}
.toggle-menu {
width: 50px;
height: 50px;
display: inline-block;
position: relative;
top: 10px;
float: right;
z-index: 1000;
}
.toggle-menu i {
position: absolute;
display: block;
height: 2px;
background: #0094FC;
width: 30px;
left: 0px;
-webkit-transition: all .3s;
transition: all .3s;
}
.toggle-menu i:nth-child(1) {
top: 16px;
}
.toggle-menu i:nth-child(2) {
top: 24px;
}
.toggle-menu i:nth-child(3) {
top: 32px;
}
.toggle-menu.active i:nth-child(1) {
top: 25px;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.toggle-menu.active i:nth-child(2) {
background: transparent;
}
.toggle-menu.active i:nth-child(3) {
top: 25px;
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
}
.container {
position: relative;
overflow: hidden;
height: 9000px;
}
.menu-drawer {
width: 200px;
background-color: #cde0ff;
height: 900px;
position: absolute;
right: -550px;
top: 0;
transition: right linear .2s;
padding: 50px;
}
.open {
right: 0px;
transition: right linear .2s;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="container">
<a class="toggle-menu" href="#">
<i></i>
<i></i>
<i></i>
</a>
<div class="menu-drawer">
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">İletişim</a></li>
<li><a href="https://www.furkandemirci.com">FurkanDemirci</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
$(function() {
$(".toggle-menu").click(function() {
$(this).toggleClass("active");
$('.menu-drawer').toggleClass("open");
});
});
</script>
</body>
</html>
