Bu yazımızda Css ve Jquery kullanarak responsive menü nasıl yapılır onu öğreneceğiz. Kodlarımıza geçmeden önce responsive menü nedir ondan bahsedelim.
Responsive olmayan bir menü hem bilgisayarda hem mobil cihazlarda aynı görünümde olacaktır. Bu yüzden mobilden sitemizi ziyaret eden birisinde menü uyumlu görünmeyecektir. Yaptığımız tasarımların tüm cihazlarda ( bilgisayar, tablet, telefon vb.. ) uyumlu olması için responsive tasarımlar yapmamız gerekiyor. Bu yöntemle yapacağımız menüler mobil cihazlar ile de uyumlu olacaktır.
Daha fazla bilgi için RESPONSİVE WEB TASARIM NEDİR? yazımı okuyabilirsiniz.
Responsive kavramını öğrendiğimize göre kodlarımıza geçebiliriz.
Responsive Menü Yapımı
Responsive Menü Html 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 |
<div> <ul> <li class="active"> <a href="#">Anasayfa</a> </li> <li> <a href="#">Hakkımda</a> </li> <li> <a href="#">Blog</a> </li> <li> <a href="#">Servisler</a> </li> <li> <a href="#">İletişim</a> </li> </ul> <div class="hamburger-btn"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> </div> </div> |
Responsive Menü 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 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
ul { padding: 0; margin: 0; list-style-type: none; background-color: #4fb99f; overflow: auto; } ul li { float: left; border-bottom: 3px solid #4fb99f; } ul li a { display: inline-block; padding: 12px 24px; text-decoration: none; color: #fff; font-size: 18px; } ul li.active { background-color: #068587; border-bottom: 3px solid #f2b134; } ul li:hover:not(.active) { background-color: #068587; border-bottom: 3px solid #f2b134; } .hamburger-btn { display: none; cursor: pointer; padding: 3px 10px; border-radius: 4px; background-color: #068587; float: right; } .hamburger-btn .bar1, .hamburger-btn .bar2, .hamburger-btn .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); } |
Responsive Menü Media 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 |
@media screen and (max-width: 768px) { ul { display: none; position: absolute; z-index: 2; top: 50px; left: 0px; width: 100%; } ul li { float: none; border-bottom: none; border-left: 6px solid #4fb99f; } ul li.active { border-bottom: none; border-left: 6px solid #f2b134; } ul li:hover:not(.active) { border-bottom: none; border-left: 6px solid #f2b134; } .hamburger-btn { display: inline-block; } } |
Responsive Menü Jquery Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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"); $("ul").finish().slideToggle(500); }); $("li").click(function () { $("li").removeClass("active"); $(this).addClass("active"); }); }); </script> |
⇒ Örneğimizi, tarayıcı boyutunun 768px den büyük ve küçük olduğu durumlarda incelerseniz aradaki farkı daha iyi anlayabilirsiniz.
Şu Html ve Css menü örnekleri de ilginizi çekebilir.
Css ile Yatay Sabit Menü Yapımı
Css ile Yatay Açılır Menü Yapımı
Css ile Dikey Sabit Menü Yapımı
Animasyonlu Hamburger İcon Yapımı
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
Sanırım active class’ı juqery de değiştirtmeyi unuttun usta.
Yorumun için teşekkürler Nejdet. Tıklanan menü öğesinin aktif olması için Jquery kodlarına aşağıdaki kodları ekleyebilirsin.
Yazı içerisindeki Jquery kodlarını da bu şekilde güncelledim.
.hamburger-change şeklinde bir class’tan bahsedilmiş. Ama html içinde böyle bir kısım yok hocam.
Merhaba, hamburger-change classını jquery kodları ile ekleyip çıkarıyoruz. İyi çalışmalar.