Basit Responsive Menu Yapımı
HTML Kodları :
<div class="menu">
<div class="menuAc">Menüyü Aç</div>
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
</ul>
</div>
CSS KODLARI :
.menu {
overflow:hidden;
background-color:#111;
}
.menu ul li {
float:left
}
.menu ul li a {
display:block;
padding:10px 20px;
color:#fff;
border-right:1px solid #555;
}
.menu ul li a:hover {
background-color:#555;
}
.menuAc {
background-color:#fa6585;
padding:10px;
color:#fff;
font-weight:bold;
cursor:pointer;
display:none;
}
.content {
border:1px solid #ddd;
padding:10px;
margin:10px;
}
@media (max-width:700px) {
.menuAc {
display:block;
}
.menu ul {
display:none
}
.menu ul li{
float:none;
}
.menu ul li a{
border-right:none;
border-bottom:1px solid #555;
}
}
@media (min-width:700px){
.menu ul {display:block!important}
}
JS KODLARI :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var a=0;
$('.menuAc').click(function(){
if (a==0){
$(this).text('Menüyü Gizle');
a++;
} else {
$(this).text('Menüyü Aç');
a=0;
}
$(this).next('ul').slideToggle(500);
});
});
</script>
Kaydol:
Kayıt Yorumları
(
Atom
)
Hiç yorum yok :
Yorum Gönder