Mavi

Mavi renklerle beyaz headr alanı olan sayfalar için uygun 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 class="blue">
    <div id="waxcontainer">
        <div id="waxnav">
            <ul>
                <li><a href="" title="" class="current"><span>Ana Sayfa</span></a></li>
                <li><a href="" title=""><span>Hakkımızda</span></a></li>
                <li><a href="" title=""><span>Hizmetler</span></a></li>
                <li><a href="" title=""><span>Referanslar</span></a></li>
                <li><a href="" title=""><span>İletişim</span></a></li>
            </ul>
        </div>
    </div>
</div>
CSS Kodu
		
<style type="text/css">
<!–
/* ---------------------- mavi menu ---------------------- */
.blue #waxcontainer{position:relative;height:48px;background:#69BEEE;width:100%;font-family:"Trebuchet MS",Arial,Verdana,Helvitica,sans-serif;}
.blue #waxnav{position:relative;height:25px;font-size:11px;font-weight:bold;background:#fff url(../img/bluewax_bottom.gif) repeat-x bottom left;}
.blue #waxnav ul{margin:0px;padding:0 0 4px 0;list-style-type:none;width:auto;float:right;}
.blue #waxnav ul li{display:block;float:left;margin:0 1px;}
.blue #waxnav ul li a{display:block;float:left;color:#003858;text-decoration:none;padding:0 0 0 12px;height:21px;line-height:195%;}
.blue #waxnav ul li a span{padding:0 12px 0 0;}
.blue #waxnav ul li a:hover,.blue #waxnav ul li a.current{color:#fff;background:#1D6893 url(../img/bluewax_navtopleft.gif) no-repeat top left;}
.blue #waxnav ul li a:hover span,.blue #waxnav ul li a.current span{display:block;width:auto;background:#1D6893 url(../img/bluewax_navtopright.gif) no-repeat top right;}
/* ---------------------- mavi menu ---------------------- */
–>
</style>
Toplam İndirme: 638 | Toplam İzleme: 1978