HTML, CSS, jQuery kullanarak resimde de görüldüğü gibi responsive menü yapacağız. Demo yu buradan görüntüleyebilirsiniz.
Menü kodlarına ve canlı örneğine buradan ulaşabilirsiniz.
HTML Kodları
- Menünün genel yapısını oluşturuyoruz
- nav etiketi altında liste etikletleri (ul li) ile menü elemanlarını oluşturalım
- Menünün açılır olduğunu belirtmek için li etiketine “dropdown” sınıfını ekledim.
- Açılır menü için li.dropdown etiketi içerisinde yeni bir ul li yapısı oluşturuyoruz.
- “dropdown-menu” isimli div alt menümüz olacak.
- Responsive olduğunda menüyü açıp kapatmak için bir buton,link eklememiz gerekiyor bunu da nav içerisine ul etiketinin üzerinde aşağıda görüldüğü gibi yeni bir div ekleyerek yaptık.
<nav> <div class="menu-toggle"><i class="fa fa-bars"></i></div> <ul> <li><a href="">Anasayfa</a></li> <li><a href="">Hakkımda</a></li> <li class="dropdown"> <a href="">Galeri</a> <ul class="dropdown-menu"> <li><a href="">Video Galeri</a></li> <li><a href="">Foto Galeri</a></li> </ul> </li> <li><a href="">Blog</a></li> <li class="dropdown"> <a href="">İletişim</a> <ul class="dropdown-menu"> <li><a href="">Alt Menü 1</a></li> <li><a href="">Alt Menü 2</a></li> <li><a href="">Alt Menü 3</a></li> <li><a href="">Alt Menü 4</a></li> </ul> </li> </ul> </nav>
CSS Kodları
- Nav etiketini biçimlendiriyoruz. Genişliğini %100 yaptık, gölge verdik, arkaplan rengi verdik. (No:9)
- Normal menü mantığını uyguladık ul li elemanlarına float:left özelliğini vererek yan yana gelmesini sağladık. (No:29)
- “dropdown-menu” sınıfına opacity, visibilty,top, gibi değerler vererek gizledik. Bu şekilde gizlememizin sebebi efektif bir şekilde açılması için. (no:73)
- Gizlediğimiz menüyü “dropdown” classı verdiğimiz etiketin üzererine gelince açtırıyoruz. (No:61)
- Media etiketleri ile max-width yani genişlik 991px olduğunda menünün nasıl bir şekilde olacağını belirliyoruz.
@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,700&subset=latin-ext'); * { margin: 0; padding: 0; } body { background-color: #F22613; } nav { font-family: 'Poppins'; width: 100%; background: #fff; margin: 150px auto; box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); } nav ul { margin: 0; padding: 0; list-style: none; } nav ul:before, nav ul:after { content: ""; display: table; } nav ul:after { clear: both; } nav ul > li { float: left; } nav ul > li > a { position: relative; display: block; padding: 16px 25px; color: #444; font-size: 15px; text-decoration: none; } nav ul > li > a::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; margin: auto; width: 0%; height: 3px; background-color: #df1e0c; transition: all 200ms; } nav ul > li > a:hover { color: #F22613; } nav ul > li > a:hover::after { width: 100%; } nav ul > li.dropdown { position: relative; } nav ul > li.dropdown:hover .dropdown-menu { top: 100%; opacity: 1; visibility: visible; } nav ul > li.dropdown > a::after { position: static; content: "\f107"; font-family: 'FontAWesome'; background: transparent; margin-left: 10px; } nav ul > li.dropdown .dropdown-menu { width: 180px; position: absolute; top: 500%; opacity: 0; visibility: hidden; background-color: #fff; margin-top: 20px; transition: all 250ms; box-shadow: 0 0 15px rgba(0, 0, 0, 0.08); } nav ul > li.dropdown .dropdown-menu::before { content: ""; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #fff; margin-top: -8px; margin-left: 20px; } nav ul > li.dropdown .dropdown-menu li { width: 100%; border-bottom: 1px solid #f1f1f1; margin-top: 5px; } nav ul > li.dropdown .dropdown-menu li a { color: #444; width: 100%; display: block; font-size: 14px; padding: 8px 20px; } nav ul > li.dropdown .dropdown-menu li a::after { display: none; } nav ul > li.dropdown .dropdown-menu li a:hover { color: #F22613; } nav .menu-toggle { display: none; width: 30px; height: 30px; border: 1px solid #F22613; text-align: center; line-height: 30px; color: #F22613; box-shadow: 0 0 12px rgba(0, 0, 0, 0.12); margin: auto; } nav .menu-toggle:hover { color: #fff; background-color: #F22613; cursor: pointer; } /* responsive */ @media (max-width: 991px) { nav { padding: 20px 0; } nav > ul { display: none; margin-top: 20px; border-top: 1px solid #eaeaea; } nav > ul > li { float: none; } nav > ul > li > a { text-align: center; } nav > ul > li.dropdown:hover .dropdown-menu { display: block; } nav > ul > li.dropdown .dropdown-menu { display: none; position: relative; margin: auto; background-color: #F22613; } nav > ul > li.dropdown .dropdown-menu::before { display: none; } nav > ul > li.dropdown .dropdown-menu li a { color: #fff; text-align: center; padding: 8px 0; } nav .menu-toggle { display: block; } } @media (min-width: 991px) { nav > ul { display: block!important; } }
jQuery Kodları
- menu-toggle a tıklandığında menüyü açıp kapatması için.
$('.menu-toggle').click(function(){ $('nav > ul').slideToggle(200); });