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

[#Lykia]

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.

PHP Kod: Tümünü Seç Tümünü Kopyala

<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.

PHP Kod: Tümünü Seç Tümünü Kopyala

$(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.

PHP Kod: Tümünü Seç Tümünü Kopyala

<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.

PHP Kod: Tümünü Seç Tümünü Kopyala

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


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

PHP Kod: Tümünü Seç Tümünü Kopyala

.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.

PHP Kod: Tümünü Seç Tümünü Kopyala

.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.

PHP Kod: Tümünü Seç Tümünü Kopyala

@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 :)

[#Raptor]

Harika konular Yunus, devam et. ;)

[#Lykia]

Harika konular Yunus, devam et. ;)

Thanks :)