Digg Menu Ö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.)
• Toplam 3kb büyüklükte
• 5 satırlık bir javascript eklentisi ile tıklayınca açılan ve bir daha tıklamadan kapanmayan menü.

HTML Kodu

		
<div id="middlebar">
  <ul class="menu">
      <li><a href="#" onclick="javascript:showlayer('sm_1')">Profil</a></li>
    <ul class="submenu" id="sm_1">
        <li><a href="asd">Kimlik</a></li>
          <li><a href="asd">Posta Kutusu </a></li>
          <li><a href="asd">Çıkış</a></li>
    </ul>
  </ul>
</div>
		

Javascript Kodu

		
function showlayer(layer){
    var myLayer=document.getElementById(layer);
    if(myLayer.style.display=="none" || myLayer.style.display==""){
        myLayer.style.display="block";
    } else { 
        myLayer.style.display="none";
        }
}
		

CSS Kodu

		
ul, li{margin:0; border:0; padding:0; list-style:none;}
#middlebar{
    font-size:11px;
    color:#3b5d14;
    background:#90b557;
    font-weight:bold;
    padding:4px;
    height:30px;
}
    #middlebar .menu li {
        background:url(lm.png) left top no-repeat;
        height:30px;
        float:left;
        margin-right:10px;
    }
    #middlebar .menu li a{
        color:#3b5d14;
        text-decoration:none;
        padding:0 10px;
        height:30px;
        line-height:30px;
        display:block;
        float:left;
        padding:0 26px 0 10px;
        background:url(rm.png) right top no-repeat;
    }
    #middlebar .menu li a:hover{
        color:#666666;
    }
#middlebar ul .submenu {
    border:solid 1px #c9dea1;
    border-top:none;
    background:#FFFFFF;
    position: relative;
    top: 4px;
    width:150px;
    padding:6px 0;
    clear:both;
    z-index:2;
    display:none;
}
    #middlebar ul .submenu li{
        background:none;
        display:block;
        float:none;
        margin:0 6px;
        border:0;
        height:auto;
        line-height:normal;
        border-top:solid 1px #DEDEDE;
    }
    #middlebar .submenu li a{
        background:none;
        display:block;
        float:none;
        padding:6px 6px;
        margin:0;
        border:0;
        height:auto;
        color:#105cbe;
        line-height:normal;
    }
    #middlebar .submenu li a:hover{
        background:#e3edef;
    }
		

Toplam İndirme: 1360 | Toplam İzleme: 6865