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

Paylaşan Admin

11 Temmuz 2019 Perşembe

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.

Mobil Menü

Yukarıdaki kod bloğunda

Bunu Paylaş :