Animasyonlu Hamburger İcon Yapımı

Bu yazımızda Css ve Jquery kullanarak animasyonlu hamburger iconu nasıl yapabiliriz onu öğreneceğiz. Bu iconun 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 icona tıklandığında menü mobil cihaza uyumlu bir şekilde görünür.

Responsive menünün nasıl yapıldığını öğrenmek isterseniz Responsive Menü Yapımı yazımı okuyabilirsiniz.

Bugün sadece hamburger icon yapımını öğreneceğiz. 

Hamburger İcon Html kodları

Hamburger İcon Css kodları

Hamburger İcon Jquery kodları

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

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

► İcona tıklandığında ortadaki çizginin opacity değerini 0 (sıfır) 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.

Animasyonlu Hamburger İconun Son Hali

Umarım sizin için faydalı bir yazı olmuştur.

Şu yazılar da ilginizi çekebilir.

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

Jquery ile Beğendim – Beğenmedim Uygulaması

Yeni bir yazımda görüşmek üzere.

Yorum Yazın

E-BÜLTEN ABONELİĞİ

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Asp.Net MVC, MSSQL ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.
ABONE OL
close-link