Renkli Menu
Örnek Çalışmayı buraya komple bilgisayarınıza indirebilirsiniz.CSS Kodları<p> </p>
<div class="blue">
<div id="slatenav">
<ul>
<li><a href="http://cssornekleri.com/menu/detay/6" title="css menus" class="current">Ana Sayfa</a></li>
<li><a href="http://cssornekleri.com/menu/detay/6" title="css menus">Hakkımızda</a></li>
<li><a href="http://cssornekleri.com/menu/detay/6" title="css menus">Hizmetler</a></li>
<li><a href="http://cssornekleri.com/menu/detay/6" title="css menus">Referanslar</a></li>
<li><a href="http://cssornekleri.com/menu/detay/6" title="css menus">İletişim</a></li>
</ul>
</div>
</div>
<p> </p>
<div class="green">
<div id="slatenav">
<ul>
<li><a href="http://cssornekleri.com/menu/detay/6" title="css menus" class="current">Ana Sayfa</a></li>
<li><a href="http://cssornekleri.com/menu/detay/6" title="css menus">Hakkımızda</a></li>
<li><a href="http://cssornekleri.com/menu/detay/6" title="css menus">Hizmetler</a></li>
<li><a href="http://cssornekleri.com/menu/detay/6" title="css menus">Referanslar</a></li>
<li><a href="http://cssornekleri.com/menu/detay/6" title="css menus">İletişim</a></li>
</ul>
</div>
</div>
<p> </p>
<div class="red">
<div id="slatenav">
<ul>
<li><a href="http://cssornekleri.com/menu/detay/6" title="css menus" class="current">Ana Sayfa</a></li>
<li><a href="http://cssornekleri.com/menu/detay/6" title="css menus">Hakkımızda</a></li>
<li><a href="http://cssornekleri.com/menu/detay/6" title="css menus">Hizmetler</a></li>
<li><a href="http://cssornekleri.com/menu/detay/6" title="css menus">Referanslar</a></li>
<li><a href="http://cssornekleri.com/menu/detay/6" title="css menus">İletişim</a></li>
</ul>
</div>
</div>
<p> </p>
<div class="purple">
<div id="slatenav">
<ul>
<li><a href="http://cssornekleri.com/menu/detay/6" title="css menus" class="current">Ana Sayfa</a></li>
<li><a href="http://cssornekleri.com/menu/detay/6" title="css menus">Hakkımızda</a></li>
<li><a href="http://cssornekleri.com/menu/detay/6" title="css menus">Hizmetler</a></li>
<li><a href="http://cssornekleri.com/menu/detay/6" title="css menus">Referanslar</a></li>
<li><a href="http://cssornekleri.com/menu/detay/6" title="css menus">İletişim</a></li>
</ul>
</div>
</div>
/* ---------------------- ---------------------- */
.blue #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(../img/blueslate_background.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}
.blue #slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.blue #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.blue #slatenav ul li a{display:block;float:left;color:#D5F1FF;text-decoration:none;padding:14px 22px 0 22px;height:28px;}
.blue #slatenav ul li a:hover,.blue #slatenav ul li a.current{color:#fff;background:transparent url(../img/blueslate_backgroundOVER.gif) no-repeat top center;}
/* ---------------------- ---------------------- */
/* ---------------------- ---------------------- */
.green #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(../img/greenslate_background.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}
.green #slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.green #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.green #slatenav ul li a{display:block;float:left;color:#EEFFDF;text-decoration:none;padding:14px 22px 0 22px;height:28px;}
.green #slatenav ul li a:hover,.green #slatenav ul li a.current{color:#fff;background:transparent url(../img/greenslate_backgroundOVER.gif) no-repeat top center;}
/* ---------------------- ---------------------- */
/* ---------------------- ---------------------- */
.red #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(../img/redslate_background.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}
.red #slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.red #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.red #slatenav ul li a{display:block;float:left;color:#FECCC3;text-decoration:none;padding:14px 22px 0 22px;height:28px;}
.red #slatenav ul li a:hover,.red #slatenav ul li a.current{color:#fff;background:transparent url(../img/redslate_backgroundOVER.gif) no-repeat top center;}
/* ---------------------- ---------------------- */
/* ---------------------- ---------------------- */
.purple #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(../img/purpleslate_background.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}
.purple #slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.purple #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.purple #slatenav ul li a{display:block;float:left;color:#FBDAFA;text-decoration:none;padding:14px 22px 0 22px;height:28px;}
.purple #slatenav ul li a:hover,.purple #slatenav ul li a.current{color:#fff;background:transparent url(../img/purpleslate_backgroundOVER.gif) no-repeat top center;}
/* ---------------------- ---------------------- */
