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.

3 Yorumlar

Yorum yap

This site uses Akismet to reduce spam. Learn how your comment data is processed.