Kategorilerimizi Animasyonlu Açılır Menü İle Listelemek

    Kategorilerimizi listelemek için bazen açılır menülere ihtiyaç duyabiliriz. Örneğin kullanıcının seçtiği bir kategoriye göre ajax ile o kategoriye ait bilgileri ekrana yazdırdığınızı düşünürsek, kategorilerinizi açılır bir menü ile listelemek en iyi yollardan biridir.

   Açılır menümüzü yaparken jquery ve css kullanacağız.

<div class="icerik"> <a href="#" class="secili-kategori">Kategori Seçiniz</a> <ul class="kategori-menu"> <li><a href="#" id="php">php</a></li> <li><a href="#" id="Mysql">Mysql</a></li> <li><a href="#" id="jquery">jquery</a></li> <li><a href="#" id="ajax">ajax</a></li> <li><a href="#" id="css">css</a></li> <li><a href="#" id="html">html</a></li> </ul> </div>
Kategorilerimizi "kategori-menu" adlı class'a sahip liste içerisinde listeleyeceğiz. Seçilen kategoriyi kullanıcıya "secili-kategori" class'a sahip a etiketi içerisinde göstereceğiz.

.icerik{
 margin: 80px auto;
 width: 200px;
 text-align: left;
}
.secili-kategori {
 background: url(ok.jpg) no-repeat right;
 background-color: #0166FF;
 border:1px solid #222222;
 display:block;
 font-size:14px;
 font-weight: bold;
 padding:5px 5px 5px 8px;
 position:relative;
 text-shadow:1px 1px 1px #CCCCCC;
 width:195px;
 color: #000;
 text-decoration: none;
}

.kategori-menu {
 background-color: #222222;
 display:none;
 width:198px;
 border: 1px solid #222222;
 position: absolute;
 padding: 5px;
 overflow: hidden;
}

.kategori-menu li {
 list-style-type: none;
}

.kategori-menu li a {
 color:#FFFFFF !important;
 text-decoration:none;
 padding:5px 5px 7px 5px;
 display:block;
 text-shadow:1px 1px 1px #fff;
}

.kategori-menu li a:hover {
 background-color: #0166FF;
}

Css kodumuz içerisinde dikkat etmemiz gereken iki nokta var. İlk olarak "kategori-menu" adlı class'a sahip listemizi "display:none;" ile gizliyoruz ve "position:absolute;" ile konumunu sabitliyoruz bu şekilde listemiz açılırken diğer etiketlerin konumunu bozmayacaktır.

$(function () {
        //secili-kategori class'ına sahip linke tıklarsa listeyi görünür yap
 $('a.secili-kategori').click(function () {
  $('ul.kategori-menu').slideToggle('medium');
  return false;
 });

        //Listemizde bulunan kategorilere tıklandığında
        //"secili-kategori" adlı class'a sahip linkin textini seçilen kategorinin adı yap
 $("ul.kategori-menu li a").click(function() {
  var text = $(this).html();
  $(".secili-kategori").html(text);
  $("ul.kategori-menu").slideUp();

  return false;
 });

        //Ekranda herhangi bir yere tıklandığında listemizi gizle
 $(document).bind('click', function(e) {
  var $clicked = $(e.target);
  if (! $clicked.parents().hasClass(".kategori-menu"))
   $("ul.kategori-menu").slideUp();
 });
});

Menü içerisinde kullandığınız başlıklara ait ekleyecek olduğunuz linkleri açmak için Jquery kodları içerisinde yer retun false; kodunu silmeniz gerekiyor.

Blogumuza Abone Olun
Yeni Yazılar e-posta Adresinize Gelsin

Not: Gelen Maili Aktif Etmeyi Unutmayınız!