CSS ile Off-Canvas mobil menü nasıl yapılır

CSS ile Off-Canvas mobil menü nasıl yapılır
117

Bu yazımda mobil cihazlarda off-canvas yöntemiyle çalışan kullanışlı bir menü tasarlayacağız. Bunu yaparken herhangi bir css ve jquery kodu kullanacağız.

Örnekte Kullandıklarım

Örneğin çalışması için jquery kütüphanesini ve fontawesome ikonunu<head> tag’ı içine eklemeniz gerekmekte.

  • FontAwesome
  • Google Font (Open Sans, Roboto Slab)
  • Html, CSS ve jQuery

CSS ile Off-Canvas mobil menü nasıl yapılır

Yapımı oldukça basittir ilk olarak html ile basit bir menü oluşturalım. Div taglari hakkında kısa bilgiler aşağıdadır.

  • .full-width-container menü’nün tamamını kapsar
  • #nav-toggle menü butonu’nu temsil ediyor
  • .menu-container menü içeriğini kapsar
<div class="full-width-container">
 <header class="menu">
     <button id="nav-toggle" aria-hidden="true"><i class="fa fa-align-justify"></i> Menu</button>
 <ul class="menu-container">
   <li><a href="">Anasayfa</a></li>
   <li><a href="">Haberler</a></li>
   <li><a href="">Blog</a></li>
   <li><a href="">Forum</a></li>
   <li><a href="">Hakkımda</a></li>
   <li><a href="">Uckan.Net</a></li>
   <li><a href="">Uckan Themes</a></li>
 </ul>
 </header>
</div>

CSS Düzenlemesini Yapalım

Geniliği tam ekran, yükseliği 45px, arkaplanıda siyah olarak ayarlayalım.

.full-width-container {
 width: 100%;
 background: #000;
 height: 45px
}

Menü içeriğine genişlik girelim, ortalayalım ve önceliğini ayarlayalım

.full-width-container>.menu {
 font-family: 'Open Sans', sans-serif;
 width: 85%;
 z-index:2;
 margin:0 auto;
}

Hover efektlerini ayarlayalım

.full-width-container>.menu>ul>li>a, .full-width-container>.menu>ul>li:first-child>a:hover {
 color:#bbb;
}
.full-width-container>.menu>ul>li:first-child>a, .full-width-container>.menu>ul>li>a:hover {
 color: #fff
}

li etiketlerini yan yana dizelim ve boşluklarını ayarlayalım.

.full-width-container>.menu>ul>li {
 display: inline-block;
 padding: 10px
}

Menü’yü açıp kapatabileceğimiz butonun css ayarlarını yapalım ilk olarak standart görünümde görünümüzü gizleyelim ve sıfırlanması gerekenleri sıfırlayalım.

#nav-toggle {
 display: none;
 color: #fff;
 background: transparent;
 border: 0;
 font-size: 18px;
 line-height: 42px;
 margin-right: 1rem;
}

Sonuç

standart-gorunum


 

CSS bilen herkesin yapabileceği bir standart menü tasarladık sırada mobil daha doğrusu küçük çözünürlüklerde menü’nün nasıl görünmesini istiyorsak onun kodlamasını yapalım.

Off-Canvas Ekleyelim

Bu işlemde ne yapacağımızı anlatacak olursam yukarıdaki ulaştığınız sonucu ekranların çözünürlüğünün genişliği (bilgisayar, tablet, telefon) 1023px'den küçükse menü’müz aşağıdaki görünümü alacak ve Menü butonuna tıklandığında sol kısımda menü içeriği görünecek. Örnek aşağıdadır.

mobil-gorunum

[box type=”alert-info”]Çözünürlüğü ben 1023px’olarak ayarladım siz değiştirebilirsiniz.[/box]

@media only screen and (max-width : 1023px) {
/* aşağıdaki kodlar buraya */
}

[box type=”alert-success”]Aşağıda yazacağımız kodları yukarıda belirttiğim kısma eklemeniz gerekmekte.[/box]

Menü’yü aç kapa yaptıracağımız butonu stanrdant görünümde gizlemiştik şimdi onu görünür duruma getirelim ve sol kısımda menüyü göstereceğimiz için sağ tarafa gönderelim.

.full-width-container>.menu {width: 100%}
#nav-toggle {
 display: block;
 float:right
 }

Daha sonra menü içeriğini gizleyelim, yükseliği tam ekran yapalım ve en üste sabitleyelim. Daha sonra li etiketlerini yan yana değilde alt alta sıralayalım

 .full-width-container .menu ul {
 position: fixed;
 background: #333;
 left:-9999px;
 top: 0;
 width: 225px;
 height: 100%;
 }
.full-width-container .menu ul li {
 display: block;
 padding-left: 1rem
 }

Son olarakta menü’yü açmak için butona tıklandığında eklenecek olan css classını düzenleyelim. Bunun amacı gizlediğimiz menü içeriğini en sola sabitlemek.

 .left {
 left:0 !important;
 }

İşlem tamam, son olarak jquery kodlamamızıda yapalım. Yapacağımız kodlama ile butona tıklandığında ul tag’ına left class’ı eklenmiş olacak böylelikle gizlenen menü açığa çıkmış olacak.

$(function() {
//Menu Toggle
 $('#nav-toggle').click( function(e){
 e.preventDefault();
 $('.menu-container').toggleClass('left');
 });
});

Yorum Yap