Responsive Menu Yapımı

11/17/2015

Responsive Menu Yapımı - Merhaba Arkadaşlar bugün sizlerle Responsive menu nasıl yapılır onu göstericem.

Responsive Menu Yapımı

1. İlk önce basit HTML kodlarını yazalım:
<html>
<head>
<title>Future Imperfect by HTML5 UP</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<nav class="nav">
<div class="menu-ac"><i class="fa fa-bars fa-lg"></i> Menu</div>
<div class="ac">
<ul class="sol-menu">
<li><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Feugiat</a></li>
<li class="dropdown"><a href="#">Tempus</a>
<ul class="altmenu-ac">
<li><a href="#">Asagi</a></li>
<li><a href="#">Template</a></li> </ul>
</li>
<li><a href="#">Adipiscing</a></li>
</ul>
<ul class="sag-menu">
<form action="" method="GET">
<input type="text" class="search" name="s" /><i class="fa fa-search fa-lg"></i>
</form>
</ul>
</div>
</nav>
        </body>
  </html>
2. Daha Sonra </head>  etiketinden yukarıda <style>/* CSS */</style> etiketlerini ekleyin ve aşağıdakı CSS kodlarını yazın :

<style>
/* Navbar */
.nav {
background-color: #4c6881;
    overflow: hidden;
    z-index: 50;
}
.nav ul {
padding: 0;
    margin: 0;
}
.sol-menu li {
    float: left;
    display: block;
    list-style: none;
}
.sol-menu li a {
display: block;
text-decoration: none;
color: #FFFFFF;
    padding: 15px 20px;
    background-color: #4c6881;
    border-bottom: 1px solid #4C6881;
    -webkit-transition: all 0.3s ease;                
    -moz-transition: all 0.3s ease;              
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;        
    transition: all 0.3s ease;
}
.sol-menu li a:hover {
color: #4c6881;
    padding: 15px 40px;
    background-color: #FFFFFF;
}
ul.sag-menu {
float: right;
padding: 8px 10px;
    overflow: hidden;
}
.sag-menu i {
color: #FFFFFF;
margin: 8px;
cursor: pointer;
}
input.search {
display: none;
    padding: 5px;
    max-width: 100%;
}
.altmenu-ac {
display: none;
}
.menu-ac {
display: none;
padding: 10px;
cursor: pointer;
color: #FFFFFF;
}
@media (max-width: 700px ){
.ac  {
display: none;
}
.nav ul li {
float: none;
}
.menu-ac {
display: block;
}
}
@media (min-width: 700px ){
.ac {
display: block!important;
}
}</style> 
3. Son olarak da Jquery Kodlarını ekleyin:
<script>
$(function(){
$('.menu-ac').click(function(){
$(this).next('.ac').slideToggle(500);
});
$('.fa-search').click(function(){
      $(".search").animate({
                width: "toggle"
            });
});
});
</script>



ilgili Makaleler

Sonuncu

1 yorum:

Yaz yorum