kopyala-yapistir-html.tr.gg KoPYaLaYaPiSTiRHTML - Dikey Koyu Renkli Menu
   
  KoPYaLaYaPiSTiRHTML
  Dikey Koyu Renkli Menu
 

Dikey Koyu Renkli Menu

Dikey olarak hazırlanmış oldukça güzel ve kullanışlı bir menü örneği

Dikey olarak kullanılabilecek. CSS ve imaj desteği ile şeffaf geçişler sağlanmış oldukça güzel bir CSS Menü Örneğidir.

 
 Örnek Çalışmayı buraya komple bilgisayarınıza indirebilirsiniz.
Burada main_menu olarak belirttiğimiz alan sayfanın içerik alanıdır. Menü arka planı ile menü görünümü uyumlu olsun diye oluşturduk.
                

<div id="main_body">
<div id="menu_container">
<div id="top"></div>
<div id="css_ornegi">
<ul>
<li><a href="http://www.cssornekleri.com"><span>Ana Sayfa</span></a></li>
<li><a href="http://www.cssornekleri.com"><span>Hakkımızda</span></a></li>
<li><a href="http://www.cssornekleri.com"><span>Hizmetlerimiz</span></a></li>
<li><a href="http://www.cssornekleri.com"><span>Referanslarımız</span></a></li>
<li><a href="http://www.cssornekleri.com"><span>İnsan Kaynakları</span></a></li>
<li><a href="http://www.cssornekleri.com"><span>İletişim</span></a></li>
</ul>
</div>
</div>
</div>

         
CSS Kodu
                

<style type="text/css">
#main_body {background: #202B31; width: 400px; padding: 10px;}
ul
{list-style: none;margin: 0;padding: 0;}
img
{border: none;}
#menu_container {width:200px;background-color: #333A46;margin-left: 15px;margin-top: 36px;}
#top {background-image: url('nav_top.gif');background-repeat:no-repeat;background-position:top left;height: 16px;}
#bottom {background-image: url('nav_bottom.gif');background-repeat:no-repeat;background-position:bottom left;height: 16px;border-top:1px solid #000;}
#css_ornegi {width: 200px;font-family: Arial, Helvetica, sans-serif;margin: 0;font-size: 70%;font-weight: bold;}
#css_ornegi li a {height: 32px;voice-family: ""}"";voice-family: inherit;height: 24px;text-decoration: none;}
#css_ornegi li a:link, #css_ornegi li a:visited {color: #ccc;display: block;background:  url(css_ornegi.gif);padding: 8px 0 0 25px;}
#css_ornegi li a:hover, #css_ornegi li #current {color: #fff;background:  url(css_ornegi.gif) 0 -32px;border-bottom:1px solid #000;padding: 8px 0 0 27px;}
</style>

               

 
 
  Bugün 39027 ziyaretçi (103763 klik) ziyaretçi burdaydı!
 
 
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol