JavascriptPopüler İçerikler
Css ile tıklayınca açılır kapanır menü/satır

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>