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.
Animasyonlu Hamburger Icon Yapımı
Hamburger İcon Html kodları
|
1 2 3 4 5 6 7 |
<div class="hamburger-btn"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> </div> |
Hamburger İcon Css kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
.hamburger-btn { width: 25px; cursor: pointer; padding: 3px 10px; border-radius: 4px; background-color: #068587; } .bar1, .bar2, .bar3 { width: 25px; height: 2px; background-color: #fff; margin: 6px 0px; transition: 0.4s; } .hamburger-change .bar1 { transform: rotate(-45deg) translate(-6px, 5px); } .hamburger-change .bar2 { /*IE8*/ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /*IE 5-7*/ filter: alpha(opacity=0); /*Modern Browsers*/ opacity: 0; } .hamburger-change .bar3 { transform: rotate(45deg) translate(-6px, -6px); } |
Hamburger İcon Jquery kodları
|
1 2 3 4 5 6 7 8 9 10 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function () { $(".hamburger-btn").click(function () { $(".hamburger-btn").toggleClass("hamburger-change"); }); }); </script> |
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.
