MyBB Destek Forumu

Orjinalini görmek için tıklayınız: Matte (Yatay CSS Menü)
Şu anda (Arşiv) modunu görüntülemektesiniz. Orjinal Sürümü Görüntüle internal link
5 farklı renkte yer alan yatay ve görünümü oldukça hoş CSS Menü örneği
Tek bir resim dosyası ve bir CSS menü kodu ile kolay ve basit bir kodu vardır.


27284740170288012341.jpg

HTML Kodu

Kod:
<div id="menu_wrapper" class="grey">
            <div class="left"></div>
            <ul id="menu">
                <li><a href="http://www.mybb.com.tr">Ana Sayfa</a></li>
                <li class="active"><a href="http://www.mybb.com.tr">Hakkımızda</a></li>
                <li><a href="http://www.mybb.com.tr">Hizmetlerimiz</a></li>
                <li><a href="www.mybb.com.tr">İletişim</a></li>
            </ul>
        </div>

CSS Kodu

Kod:
<style type="text/css">
            body {
                padding: 50px;
            }
            /* The CSS Code for the menu starts here */
            #menu {
                font-family: Arial, sans-serif;
                font-weight: bold;
                text-transform: uppercase;
                margin: 20px 0;
                padding: 0;
                list-style-type: none;
                background-color: #eee;
                font-size: 13px;
                height: 40px;
                border-top: 2px solid #eee;
                border-bottom: 2px solid #ccc;
            }
            #menu li {
                float: left;
                margin: 0;                
            }
            #menu li a {
                text-decoration: none;
                display: block;
                padding: 0 20px;
                line-height: 40px;
                color: #666;
            }
            #menu li a:hover, #menu li.active a {
                background-color: #f5f5f5;
                border-bottom: 2px solid #DDD;
                color: #999;
            }
            #menu_wrapper ul {margin-left: 12px;}
            #menu_wrapper {padding: 0 16px 0 0; background: url(/img/menu/matte/grey.png) no-repeat right;}
            #menu_wrapper div {float: left; height: 44px; width: 12px; background: url(/img/menu/matte/grey.png) no-repeat left;}            
        
        </style>

Bu kadar arkadaşlar bunları bir css dosyası oluşturup içine koyup kullanırsınız.

Eğer yok ben bunlarla uğraşamam bana hazır ver diyorsanız hay hay hemen Sırıtmak

Kod:
http://www.filejungle.com/f/QeK5E4/matte.rar





Alternatif konu ;

Kod:
http://destek.mybb.com.tr/mybb-harika-yatay-menu-css-mauseover-konusu.html

Teşekkürler farklı renklerin olması iyi oldu, ben tek renk paylaşmıştım.
(23.01.2012, Saat: 16:25)Mecruh Adlı Kullanıcıdan Alıntı: [ -> ]Alternatif konu ;

Kod:
http://destek.mybb.com.tr/mybb-harika-yatay-menu-css-mauseover-konusu.html

Teşekkürler farklı renklerin olması iyi oldu, ben tek renk paylaşmıştım.
Teşekkürler,hocam bilmiyordum buna benzer konu olduğunu teşekkürler.