Responsive açılır-kapanır menü örneği

Responsive açılır-kapanır menü örneği
70

Günümüzün mobil internet kullanımı en üst seviyeye çıkmış durumda.. Haliyle mobil tasarımda ön plana çıkıyor bende sizin için responsive açılır kapanır menü hazırladım.  Paylaşacağım bu menü örneği tüm mobil cihazlar için uygun görünüme bürünmektedir ayrıca bu menü wordpress stil yapısına uygun tasarlanmıştır.

responsivemenu

Detaylı Demo Full Ekran Demo

İlk olarak jquery dosyasını çağıralım..

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

Daha sonra html kod yapımızı hazırlayalım..

<div class="container">
<div class="toggle"><span class="menu-title">Menu</span> <i class="fa fa-list"></i></div>
<!-- Mobil'de görünecek sadece -->

<nav id="nav">
<ul class="menu">
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkında</a></li>
<li><a href="#">S.S.S</a></li>
<li><a href="#">Kullanım Sözleşmesi</a></li>
<li><a href="#">Bize Ulaşın</a></li>
<li><a href="#">Künye</a></li>
</ul>
</nav>
</div>

Şimdi de menüyü açılır-kapanır yapmak için javascript kodlarımızı yazalım. Kodların mantığı toggle adında ayarladığımız div’e tıklandığında menu açılacaktır..

<script type="text/javascript">
$(document).ready(function(){
$(".toggle").click(function(){
$(".menu").slideToggle("slow");
});
});
</script>

Son olarakta style.css dosyamıza css kodlarımızı girelim..


p { text-align:center; margin: 20px auto; width: 100%}
.container {
max-width: 1060px;
margin:0 auto
}
#nav {
width: 100%;
display:table;
background: #03a9f4
}
.menu {
list-style: none;
padding: 0;
}
.menu li {
display: inline-block;
position: relative;
}
.menu li>a {
display:block;
padding: 15px 15px;
font-weight: 400;
color:#fff
}
.menu a:hover {
background: rgba(0, 0, 0, 0.31);
}
.toggle {display:none; background: #03a9f4; color: #fff; padding: 10px}
.toggle i {float:right; font-size: 14px;margin-top: 5px}

@media only screen and (max-width: 479px) {
.toggle {display:block}
.menu {display:none}
.menu li {display:inline}
}

Yorum Yap

Yapına Yorumlar (5)

  1. Ben pek anlamıyorum javascriptten falan ben bir menü de giriş bölümü olacak şekilde ve o giriş bölümüne tıkladığımda aynı bunun gibi menü yerine yaptığım formun açılmasını istiyorum.

    Bunu nasıl yapabilirim yardımcı olurmusunuz?

    Kullandığım tema ve dosyaları indirmek için

    https://yadi.sk/d/LU41w1LhqUk4t

  2. Birşey yapmaya çalışmışsınız ama olmamış. Body kodu felan çok saçma adam bunu temasına ekleyecek tüm kodlar çakışacak.

    • Teşekkürler, yazının tamamına değilde 2 sn içinde kaldıracağınız koda takıldıysanız eyvallah.
      Hazıra konmaya alışkınlık bu olsa gerek.