Sol Taraftan Açılıp Kapanabilen Drawer Menü 165

Sol Taraftan Açılıp Kapanabilen Drawer Menü

Android’in Marshmallow sürümüyle hayatımıza giren Materyal Tasarım trendinin en çok beğenilen özelliği olan drawer menü hakkında bir örnek hazırladım. Google’nin yeniden tasarladığı veya yeni projelerinde sıkça yer verdiği drawer menü oldukça kullanışlı bir menüdür.

Tasarladığım menüyü adım adım yapılışını anlatarak sizlerle paylaşmak istedim, umarım beğenirsiniz. Menü oldukça kullanışlı ve modern bir yapıdadır. Çalışma mantığı ise hamburger görünümünde olan butona tıklayarak sol taraftan menünün açılması.  Çalışmamızda sadece html, css ve jquery kodlarını kullanacağız.

Demo

Çalışma codepen aracılığıyla tasarlandı, codepen sitesinde çalışmanın detaylı görünüme ve hazır kodlarına erişebilirsiniz.

Daha öncede buna benzer bir menü hazırlamıştım onada göz atabilirsiniz.

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

Css ile Drawer Menü Nasıl Yapılır?

Aşama (1)

İlk olarak örnekte font awesome ikon setini kullanacağımız için head tagine ekleyeceğiniz bu kod ile ikon setini çalışmamıza ekleyelim. Aşağıdaki iki aşamayı çalışmanızın head etiketinin içerisine ekleyeceğinizi bildiğinizi varsayıyorum.

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

Aşama (2)

Daha sonra menünün açılması için jquery kodları kullanacağımız için jquery kütüphanesini çağıralım.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

Aşama (3)

Olaya giriş yapma vakti! İlk olarak demoda gördüğünüz sayfanın en üstünde hep açık kalan menüyü yaratalım. (Sadece soldan açılan menüyü istiyorsanız bu aşamayı geçebilirsiniz. Sadece Hambuger butonunun kodlarını almanız yeterli. Aldığınız kodları gözükmesini istediğiniz herhangi bir yere eklemeyi unutmayın.)

 <header class="header">
   <div class="container">
     <div class="row">
       <div class="left menu-icon">
         <a href="#" id="hamburger-icon" title="Menu">
          <span class="line line-1"></span>
          <span class="line line-2"></span>
          <span class="line line-3"></span>
         </a>
      </div> 
      <ul class="menu right">
       <li class="text">Slide Left Menu Tutorial \</li>
       <li><a href="www.uckan.net">Home</a></li>
       <li><a href="www.uckan.net">Content</a></li>
      </ul>
    </div>
   </div>
 </header>

Yukarıda yaptığımız işlem oldukça basit left etiketiyle sol tarafa sol menünün açılması için tıklayacağımız butonun html kodlarını yazdım. Sağ tarafada right etiketiyle basit bir ul-li-a etiketlerini kullanarak menü oluşturdum.


Aşama (4)

Bu aşamada yukarada html kodlarını hazırladığımız sabit menünün css kodlarını hazırlayacağız. Bu aşamadaki kodları style.css dosyanızın içerisine eklemeniz gerekiyor. (Hali hazırda style.css dosyasınızın olduğu ve head etiketi içerisinde çağırdığınızı varsayıyorum).

Bu aşamada 3. aşama gibi soldan açılacak menü ile alakası yok atlayabilirsiniz ama tabikide hamburger butonun css içeriğini alarak. Onuda Buton adında bir açıklama girerek ayırdım.

.container {
 max-width: 1060px;
 margin: 0 auto
}
.row {
 margin-left: 15px;
 margin-right: 15px
}
/* Asıl Kodlar */
.left {
 float:left
}
.right {
 float:right
}
/* Buton */
#hamburger-icon {
 height: 20px;
 position: relative;
 display: block;
 margin-top: 1.200em;
 z-index: 9998;
 width: 50px
}
#hamburger-icon .line {
 display: block;
 background: #fff;
 width: 35px;
 height: 5px;
 position: absolute;
 left: 0;
 border-radius: 4px;
 transition: all 0.4s;
 -webkit-transition: all 0.4s;
 -moz-transition: all 0.4s;
}
#hamburger-icon .line.line-1 {
 top: 0;
}
#hamburger-icon .line.line-2 {
 top: 50%;
}
#hamburger-icon .line.line-3 {
 top: 100%;
}
#hamburger-icon.active .line-1 {
 transform: translateY(10px) translateX(0) rotate(45deg);
 -webkit-transform: translateY(10px) translateX(0) rotate(45deg);
 -moz-transform: translateY(10px) translateX(0) rotate(45deg)
}
#hamburger-icon.active .line-2 {
 opacity: 0;
}
#hamburger-icon.active .line-3 {
 transform: translateY(-10px) translateX(0) rotate(-45deg);
 -webkit-transform: translateY(-10px) translateX(0) rotate(-45deg);
 -moz-transform: translateY(-10px) translateX(0) rotate(-45deg)
}
/* Buton Son */
.header {
 background: #3F51B5;
 width: 100%;
 height: 60px;
 box-shadow: 0 1px 4px #1A237E;
 line-heigt: 6px;
 color: #fff
}
.header a {
 color: #fff
}
.header ul.menu>li {
 float:left;
 position: relative;
 line-height: 60px;
 padding: 0 1em
}
.header ul.menu>li:before {
 position: absolute;
 width: 100%;
 height: 2px;
 background-color: #fff;
 transition: all .3ms;
 bottom: 0;
 left:0;
 content: '';
 display: none
}
.header ul.menu>li:hover:before {
 display: block
}
.header ul.menu>li.text:after {
 position: absolute;
 content: '';
 background-color: #fff;
 width: 2px;
 height: 2px;
 right: 0;
 top: 29px
}

Burada yaptığımız işlemi anlatmak gerekirse; Header adında oluşturduğumuz div class’ına stil hazırladım daha menünün yan yana gözükmesi için standart kodlamayı yaptım daha sonra left ve right classlarına sağ ve sola yanaştırmak için kod ekledim. Birde yukarda bahsettiğim hamburger butonunu hazırladım.


Aşama (5)

Geldik konunun asıl amacına! Bu aşamada sol taraftan açılıp kapanabilen menünün html kodlarını oluşturacağız.

  <!-- Slide Left Menu -->
 <div class="slide-menu">
 <div class="slide-header">
 <h1>Uckan.net</h1>
 <p>Pen by Cagri Uckan</p>
 <div class="slide-close-button">
 <button class="close"><i class="fa fa-close"></i></button>
 </div>
 </div>
 <div class="slide-menu-here">
 <ul class="menu">
 <li><a href="http://www.uckan.net/">Home</a></li>
 <li class="title"><span>Categoires</span><div class="dropdownmenu"></div>
 <ul class="sub-menu">
 <li><a href="#">Sports</a></li>
 <li><a href="#">Wordpress</a></li>
 <li><a href="#">Technology</a></li>
 <li><a href="#">CSS</a></li>
 </ul>
 </li>
 <li><a href="#">About Me</a></li>
 <li><a href="#">Sponsor</a></li>
 <li><a href="#">Contact Me</a></li>
 </ul>
 </div>
 </div>

Yaptıklarımızı kısaca açıklayalım, Slide-menu adıyla menünün hepsini kapsayan bir div oluşturdum ve bu divi slide-header ve slide-menu-here diye ikiye ayırdım. Slide-header kısmında üst kısım yer alıyor, slide-menu-here kısmında ise menü içeriği yer alıyor. Ayrıca alt kategorisi olan kategoriler için açılıp kapanabilen bir düzende ekledim. Ha birde menüyü kapatma butonu ekledik. (slide-close-button)


Aşama (6)

Bu aşamada yukarıda html kodlarını hazırladığımız sol taraftan açılıp kapanabilen menünün css kodlarını hazırlayacağız.

İlk olarak menünün geneli kapsayan slide-menu classını hazırlayalım. İlk olarak menüyü gözükmeyecek şekilde sol tarafa -285px olarak kaydırdım (position fixed ve transform kodlarıyla) genişliğini ise 250px olarak ayarladım daha sonra geçiş için efekt ekledim.

.slide-menu {
 position: fixed;
 -webkit-transform: translateX(-285px);
 -ms-transform: translateX(-285px);
 transform: translateX(-285px);
 -webkit-transform-style: preserve-3d;
 transform-style: preserve-3d;
 will-change: transform;
 -webkit-transition-duration: .2s;
 transition-duration: .2s;
 -webkit-transition-timing-function: cubic-bezier(.4,0,.2,1);
 transition-timing-function: cubic-bezier(.4,0,.2,1);
 -webkit-transition-property: -webkit-transform;
 transition-property: transform;
 background: #fff;
 top:0;
 bottom: 0;
 color: #333;
 z-index: 9999;
 width: 250px;
 -webkit-box-shadow: 3px 0px 7px 0px rgba(0,0,0,0.25);
 -moz-box-shadow: 3px 0px 7px 0px rgba(0,0,0,0.25);
 box-shadow: 3px 0px 7px 0px rgba(0,0,0,0.25);
}

Daha sonra ikiye ayırdığımız menünün header yani üst kısmını tasarlayalım. Özel olarak birşey yapmadım standart şeyler. Background kısmında bulunan url’yi kendinize göre değiştirebilirsiniz.

.slide-header {
 height: 150px;
 color: #fff;
 top:0;
 background: url(http://3.bp.blogspot.com/-dXxdKFkVrdw/VKLa3bMmv2I/AAAAAAAAVjI/Lp0vf22tynE/s1600/sandiegodusk.png)no-repeat center center/cover;
 position: relative;
 text-align: center
}
.slide-header>h1 {
 padding: 2em 0 0
}
.slide-header p {
 font-size: 12px
}

Menüyü kapatmak için lazım olacak olan (menu-close-button) butonunun css kodlarını hazırlayalım. Burada da özel olarak anlatacak birşey yapmadım.

.slide-close-button button:hover{
 background-color: #a1a1a1
}
.slide-close-button button:active {
 background-color: #bbb
}
.slide-close-button button {
 background: #aaa;
 border: 0;
 font-size: 16px;
 border-radius: 50%;
 width: 35px;
 height: 35px;
 text-align: center;
 color: #fff;
 cursor: pointer;
 position: absolute;
 bottom: -15px;
 outline: none;
 right: 2em;
 z-index: 99999;
}

Aşağıda ise menünün ikinci kısmı yani menü kısmının css kodlarını hazırladım. Sub-menu ve dropdown özelliğide ekli.

.slide-menu>.slide-menu-here>.menu {
 padding: .5em 0;
}
.slide-menu>.slide-menu-here>.menu li {
 position: relative
}
.slide-menu>.slide-menu-here>.menu li>a{
 padding: .8em 1em;
 width: 100%;
 position: relative;
 border-bottom: 1px solid #ececec;
 display: inline-block
}
.slide-menu>.slide-menu-here>.menu li.title span {
 padding: .8em 1em;
 border-bottom: 1px solid #ececec;
 width: 100%;
 position: relative;
 display: inline-block;
}
.slide-menu>.slide-menu-here>.menu li>.sub-menu {
 -webkit-transform: translateY(-100px);
 -ms-transform: translateY(-100px);
 transform: translateY(-100px);
 -webkit-transform-style: preserve-3d;
 transform-style: preserve-3d;
 will-change: transform;
 -webkit-transition-duration: .65s;
 transition-duration: .65s;
 -webkit-transition-timing-function: cubic-bezier(.4,0,.2,1);
 transition-timing-function: cubic-bezier(.4,0,.2,1);
 -webkit-transition-property: -webkit-transform;
 transition-property: transform;
 display:none
}
.slide-menu>.slide-menu-here>.menu li>.sub-menu.active {
 display: block;
 -webkit-transform: translateY(0px);
 -ms-transform: translateY(0px);
 transform: translateY(0px);
}
.slide-menu>.slide-menu-here>.menu li>.sub-menu>li>a {
 padding-left: 2em;
 font-size: 13px;
 border-bottom: 1px solid #f5f5f5
}
.slide-menu>.slide-menu-here>.menu li.title>.dropdownmenu:after {
 content: "\f107";
 top: 10px;
 position: Absolute;
 right: 2em;
 background-color: #aaa;
 width: 20px;
 height: 20px;
 text-align: center;
 cursor: pointer;
 border-radius: 50%;
 line-height: 20px;
 color: #fff;
 font: normal normal normal 14px/20px FontAwesome;
}
.slide-menu a:hover {
 background-color: #f8f8f8
}

Önemli! Şimdi ise ekrandan kaybettiğimiz menüyü sola sıfırlayacağız. Yani hamburger butonuna tıklandığında ekranda olmayan menü sola sıfırlanmış şekilde belirecek. (Slide-left classını jquery koduyla ilerleyen aşamada html kodlarımızın arasına ekleyeceğiz)

/* Slide Left */
.slide-left {
 -webkit-transform: translateX(0);
 -ms-transform: translateX(0);
 transform: translateX(0);
 z-index: 99999;
}

Aşama (7)

Html ve css kısmını halletik sıra geldi jQuery kısmına. Aşağıda yaptığımız işlemde kısaca bahsedersek ilk olarak hamburger butonuna tıklandığında slide-menu divine slide-left classını ekleyeceğiz. Böylelikle gözükmeyen menü sola yaslanmış şekilde gözükecek. Daha sonra açılan menüyü eski haline çevirmek için kapatma butonuna veya siyah ekrana tıklandığında az önce eklediğimiz slide-left classını sileceğiz. Böylelikle menü ortadan kaybolmuş olacak.

Siyah ekran olarak bahsettiğim için menü haricindeki herhangi bir yer olacak.

/* ------------------------------------ */ 
/* MTD Menu
/* ------------------------------------ */ 
$(document).ready(function(){
 
// Menu Add Class Left
 $("#hamburger-icon").click(function(){
 $(".slide-menu").toggleClass("slide-left");
});

// Menu Add Class Close 
$('.slide-close-button button, .siyahekran').click(function(){
 $(".slide-menu").removeClass("slide-left");
});
// Menu Dropdown menu active
 $(".dropdownmenu").click(function(){
 $(".sub-menu").toggleClass("active"),fadeIn(46000);
});
});

Aşama (8)

Bu aşamada menü açıldığında menü haricindeki yerleri siyah ekran ile kaplayacağız. Aşağıdaki kodu </body> etiketinin önüne ekleyin.

<div class="siyahekran"></div>

Son olarakta css kodlarınızın arasına aşağıdaki kodu ekleyin. Aşağıda yaptığımız işlemin mantığı ise slide-left etiketi ekliyse siyahekran kodu çalışacak.

.siyahekran {
 background-color: transparent;
 position: absolute;
 top: 0;
 left: 0;
 height: 100%;
 width: 100%;
 visibility: hidden;
 -webkit-transition-property: background-color;
 transition-property: background-color;
 -webkit-transition-duration: .2s;
 transition-duration: .2s;
 -webkit-transition-timing-function: cubic-bezier(.4,0,.2,1);
 transition-timing-function: cubic-bezier(.4,0,.2,1);
}
.slide-left~.siyahekran {
 background-color: rgba(0,0,0,.5);
 visibility: visible;
}

Umarım işinize yarar, iyi çalışmalar.

Uckan

1995 doğumlu, balıkesirde yaşayan Fenerbahçeli kendi halinde bir yazar..

Bir Cevap Yaz

    1 Yorum

  1. Merhaba bu kod blogger uyumlumudur?