Siyah Klasik CSS Menü

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.)
  • Menü örneğini uygulamalı olarak http://www.shackletoncentenary.org/ sitesinde görebilirsiniz.

Örnek Görünüm:
Örnek Çalışmayı buraya komple bilgisayarınıza indirebilirsiniz.
HTML Kodu
		
<div id="navigation">
    <ul id="navigation_pri">
        <li class="active"><a href="http://www.cssornekleri.com">Ana Sayfa</a></li>
        <li><a href="http://www.cssornekleri.com">Hakkımızda</a></li>
        <li><a href="http://www.cssornekleri.com">Hizmetlerimiz</a></li>
        <li><a href="http://www.cssornekleri.com">Referanslar</a></li> 
        <li><a href="http://www.cssornekleri.com">İletişim</a></li>
    </ul>
</div>
CSS Kodu
		
<style>
div#navigation { margin-bottom:50px; font-family:Arial,sans-serif; font-size:13px;}
ul#navigation_pri { width:550px; margin:0 auto; overflow:hidden;  list-style:none; font-family:Helvetica, Arial, sans-serif; background:url(img/nav_bg.jpg) repeat-x left top; }
ul#navigation_pri li { float:left; margin:0 4px; height:29px; padding:11px 10px 10px 10px; }
ul#navigation_pri li a:link,
ul#navigation_pri li a:visited { font-weight:bold; color:#999; text-decoration:none;  }
ul#navigation_pri li a:hover,
ul#navigation_pri li a:focus { text-decoration:none; color:#ccc;}
ul#navigation_pri li.active { background:url(img/nav_cur_bg.jpg) no-repeat center bottom; }
ul#navigation_pri li a { color:#fff; }
</style>
Toplam İndirme: 1498 | Toplam İzleme: 6419