Responsive Menu Yapımı

Responsive Menu Yapımı - Merhaba arkadaşlar bu yayımda sizlere Mobil uyumlu menu yapımını göstericem. Bildiyiniz gibi HTML5 ve CSS3 çıkdıktan sonra vebde nerdeyse her şeyi yapmak mümkün oldu. Bu menuyu yapmak içinde bunlar oldukça kolaylık sağlıyor.

Responsive Menu Yapımı

1. İlk önce <head></head> etiketleri arasına şu kodları ekleyin:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600,400' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

2.Ve sonra <style></style> tagları arasına Aşağıdaki CSS kodlarını ekleyin:

/* Menu */
div,ul,li,a{display:block;margin:0;padding:0;}
.navbar{max-width: 1160px;margin:0 auto;}
.navbar-out {width: 100%;background-color: #34495e; overflow: hidden;}
ul.navbar-left {}
ul.navbar-left li {float: left;list-style:none;}
ul.navbar-left li a,ul.navbar-right li a {padding: 15px 20px; text-decoration: none; background-color: #34495e; color: #fff;-webkit-transition: all 0.30s ; -moz-transition: all 0.30s; -ms-transition: all 0.30s; -o-transition: all 0.30s;font-family: 'Open Sans', sans-serif;}
ul.navbar-left li a:hover,ul.navbar-right li a:hover{background-color:#282b2f;}
.navbar-right{display: block; float: right;}
.navbar-right li {float:left;}
.navbar a i {font-size: 22px;}
.navbar-ac {background-color:#73A6D8;padding:10px;color:#fff;font-weight:bold;cursor:pointer;display:none;}
.navbar-ac:before { content: "\f0c9";font-family:FontAwesome;font-weight: normal; font-size: 16px;}
@media (max-width:768px) {
/*Mobil Uyumlu Menu*/
.navbar-ac {display:block;}
ul.navbar-left{display:none;float:none;}
ul.navbar-left li,.navbar-right li  {float:none;}
ul.navbar-left li a{}
.navbar-right{float:none;}
}
@media (min-width:768px) {
ul.navbar-left,.navbar-right,{display:block!important;}
}

3.Şimdi HTML kodlarını <body></body> etiketleri arasına ekleyin:

<div class='header'>
 <div class='navbar-out'>
 <div class='navbar'>
 <div class='navbar-ac'> MENU</div>
  <ul class='navbar-left'>
   <li><a href='#'>Menu</a></li>
   <li><a href='#'>Haqqinda</a></li>
   <li><a href='#'>Sitemap</a></li>
   <li><a href='#'>Kategori</a></li>
   <div class='navbar-right'>
   <li><a href='#' target='_blank'><i class="fa fa-facebook"></i></a></li>
   <li><a href='#' target='_blank'><i class="fa fa-google-plus"></i></a></li>
   <li><a href='#' target='_blank'><i class="fa fa-instagram"></i></a></li>
   <li><a href='#' target='_blank'><i class="fa fa-twitter"></i></a></li>
   </div>
  </ul>  
 </div>
 </div>
</div>

4. Son olarakda açma kapama için jquery kodunu <script></script> etiketleri arasına ekleyin:

$(function(){
 $('.navbar-ac').click(function(){
  $(this).next('ul').slideToggle(500);
 })
});

5. Bütün kodları bir araya getirelim :

<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600,400' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(function(){
 $('.navbar-ac').click(function(){
  $(this).next('ul').slideToggle(500);
 })
});
</script>
<style>
div,ul,li,a{display:block;margin:0;padding:0;}
/* Menu */
.navbar{max-width: 1160px;margin:0 auto;}
.navbar-out {width: 100%;background-color: #34495e; overflow: hidden;}
ul.navbar-left {}
ul.navbar-left li {float: left;list-style:none;}
ul.navbar-left li a,ul.navbar-right li a {padding: 15px 20px; text-decoration: none; background-color: #34495e; color: #fff;-webkit-transition: all 0.30s ; -moz-transition: all 0.30s; -ms-transition: all 0.30s; -o-transition: all 0.30s;font-family: 'Open Sans', sans-serif;}
ul.navbar-left li a:hover,ul.navbar-right li a:hover{background-color:#282b2f;}
.navbar-right{display: block; float: right;}
.navbar-right li {float:left;}
.navbar a i {font-size: 22px;}
.navbar-ac {background-color:#73A6D8;padding:10px;color:#fff;font-weight:bold;cursor:pointer;display:none;}
.navbar-ac:before { content: "\f0c9";font-family:FontAwesome;font-weight: normal; font-size: 16px;}
@media (max-width:768px) {
/*Mobil Uyumlu Menu*/
.navbar-ac {display:block;}
ul.navbar-left{display:none;float:none;}
ul.navbar-left li,.navbar-right li  {float:none;}
ul.navbar-left li a{}
.navbar-right{float:none;}
}
@media (min-width:768px) {
ul.navbar-left,.navbar-right,{display:block!important;}
}
</style>
</head>
<body>
<div class='header'>
 <div class='navbar-out'>
 <div class='navbar'>
 <div class='navbar-ac'> MENU</div>
  <ul class='navbar-left'>
   <li><a href='#'>Menu</a></li>
   <li><a href='#'>Haqqinda</a></li>
   <li><a href='#'>Sitemap</a></li>
   <li><a href='#'>Kategori</a></li>
   <div class='navbar-right'>
   <li><a href='#' target='_blank'><i class="fa fa-facebook"></i></a></li>
   <li><a href='#' target='_blank'><i class="fa fa-google-plus"></i></a></li>
   <li><a href='#' target='_blank'><i class="fa fa-instagram"></i></a></li>
   <li><a href='#' target='_blank'><i class="fa fa-twitter"></i></a></li>
   </div>
  </ul>  
 </div>
 </div>
</div>
</body>
</html>

Ve bitti Iyi Günler

Responsive Menu Yapımı

Responsive Menu Yapımı

Senan

ilgili Makaleler

1 yorum: