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>
