Renkli Menu

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.)
• Mavi, Yeşil, Kırmızı ve Mor Renkler ile ayrı ayrı oluşturulmuş menüler.

HTML Kodu

		
<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>  
		

CSS Kodları

		
/* ----------------------  ---------------------- */
.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;}
/* ----------------------  ---------------------- */
		

Toplam İndirme: 2570 | Toplam İzleme: 11889