CSS ile Mobil Menü

Özellikle mobil uygulamalarda gördüğümüz açılıp kapatılabilir menü örnekleri artık web tarafında da fazlasıyla kullanılıyor. Minimalist tasarımın vazgeçilmezi haline gelen bu yapı, genellikle responsive web sitelerin mobil versiyonlarında navigasyon yükünü sırtlıyor.

Bu makalemizde CSS ve biraz da jQuery desteğiyle açılıp kapatılabilir şık bir menü tasarlayacağız.

ÖRNEĞİ GÖRÜNTÜLE

Açılıp/Kapanır Menü

Bu menü yapısı, tasarımcıya içerik alanında yer kazandırdığı için fazlasıyla kullanışlı.

Yapımında sadece toggle işlemi için jQuery desteğine ihtiyaç duyacağız. İşin geriye kalan tüm kısımlarını HTML ve CSS kodlarıyla hazırlayacağız. İlk olarak HTML kodlarımızı yazarak işleme başlayalım.

HTML Kodları

Örnekte kullandığımız iconları siz de kullanmak istiyorsanız ilk olarak head içerisine Font Awesome‘ı tanıtın.

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

Daha sonra geriye kalan HTML kodlarımızı ekleyelim.

<div class="mobil-menu">
  <ul>
    <li><a href="#"><i class="fa fa-home"></i> Anasayfa</a></li>
    <li><a href="#"><i class="fa fa-comments"></i> Mesajlar</a></li>

    <li><a href="#"><i class="fa fa-graduation-cap"></i> Eğitim</a></li>
    <li><a href="#"><i class="fa fa-flask"></i> Deneyler</a></li>
  </ul>
</div>
<i class="ac-kapa fa fa-bars"></i>

CSS Kodları

Body elemanına yapmamız gereken birkaç tanım mevcut. Örneğin margin değerini sıfıra çekmemiz gerek. Böylece toggle butonu köşeye yapışacak. Overflow’u ise hidden olarak tanımlayalım, böylece de menü aktif edildiğinde sağa itilen ekran, istenmeyen bir scroll görünüme sebep olmayacaktır. Ve positionu da relative yaparak menünün diğer öğeleri de itmesini sağlayacağız.

body {
  left: 0;
  margin: 0;
  overflow: hidden;
  position: relative;
  background-color:#333
}

Şimdi menünün tasarımını yapalım.

.mobil-menu {
  background: #111111;
  left: -250px;
  height: 100%;
  position: fixed;
  width: 250px;
}

.mobil-menu ul {
  border-top: 1px solid #636366;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobil-menu li {
  border-bottom: 1px solid #222;
  line-height: 45px;
  padding-bottom: 3px;
  padding-left: 20px;
  padding-top: 3px;
  color:grey;
  text-decoration:none;
  transition:all .6s;
}

.mobil-menu li:hover {
  background-color:#000;
  color:white;
}

.mobil-menu li a{
  color:inherit;
  text-decoration:none;
}

Ve son olarak toggle butonunu tasarlayalım.

.ac-kapa{
  background-color:white;
  padding:12px 8px; 
  margin:50px 0;
  font-size:110%; 
  border-radius:0 6px 6px 0
}

jQuery Kodları

Body’nin bittiği yere, </body> tanımının hemen öncesine jQuery’i ekleyerek devam edelim.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

Şimdi de bu satırın hemen altına açılıp kapanma fonksiyonunu ekleyelim.

var acikmi = 1;
$(".ac-kapa").click(function(){
  if ( acikmi == 1 ) {
    $('.mobil-menu').animate({left: '0px'}, 200);
    $('body').animate({left: '250px'}, 200);
    acikmi = 2;
  } else {
    $('.mobil-menu').animate({left: '-250px'},200);
    $('body').animate({left: '0px'}, 200);
    acikmi = 1;
  }
});

Bu kadar!

Kapanış

Biraz konu dışı olacak fakat artık makalelerimizde zorluk seviyesi gösterilmekte. Bu küçük yeniliği de makalenin altına sıkıştırmak istedik 🙂

İyi çalışmalar.