Ana Sayfa / Kodlama Dilleri / Jquery İle Açılır Menü Yapmak

Jquery İle Açılır Menü Yapmak

Ç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');});
     });
 });
Yorum Yazın

3 Yorumlar

  1. Makalelerinizi eğer alıntı yapıyorsanuz lütfen alıntı yaptığınız kaynağı gösteriniz. Bu makale bana aittir bazı kısımları değiştirip makale yazan kişinin sitesine link vermeden yayımlayamazsınız.

    • Bir makalenin alıntı olabilmesi için o makalenin %90 orjinal konu ile benzerlik göstermesi gerekir. Bunun yanı sıra örneğin; bir elmayı tanıtırken farklı bir şekilde nasıl tarif edebilirsiniz ? Elma tarifi yapan 100 kişiden 99’u %99 olasılıkla benzer şeyleri yazacaktır.
      Bu konuda anlatılanlarda başka türlü anlatılamaz. Çünkü bu uygulamanın yapılış şekli budur. Bu nedenle buna alıntı değil, benzer konu diyebilirsiniz…Bu durumda benim konum sizinkine benziyor olabilir. Ama aynı şekilde de sizin ki de benimkine benziyordur.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir