Jquery hover metodu ile aşağı açılır menü örneği

Jquery hover metodu ile küçük bir açılır menü örneği. Bu örneği biraz inceledikten sonra sizde istediğinizde tipte Açılır menüler yapabilirsiniz.


<script type="text/javascript">
$(function(){ 
 $(".anasayfa").hover(        //anasayfa nesnesinin üzerine geldiğinde anaicerik nesnelerini acacak
 function(){ $(".anaicerik").show(); }, 
     function(){$(".anaicerik").hide()}
 );
 $(".dersler").hover(   //dersler nesnesinin üzerine geldiğinde dersicerik nesnelerini acacak
 function(){ $(".dersicerik").show(); },
     function(){$(".dersicerik").hide()}
 );
});
</script>


<style>
.anasayfa { width:150px; height:20px; float:left; background:#066; color:#FFF;}    
.dersler { width:150px; float:left; height:20px; background:#066; color:#FFF;}
.anaicerik { width:150px; height:20px; background:#000; color:#FFF; overflow:hidden;display:none; opacity:0.7;}
.anaicerik:hover{   
        opacity:1;}   
.dersicerik { width:150px; height:20px;  background:#000; color:#FFF; display:none;opacity:0.7;}
.dersicerik:hover{
        opacity:1;}

</style>


// body tagından sonra yazacaklarımız
<div class="anasayfa">Anasayfa
<div class="anaicerik">İcerik 1 </div>
<div class="anaicerik">İcerik 1 </div>
</div>


<div class="dersler">Dersler
<div class="dersicerik">İcerik 1 </div>
<div class="dersicerik">İcerik 1 </div>
</div> 

 

Programın Çıktısı

Anasayfa
İcerik 1
İcerik 1
Dersler
İcerik 1
İcerik 1




Mesaj ve Yorumlar

Yorum Sayısı (0)

ÜYE YORUMLARI

Çevrimiçi :
7
Günlük :
167
Haftalık :
1008
Aylık :
4150
Copyright © 2012 İşbara Alp Sönmez – Programlama Örnekleri. Her hakkı saklıdır. www.alpsonmez.com Bu sitedeki herhangi bir içeriğin, herhangi bir sitede iznim dışında paylaşım yapılması durumunda hukuki dava açacağımı tarafınıza arz ederim.