Mavi Dikey Menu

Mavi renk tonlarında CSS ile şekillendirilmiş dikey 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 Kodu
		
<img src="img/top.jpg" width="202" height="4" alt="" class="top flt" />
<div class="menubg flt">
    <ul class="menu flt">
        <li class="current_page_item"><a href="#">Ana Sayfa</a></li>
        <li class=""><a href="#" title="About">Hakkımızda</a></li>
        <li class=""><a href="#" title="Work">Projeler</a></li>
        <li class=""><a href="#" title="Contact">Referanslar</a></li>
        <li class=""><a href="#" title="Location">İletişim</a></li>
        <li class=""><a href="http://www.cssornekleri.com" title="13 Styles">CSS Örnekleri</a></li>
    </ul>    
</div>
<img src="img/bot.jpg" width="202" height="3" alt="" class="bot flt" />
CSS Kodu.
sayfada taşma olması durumunda
.flt değişkenine margin-left: 40px; işlemini uygulayabilirsiniz.
		
/* CSS Document */
img{border:0px;}
.flt{float:left;}
.menubg{clear:left; background-color:#6FA9C7; width:202px;}
.menu{float:left; clear:left; font:bold 11px Helvetica, Arial, sans-serif;}
.menu li {
margin:0px 0px 0px 0px;
    list-style:none;
    }
.menu a, .menu a:visited {
    width:186px;
    height:22px;
    margin:0px 0px 2px -32px;
    position:relative;
    display:block;
    color:#cbe7f5;
    text-decoration:none;
    background:url(../img/menubg2.jpg) no-repeat;
    padding:4px 0 0 8px;
    }
*html .menu a, .menu a:visited {
    width:186px;
    height:22px;
    margin:0px 0px 2px -32px;
    position:relative;
    display:block;
    color:#cbe7f5;
    text-decoration:none;
    background:url(../img/menubg2.jpg) no-repeat;
    padding:4px 0 0 8px;
    }
.menu a:hover, .menu a:active,
.menu li.current_page_item a, .menu li.current_page_item a:visited  {
    background:url(../img/menubg1.jpg) no-repeat;
    text-decoration:none;
    }    
.bot{clear:left;}
Toplam İndirme: 975 | Toplam İzleme: 3614