HTML Tam Ekran Hamburger Menü Yapımı

Kaynak kodu ve videosu verilen hamburger menü ile tam ekran modda çalışan menüyü basit CSS bilginiz ve temel javascript deneyiminiz ile rahatlıkla yapabilirsiniz.

Uygulamada öncelikli olarak tam ekranda gelecek menüye ait tasarımı kodluyoruz. Ardından butonlara tıklandığında etkileşimi oluşturacak olan javascript kodlarını yazıyoruz.

İşte kodlar ve video

Hamburger menü ile tam ekran menü yapımı

Kaynak Kod:


<!DOCTYPE html>
<html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <style>
        body{
            margin:0;
            font-family: 'Lato',sans-serif;
        }
        .zemin{
            height: 100vh;
            width: 100vw;
            position: fixed;
            z-index:1;
            top:0;
            left:-100vw;
            background: rgba(0,0,0,.9);
            overflow-x: hidden;
            transition: .5s;
        }
        .zemin-icerik{
            position: relative;
            top:25%;
            width: 100%;
            text-align: center;
        }
        
        .zemin a{
            display: block;
            padding:8px;
            text-decoration: none;
            color:#818181;
            transition: .4s;
            font-size:36px;
            border-top:solid 2px rgba(241,241,241,0);
            border-bottom:solid 2px rgba(241,241,241,0);
        }
        
        .zemin-icerik a:hover, .zemin-icerik a:focus{
            color:#f1f1f1;
            border-top:solid 2px #f1f1f1;
            border-bottom:solid 2px #f1f1f1;
            background: #b71540;
        }
        .zemin .kapatBtn{
            position: absolute;
            top:40px;
            right: 40px;
            font-size:60px;
        }
    </style>
    <body>
    <div id="menu" class="zemin">
        <a href="#" class="kapatBtn" id="kapatBtn"> &times</a>
        <div class="zemin-icerik">
            <a href="#">Anasayfa</a>
            <a href="#">Anasayfa</a>
            <a href="#">Anasayfa</a>
            <a href="#">Anasayfa</a>
            <a href="#">Anasayfa</a>
        </div>
    </div>    
    <span id="menuAc"> ☰ Menü</span>
        
    <p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.</p>
        <script>
         var menuAc=document.querySelector("#menuAc");
         var menu=document.querySelector("#menu");
         var kapatBtn=document.querySelector("#kapatBtn");
            
            menuAc.addEventListener("click",function(){
               menu.style.left="0vw"; 
            });
            
            kapatBtn.addEventListener("click",function(){
                menu.style.left="-100vw"; 
            });
            
        </script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<style>

body{

margin:0;

font-family: 'Lato',sans-serif;

}

.zemin{

height: 100vh;

width: 100vw;

position: fixed;

z-index:1;

top:0;

left:-100vw;

background: rgba(0,0,0,.9);

overflow-x: hidden;

transition: .5s;

}

.zemin-icerik{

position: relative;

top:25%;

width: 100%;

text-align: center;

}

.zemin a{

display: block;

padding:8px;

text-decoration: none;

color:#818181;

transition: .4s;

font-size:36px;

border-top:solid 2px rgba(241,241,241,0);

border-bottom:solid 2px rgba(241,241,241,0);

}

.zemin-icerik a:hover, .zemin-icerik a:focus{

color:#f1f1f1;

border-top:solid 2px #f1f1f1;

border-bottom:solid 2px #f1f1f1;

background: #b71540;

}

.zemin .kapatBtn{

position: absolute;

top:40px;

right: 40px;

font-size:60px;

}

</style>

<body>

<a href="#" class="kapatBtn" id="kapatBtn"> &times</a>

<a href="#">Anasayfa</a>

</div>

<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.</p>

var menuAc=document.querySelector("#menuAc");

var menu=document.querySelector("#menu");

var kapatBtn=document.querySelector("#kapatBtn");

menuAc.addEventListener("click",function(){

menu.style.left="0vw";

});

kapatBtn.addEventListener("click",function(){

menu.style.left="-100vw";

});

</script>

</body>

</html>

Bunu paylaş:

Şunlar da Hoşunuza Gidebilir

Yorum yap X