Çoklu menülerde jquery şart oldu…

Website yapımcılarının en sık şikayet ettiği konulardan biride çoklu menülerin sayfaya sığdıralamaması üzerinedir.Gelişen teknoloji ile artık menülerin sığdırılamaması gibi bir sorun yaşanmayacak. Javascript kütüphanesinin özelliklerinden biri olan jquery sayesinde menülerinizi açılır kapanır şekilde yapabilecek ve düzene sokabileceksiniz.

Aşağıdaki anlatımda jquery kullanımı ve nasıl menü yapılacağı ile ilgili bilgileri okuyabilirsiniz.

Öncelikle bu adresten jquery dosyamızı indiriyoruz ve css yatay veya dikey menulerimizi oluşturmaya başlıyoruz. (Örnek: Hazır CSS Yatay Menü)

Css dosyamızı yazıyoruz:

<style>
body{background-color: #333333;}

 /*Dikey Menü Cssi*/
.kalip{width:250px; float:left;}

.kalip ul {width:250px; overflow: hidden; margin:0px auto;}

.kalip ul li{list-style:none;}

.kalip ul li a{width:190px; height:18px; background-color:#0033CC;
font:bold 11px Tahoma; color:#e2e2e2; display:block; margin:3px;
padding:7px 0px 0px 10px; -moz-border-radius:4px;}

/*Acilan menunün A özelliği*/
.kalip ul li ul {dispaly:none;}

.kalip ul li ul li a{width:190px; height:18px; background-color:#cd1821;
font:bold 11px Tahoma; color:#e2e2e2; display:block; margin:5px;
padding:7px 0px 0px 10px;  -moz-border-radius:4px;}

.kalip ul li a:hover{width:190px; height:18px; background-color:#e2e2e2; font:bold 11px Tahoma; color:#0033CC;
display:block;margin:5px; padding:7px 0px 0px 10px;}

 /*Yatay Menu Cssi*/
.yatay{ width:840px; height: 500px;float: left;}

.yatay ul{ width:840px; height: 500px;position: absolute; z-index: 1;}

.yatay ul li { list-style:none; float:left; }

 /*Açılan Menunun ul li a özelliği*/
.yatay ul li ul{margin: 0; padding: 0; width: 220px; overflow: hidden;
display: none;  position: absolute; z-index: 2;}

.yatay ul li ul li{margin: 0; padding: 0; float: none;}

.yatay ul li ul li a{ width:190px; height:18px; background-color:#cd1821;font:bold 11px Tahoma; color:#e2e2e2; display:block;
margin:5px; padding:7px 0px 0px 10px;  -moz-border-radius:4px;}

.yatay ul li ul li a:hover{background-color:#e2e2e2;  color:#0033CC;}

.yatay ul li a{width:190px; height:18px; background-color:#cd1821;
font:bold 11px Tahoma; color:#e2e2e2; display:block; margin:5px;
padding:7px 0px 0px 10px; -moz-border-radius:4px;}

.yatay ul li a:hover{ background-color:#e2e2e2; color:#0033CC;}
</style>

Burada menu kalıplarımızı oluşturduk ve alt menulerin özelliklerine display:none özelliğini verdik yani görünmez yaptık. Css dosyamızın karışık görünsede incelendiğinde en fazla 6 ayrı class’a özellik tanımlamışızdır.

Şimdi de jQuery dosyamızı yazalım:

$(document).ready(function(){
     /* Açılır Dikey Menü için jQuery Kodları*/
     $('a.Tikla').click(function(){
           $('.AltMenu').slideUp('fast');
           $(this).parent().find('.AltMenu').slideDown('fast');
     });
     /* Açılır Yatay Menü için jQuery Kodları */
     $('a.Tiklayatay').hover(function(){
           $(this).parent().find('.YatayAcilan').fadeIn('fast');
           $(this).parent().hover(function() {}, function(){$(this).parent().find(".YatayAcilan").fadeOut('fast');});
     });
 });

Sayfa: 1 2