Responsive Menü Yapımı

Merhaba, daha önce HTML ve CSS ile basit menü yapmıştık, ancak aradan uzun süre geçti bende bu yazımda sizlere Responsive Menü Yapımı `nı anlatmak istedim. Kısa bir süre sonra videolu olarak anlatımını da yapacağım. Aşağıdan demo halini ve kaynak kodları görebilirsiniz.

 

Demo halini görmek için buraya tıklayınız, Codepen halini görmek için buraya tıklayınız.

 

Responsive Menü Nasıl Yapılır ?

1) İlk olarak bir HTML dosyası oluşturalım ve içerisine aşağıdaki kodları yazalım.

• Ne yaptık “menu” adında bir div oluşturduk.
• Küçük boyutlarda görünecek olan ve menüyü açmamızı sağlayacak elemanı “open” adında bir div olarak oluşturduk.
• İçerisine ul li liste elemanları ile menü yapısını kurduk.

<div class="menu">
    <div class="open">MENÜ</div>
    <ul>
        <li><a href="#">Anasayfa</a></li>
        <li><a href="#">Hakkımda</a></li>
        <li><a href="#">Galeri</a></li>
        <li><a href="#">Müzik</a></li>
        <li><a href="#">İletişim</a></li>
    </ul>
</div>

 

2) Şimdi menüyü biçimlendirmeye geçelim bunun için bir CSS dosyası oluşturalım ve içerisine aşağıdaki kodları yazalım.

• Burada neler yaptık ? İlk olarak “Open Sans” fontunu google fonts aracılığı ile sayfaya dahil ettik.
• Bazı sıfırlamalar yaptık, .menu divi ne bir arkaplan verdik.
• Küçük boyutlarda görünecek olan .open divi ni biçimlendirdik ve gizledik.
• Normal bir yatay menü yapısını kurduk.
• :after seçicisi ile menümüz ün hover efektini oluşturduk.
• Kısaca Bu kısıma kadar normal bir menü yapısını oluşturduk.

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600');
*{
    padding:0;
    margin:0;
    list-style-type:none;
    text-decoration: none;
}
body{
    font-family:"Open Sans", sans-serif;
    font-weight:600;
}
.menu{
    background-color: #222;
    overflow:hidden;
}
.menu .open{
    display:none;
    color:#fff;
    padding:15px;
    background-color: #000;
    cursor: pointer;
}
.menu ul li{
    float:left;
    margin-right:10px;
}
.menu ul li a{
    z-index:9999;
    position: relative;
    display:block;
    color:#BDBDBD;
    font-size:14px;
    letter-spacing:.7px;
    padding:15px 12px;
}
.menu ul li a:after{
    z-index:-1;
    content:"";
    position:absolute;
    width:100%;
    height:0%;
    bottom:0;
    left:0;
    background-color: red;
    transition:height 150ms;
}
.menu ul li a:hover{
    color:#fff;
}
.menu ul li a:hover:after{
    height: 100%;
}

 

3) Bu adımda ise responsive olayına geçiyoruz. Stil dosyamıza aşağıdaki kodları da ekleyelim.

• @Media ile sayfamız 768px boyutuna gelince olacak değişiklikleri ayarlıyoruz.
• .open divi ni display:block ile gösteriyoruz, .menu ul ile menüyü gizliyoruz.
• .menu ul li float:none ile yan yana sıralanmış menü elemanlarını alt alta sıralıyoruz.

@media (max-width:768px) {
    .menu .open{display:block;}
    .menu ul {display:none;}
    .menu ul li{float:none; margin-right:0; border-bottom:1px solid #333}
    .menu ul li:last-child{border-bottom:none}
}
@media (min-width:768px) {
    .menu ul {display:block!important;}
}

 

4) Son kısım kaldı, o da menüyü açmak ve kapatmak bunun için jQuery kullanacağız. Aşağıdaki kodları </head> etiketinin üzerine ekliyoruz. Sayfaya jQuery dosyasını dahil ettiğinizi var sayıyorum.

<script>
    $(function(){
        $(".open").click(function(){
            $(this).next("ul").toggle(200);
        });
    });
</script>

Tüm işlemler bu kadar yatay bir responsive menü yapmış olduk.