Cengel CSS Menu

Menu öğelerine kısa açıklamaları entegre edebileceğiniz bağımsız menü öğelerinden oluşan yatay css menü örneği.

Web sayfalarında yatay menü olarak kullanabilecek güzel bir örnek.

  • Küçük boyutlu az ve temiz kod örneği
  • Küçük boyutlu resim dosyaları
  • Sayfaya göre şekillenebilme (yatay olarak bulunduğu çerçeveye tamamen sığma durumu.)

Örnek Görünüm:
Örnek Çalışmayı buraya komple bilgisayarınıza indirebilirsiniz.
HTML Kodları
		
<div id="menua">
    <ul>
        <li class="current">Ana Sayfa<br /><span>kısa kısa<br /> açıklama <br />Ana Sayfa</span></li>
        <li><a href="#">Hakkımızda<br /><span>kısa kısa<br />açıklama <br />Hakkımızda</span></a></li>        
        <li><a href="#">Hizmetler<br /><span>kısa kısa<br />açıklama <br />Hizmetler</span></a></li>
        <li><a href="#">Referanslar<br /><span>kısa kısa<br />açıklama Referans</span></a></li>        
        <li><a href="#">İletişim<br /><span>kısa kısa<br />açıklama <br />İletişim</span></a></li>
    </ul>
</div>
CSS Kodu
		
/* CSS Document */
*{
    margin:0;
    padding:0;
}
#menuaa{
    width:90%;
    margin:25px auto;
}
#menuaa ul{
    list-style:none;
}
#menuaa li{
    display:block;
    float:left;
}
#menua li a{
    background:#e4e8eb url(../img/menua_bg.gif) repeat-x;
    border:2px solid #bdc5cd;
    margin:0 1px;
    padding:15px 15px 15px 15px;
    display:block;
    float:left;
    color:#2b61a1;
    text-transform:uppercase;
    text-decoration:none;
    font-family:Geneva, Arial, Helvetica, sans-serif;
    font-size:13px;
    font-weight:bold;
    height: 50px;
}
#menua li a span{
    color:#636363;
    font-size:10px;
    text-transform:lowercase;
    font-family:Geneva, Arial, Helvetica, sans-serif;
    font-weight:normal;
}
#menua li a:hover{
    background:#e46825 url(../img/menua_hover.gif) repeat-x;
    border:2px solid #4a88ce;
    text-decoration:none;
}
#menua li a:hover span{
    color:#636363;
}
.current{
    background:#74befd url(../img/menua_hover.gif) repeat-x;
    border:2px solid #4a88ce;
    margin:0 1px;
    padding:15px 15px 15px 15px;
    display:block;
    float:left;
    color:#2b61a1;
    text-transform:uppercase;
    text-decoration:none;
    font-family:Geneva, Arial, Helvetica, sans-serif;
    font-size:13px;
    cursor:pointer;
    font-weight:bold;
    height: 50px;
}
.current span{
    color:#636363;
    font-size:10px;
    text-transform:lowercase;
    font-family:Geneva, Arial, Helvetica, sans-serif;
    font-weight:normal;
}
Toplam İndirme: 395 | Toplam İzleme: 2062