Jquery İle Açılır Kategori Yapımı

Web sitemizde kullanmak üzere kategorilerimizi  jquery ile açılır liste şeklinde gösterebiliriz. Bunun için jquery kütüphanesini kullanacağız. Jquery.com sayfasından jquery.js kütüphanesini download ettikten ve html sayfamıza entegre ettikten sonra html  ve csss kodlarımızı yazalım.

Ayrıca javascript fonksiyon kodlarımızı ve css dosyamızı da index sayfamıza entegre etmemiz gerekmektedir.

HTML Kodlarımız:

<div id="container">
   <div class="kategoriler">
      <a href="#" class="kategori-sec">Kategori Seçiniz</a>

      <ul class="kategori-menu">
         <li><a href="#" id="Blogger">Blogger</a> </li>
       <li><a href="#" id="Wordpres">Wordpres</a></li>
       <li><a href="#" id="jquery">jquery</a></li>
        <li><a href="#" id="Template">Template</a></li>
        <li><a href="#" id="Photoshop">Photoshop</a></li>
       <li><a href="#" id="html/css">HTML/CSS</a></li> 
    <hr><a href="index.html" style="color:#a42442;border-top:
            1px solid #fff;">Anasayfa</a>
  
      </ul> 
   </div>
</div>

CSS Kodlarımız:

* {
 margin: 0;
 padding: 0;
}


#container {
 margin: 0 auto;
 width: 800px;
}

.kategoriler {
 margin: 80px auto;
 width: 200px;
        text-align: left; 
}

.kategori-sec {
 background: url(kategori.jpg) no-repeat right;
 display: block;
 font-size: 14px;
 font-weight: bold;
 padding: 5px 5px 5px 8px;
 position: relative;
 width: 197px;
 color: #000;
 text-decoration: none;        
}

.kategori-menu {
 background-color: #222222;
 display: none;   
 width: 200px;
 position: absolute;
 padding-top:5px;
        padding-bottom:5px;
        padding-right:5px;
        padding-left:5px;
 list-style:none;          
}

.kategori-menu  a {
 color: #FFFFFF ;
 text-decoration: none;
 padding: 5px 5px 7px 5px;
 display: block;
 height: 20px;             
}

.kategori-menu a:hover {
 background-color:#f05a00 ;
}

JavaScript Fonksiyon Kodları:

$(function () {
            $('a.kategori-sec').click(function () {
                $('ul.kategori-menu').slideToggle('medium');
                return false;
            });

            $("ul.kategori-menu li a").click(function() {
                var text = $(this).html();
                $(".kategori-sec").html(text);
                $("ul.kategori-menu").slideUp();
                return false;
                
            });

    $(document).bind('click', function(e) {
                var $clicked = $(e.target);
                if (! $clicked.parents().hasClass("kategori-menu"))
                    $("ul.kategori-menu").slideUp();
            });
        });

Kaynak Kodları: İNDİR



Anlatımı görsel olarak aşağıda ki videodan izleyebilirsiniz.