Bu dersimizde CSS ile açıklamalı bir menü yapmayı öğreneceğiz.
[img]http://www.sanalkurs.net/css-ile-aciklamali-menu-1763.html[/img]
Html Kodu:
<div id="menu">
<ul>
<li><a href="#">Anasayfa<span>Sitenin Bütün İçerik Linkleri Bu sayfada</span></a></li>
<li><a href="#">İnterturko<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:
/* 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;
}
______________
