uzerine-gelince-acilan-menu

Sayfanın Üstünde Açılabilir Menü

Menü öğeleriniz fazla mı yer kaplıyor? Onları gizli ve açılabilir bir alana mı saklamak istiyorsunuz? Toggle butonu ile çalışan şık bir menüye mi ihtiyacınız var? Bu tasarım tam sizlik!

Bu makalemizde jQuery ve CSS3‘ün hünerlerini kullanarak açılıp kapanabilen bir menü örneği hazırlayacağız.

ÖRNEĞİ GÖRÜNTÜLE

Açılabilir / Kapanabilir menü nasıl hazırlanır?

İlk olarak JavaScript kodlarımız ile başlayalım. Daha sonra sırasıyla HTML ve CSS kodlarımızı ekleyeceğiz.

JavaScript Kodları

Body elemanını kapatmadan hemen öncesine, tüm CSS ve HTML kodlarının altına JavaScript kodlarımızı ekliyoruz.

Bu yapının işlevselliğini jQuery vermekte. O yüzden ilk jQuery kütüphanesini include ederek başlayalım.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

Daha sonra yukarı ve aşağıya açılışı sağlayalım.

$(function() {
	var openBtn = $('.buton'),
		slideMenu = $('.acilabilir-menu'),
		layer = $('<div />').addClass('perde');
	openBtn.on("click", function() {
		if (slideMenu.is(':hidden')) {
			layer.appendTo('body');
			slideMenu.slideDown(300);
		} else {
			slideMenu.slideUp(300); 
       layer.remove();
		}
	});
});

HTML Kodları

HTML5‘in nav elemanını bir div ile sarıp iç kısmına ul yapısındaki menümüzü yerleştirelim.

<div class="menubar">
  <nav class="acilabilir-menu">
    <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>
  </nav>
  <div class="buton"><span></span></div>
</div>

CSS Kodları

İlk olarak body elemanımıza tanımlamalar yapalım. Örneğin body’deki tüm margin değerini sıfırlarsak menü ekranın tam üstüne yapışacaktır. Beraberinde uyumlu bir border da ekleyebiliriz.

body {
  border-top: 10px solid khaki;
  margin:0;
  background-color:#f6f0ba;
}

Şimdi de açılabilir menüyü stilize edelim.

.menubar {
  width: 100%;
  font:300 14px 'Open Sans';
  position: absolute;
  top: 0;
  z-index: 999;
}

.acilabilir-menu {
  padding: 50px 0;
  border-bottom: solid 10px darkkhaki;
  background: #fff;
  display: none;
}

.acilabilir-menu ul {
  overflow: hidden;
  margin: 0 auto;
  padding: 0;
  max-width: 800px;
  width: 100%;
}

.acilabilir-menu li {
  float: left;
  padding: 0;
  width: 20%;
  list-style: none;
}

.acilabilir-menu li a {
  display: block;
  margin: 0 5%;
  padding: 20px 0;
  border: solid 1px #333;
  background: #fff;
  color: #666;
  text-align: center;
  text-decoration: none;
  font-size: 18px;
}
.acilabilir-menu li a:hover {
  border: solid 1px tomato;
  color: tomato;
}

Butonu ve perdesini şekillendirelim.


.buton {
  margin: 0 auto;
  width: 200px;
  height: 30px;
  border-radius: 0 0 5px 5px;
  background: IndianRed;
  cursor: pointer;
}

.buton span {
  position: relative;
  top: 12px;
  left: 50%;
  display: block;
  margin-left: -25px;
  width: 50px;
  height: 5px;
  border-radius: 5px;
  background: #fff;
  box-shadow: inset 1px 1px 2px #ddd;
}
.perde{
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background-color:rgba(0, 0, 0, 0.1);
}

Son olarak küçük çözünürlüklü cihazlar için tasarımı menü öğelerini alt alta dizelim.

@media screen and (max-width: 480px) {
  .acilabilir-menu {
    padding: 5%;
  }
  .acilabilir-menu li {
    width: 100%;
  }
  .acilabilir-menu li a {
    border-top: none;
  }
  .acilabilir-menu li a:hover {
    margin-top: -1px;
  }
  .acilabilir-menu li:first-child a {
    border-top: solid 1px #333;
  }
  .acilabilir-menu li:first-child a:hover {
    margin-top: 0;
    border-top: solid 1px #12a1c6;
  }
}

Bu kadar!

Bu da ilginizi çekebilir  HTML5 ve CSS3 ile Yaprak Menü

Kapanış

Bu tip şık tasarımlar sayesinde menülerinizi gizleyip web sayfanızdaki çalışma alanını genişletebilirsiniz.

İyi çalışmalar.



  • Gökhan Dalkılınç

    Makale için teşekkürler, böylesine anlaşılır anlatımlarla kendimizi biraz da olsun geliştirme fırsatı buluyoruz. Bu konu ile bağıntılı olacağını düşündüğüm bir soru sormak istiyorum. Ekteki fotoğrafta gördüğünüz bölüm benim sitemdeki kategorilerin olduğu menü… Ben bu menüyü ana kategoriye tıklayınca alt kategorilerin açılacağı şekilde yapmak istiyorum fakat halledemedim. temanın bileşen desteği olmadığı için açılır kategori olayını kullanamıyorum. Kodlama bilgim de pek yok, rica etsem yardımcı olur musunuz?

  • Yiğit

    Bu siteniz için ne desem azdır 🙂 Gerçekten makaleler anlaşılır sade bir dille yazılmış, örnekler çok güzel ki en önemlisi konular gayet güncel (bana göre 😀 ). Siteyi bu hale getirenlere çok teşekkürler ve başarılarınızın ardı arkası kesilmesin 🙂

  • İskender Halisoğlu

    Merhabalar öncelikle çalışmanız için teşekkür ederim işime yaradı. Merak ediyorum. diyelim bunu telefondayken yani ölüsü tablet yada telefonlarda bunu drag yöntemi ile nasıl yaparız yani parmakla sürükleme işlemini nasıl yapailiriz. Zahmet olmazsa anlatabilirmisiniz.