Yazılım Örnekleri

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>