Css İle Mobil Menü Hamburger Aç-Kapa Butonları



Mobil web tasarımında menü butonlarını cihazlar için daha anlamlı hale getirmemiz gerekiyor. Bu menü butonları açılır pencere yardımı ile cihazlarda kullanıcıyı yönlendiren basit ama en önemli site içi dağılım metodudur. Bu konuda menü butonlarını oluştururken Jonathan Suh' un yazmış olduğu css uygulamasını kullanacağız.

Başlarken buradan hamburger.css dosyasını ve ek örnek uygulamanın yer aldığı dosyayı indirin. Github' dan projeye erişmek için buraya tıklayınız.


Yazdığım uygulamada bootstrap navigation toogle kullandım. Mobil button kullanımında class değerimizi hamburger.css de yazılmış sınıfları kullanarak dilediğimiz hamburger buttonunu uygulayabileceğiz.


class="hamburger hamburger--3dx navbar-toggle collapsed"

Yukarıdaki class değerimizde hamburger hamburger--3dx hamburger.css dosyamızdaki sınıflar navbar-toggle ve collapsed bootstrap kütüphanesi üzerinden kullandığımız tanımlı sınıflardır. Kullanabileceğimiz menü butonları için hamburger.css içinde yazılmış sınıflar şunlar;

  • hamburger--3dx
  • hamburger--3dx-r
  • hamburger--3dy
  • hamburger--3dy-r
  • hamburger--arrow
  • hamburger--arrow-r
  • hamburger--arrowalt
  • hamburger--arrowalt-r
  • hamburger--boring
  • hamburger--collapse
  • hamburger--collapse-r
  • hamburger--elastic
  • hamburger--elastic-r
  • hamburger--emphatic
  • hamburger--emphatic-r
  • hamburger--slider
  • hamburger--slider-r
  • hamburger--spin
  • hamburger--spin-r
  • hamburger--spring
  • hamburger--spring-r
  • hamburger--stand
  • hamburger--stand-r
  • hamburger--squeeze
  • hamburger--vortex
  • hamburger--vortex-r
"hamburger--3dx" sınıfı yerine yukarıdaki sınıflardan birini yazarak test edebiliriz. Bootstrap kütüphanesinde kullanılan klasik mobil menü butonunu düzenleyelim.


<div class="navbar-header">    
  <button type="button" class="hamburger hamburger--3dx navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </button>
  <a class="navbar-brand" href="#">Mobil Menü</a>
</div>

Yukarıdaki kod bloğunda <button> elementinin class="" değerine hamburger.css sınıflarını ekleyerek menü butonlarını elde etmiş oluyoruz.

Örnek Uygulama Uygulamayı İndir

Uygulamaya bootstrap kütüphanesini ve jquery kütüphanesini ekliyoruz. Örnek uygulamayı incelediğiniz dosyaların eklendiğiniz göreceksiniz. Ekstra olarak jsfiddle da uygulamaya erişebilirsiniz. jsfiddle da gör.
Kaynaklar
https://jonsuh.com/hamburgers/
http://getbootstrap.com/getting-started/#examples
https://github.com/jonsuh/hamburgers

0 yorum

Yorumda bulunarak kendin için, senden sonrakiler için ve bu blog için bir şeyler yazabilirsin. Durma sor, paylaş. Buraya bir hatıra bırak ;)

HTML: Bazı HTML etiketlerini kullanabilirsiniz.(b,a,i vb.)
UYARI: Yorumlar onaylanmadan direk yayınlanıyor. Yorumunuzun yayında kalması için etik kurallara dikkat edelim.

© Php, E-Ticaret ve Web Programlama
Blogger ozkistyle programmer theme
Released under Creative Commons 3.0 CC BY-NC 3.0