Animasyonlu Hamburger İcon Yapımı

Merhaba Arkadaşlar,
Bu makalede Css ve Jquery kullanarak animasyonlu hamburger icon’u nasıl yapabiliriz onu öğreneceğiz.Bu icon’un en çok kullanıldığı yer responsive menü’lerdir.Responsive bir menü yaparken ekran mobil boyutuna geçtiğinde menü gizlenir ve hamburger icon görünür.Bu icon’a tıklandığında menü mobil cihaza uyumlu bir şekilde görünür.Bugün sadece icon yapımını öğreneceğiz.Başka bir makalede responsive menü nasıl yapılır onu da anlatacağım.Kodlarımıza geçelim.

Html kodlarımız;

Css kodlarımız;

Jquery kodlarımız;

Kısaca yazdıklarımızı özetlersek;

► Class’ı bar1, bar2, bar3 olan div’ler ile icon içerisindeki çizgileri oluşturuyoruz.

► İcon’a tıklandığında ortadaki çizginin opacity değerini 0 yaparak gizliyoruz.Alt ve üst çizgiyi ise transform özelliğini kullanarak çarpı (x) haline dönüştürüyoruz.

► Jquery’de toggleClass metodu ile her tıklamada bir üç çizgi olmasını bir çarpı olmasını sağlıyoruz.

Uygulamamız;

Şu makaleler de ilginizi çekebilir.

Responsive Menü Yapımı

Jquery ile Butona Tıklayınca Metin Kutusundaki Sayıyı Artırmak ve Azaltmak

Jquery ile Beğendim – Beğenmedim Uygulaması

Yeni bir makalede görüşmek üzere.

Leave a Reply

TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +