Selam millet bugünkü yazımda Responsive Menü nasıl yapılır onu anlatıp kodlarını sizinle paylaşacağım. Bende responsive tasarımla pek uğraşmadığım için kendi css’ime eklerken zorlandım bu yüzden ayrıntılı olarak anlatmak istedim.
İlk başta Html kodlarını paylaşarak başlıyayım.
<div class= "menu"> <div class="open"><img src="image/menu.png"> </div> <ul> <li><a href="#">Anasayfa </a></li> <li><a href="#">Yazılarım </a></li> <li><a href="#">Haberler </a></li> <li><a href="#">Hakkımda </a></li> <li><a href="#">iletişim </a></li> </ul> </div>
Eğer yazılmış bir Css dosyanız varsa ve onun üstünde değişiklik yaparak responsive yapmaya çalışıyorsanız benim yaşadığım sorunları yazayım sizde aynı sorunları yaşamayın. Menu divinizin bir yükseklik ve genişlik değeri olmamalı
Css kodlarımız
/* Menü Başlangıç */ .menu{ background-color:#000; overflow: hidden; } ul { margin: 0; padding: 0; list-style: none; display: flex; justify-content: center; list-style-type: none; } li a { display: block; padding: 9px 15px; color: #ffffff; text-decoration: none; transition: all 0.5s; } li a:hover { display: block; padding: 9px 15px; background-color:#e5730e; text-decoration: none; color:#fff; } .open{ color:#fff; width:36px; height: 40px; cursor: pointer; display: none; } .open img{ padding-top:4px; } /* Mobil CSS */ @media (max-width:768px){ /* Ekran boyutu 768 ve altında oldugu zaman görünecek kısmın kodları */ .open{ display:block; } { position: absolute; background-color: #FF6900; width: 100%; transition: all 0.5s; } ul { flex-direction: column; display: none; } ul li { border-top: 1px solid #ffffff; } ul li a{ text-decoration: none; text-align: center; } ul li a:hover{ background-color:#e5730e; text-decoration: none; color:#fff; } } @media (min-width:768px) { /* Masaüstü görünümüne tekrar döndüğümüzde mobil görünümden çıkması için yazdığımız kodlar*/ .menu ul {display:flex!important; flex-direction: none; justify-content: center; } }
Jquery Kodları: (<head> Arasına yazacağınız kodlar </head>)
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(function(){ $(".open").click(function(){ $(this).next("ul").toggle(200); }); }); </script>
Yalnız Jquery kodlarını yazdığınızda çalıştırabilmek için Bu linke tıklayıp jquery dosyasını indirmeniz ve projeye dahil etmeniz gerekmekte
Ek olarak yine <head> </head> kısmına <meta name=”viewport” content=”width=device-width, initial-scale,maximum-scale=1″> bunuda eklemelisiniz responsive menüyü çalıştırabilmek için.
Sorularınız olursa sitede bulunan sosyal medya hesaplarımdan veya iletişim bölümünden bana yazarak ya da konu altına yorum bırakarak ulaşabilirsiniz. Bir sonraki yazıda görüşmek üzere.
keşke demo koysaydın.
Ya Ben Olayı analmadım metin dekorasyonu yok demişsin de onlarıda bizmi
eklicez
Kodları güncelledim bu şekilde yapabilirsin. İyi günler 🙂