Css: Açıklamalı Menü
 
CSS ile açıklamalı menü

Bu dersimizde CSS ile açıklamalı bir menü yapmayı öğreneceğiz.






Html Kodu:

Kod:
<div id="menu">


  <ul>


    <li><a href="#">Anasayfa<span>Sitenin Bütün İçerik Linkleri Bu sayfada</span></a></li>  


    <li><a href="#">Sanalkurs Forum<span>Forum Bölümümüzden Bilgi Paylaşım Yapabilirsiniz</span></a></li>


    <li><a href="#">Müzik<span>Müzik Bölümümüz Her Türlü Full Albüm</span></a></li>


    <li><a href="#">Video<span>Video İçeriği</span></a></li>


  </ul></div>


Css Kodu:

Kod:
/* Menu Div CerveVe bicimi */


#menu {


    float:left;


    width:150px;


    }





/* Menu içindeki Liste EtiketLerini Bicimlendirme */


#menu li, #menu ul {


    padding:0px 0px 0px 0px;


    margin:0px 0px 0px 0px;


    list-style:none;


    text-align:left;


        }


/* Menu Liste içinDeki LinKleri Biçimlendirme */


#menu li a {


    padding:8px 0px 0px 20px;


    font-family:"Comic Sans MS";


    font-size:13px;


    text-decoration:none;


    color:#FFFFFF;


    background:url(buttona2.gif) no-repeat;


    width:130px;


    height:32px;


    display:block;


    }


/* Menu Liste içinDeki LinKleri Fare İmleci Üzerinde İken Biçimlendirme */


#menu li a:hover {


    background:url(buttonahover2.gif) no-repeat;


    font-size: 80%; /* IE5.x/Win duzeltmek icin  Desteklemeyen İE Serisini için Çözüm*/





    }


/* Menu Linkelere Eklenmiş Span Etiketi İçerğini İlk Sayfada Gizleme */


#menu li a span {


    display:none;


    }


/* Menu Linkelere Eklenmiş Span Etiketi İçerğini Fare Hareketi İle Gösterme */


#menu li a:hover span {


    display:block;


    position:absolute;


    top:auto;


    left:160px;


    background:#000066;


    font-family:"Comic Sans MS";


    border:solid #0033FF 1px;


    width:200px;


    }

 


Destek : by-gunhany@hotmail.com
 
 
   
 
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol