Mybb Menü Yapımı Dersi

[ByTugrul #The Prof]

Merhaba arkadaşlar bu aralar herkes menü yapma peşinde koşuyor bende daha kolay bir şekilde yapabileceğiniz bir menü yapma dersi hazırladım.

Gerekli malzemeler: 2 adet menü resmi boyutları size kalmış kod içerisinde ayarlayabilirsiniz.Şu boyutta da resimler olabilir.


Öncelikle Admin kp >> Şablonlar >> Header >> Headere girererek oradaki menü kodunu siliyoruz ve şu kodu ekliyoruz.

Kod: Tümünü Seç Tümünü Kopyala

<div id="cssmenu">
    <div id="menulink">
                  <li><a href="{$mybb->settings['bburl']}" title="Anasayfa">ANASAYFA</a></li>
                  <li><a href="portal.php" rel="nofollow" title="Portal">PORTAL</a></li>
                  <li><a href="memberlist.php" rel="nofollow" title="Üyeler">ÜYE LİSTESİ</a></li>
                  <li><a href="misc.php?action=help" rel="nofollow" title="Yardım ?">YARDIM</a></li>
                  <li><a href="calendar.php" rel="nofollow" title="Takvim">TAKVİM</a></li>
                  <li><a href="#" rel="nofollow" title="Reklam">REKLAM</a></li></div>

Daha sonra Admin kp >> Temalar >> Kullanılan Tema >> Css Oluştur >>

Css başlığına şunu yazıyoruz.

Kod: Tümünü Seç Tümünü Kopyala

cssmenu.css

Geneli işaretliyoruz >> Kendi İçeriğimi Yaz ve şu kodu ekliyoruz.

Kod: Tümünü Seç Tümünü Kopyala

#cssmenu {
    height:35px;
        width: 592px;
    margin: auto auto;
    overflow:hidden;
        background: url(http://c1303.hizliresim.com/17/j/l3wu3.png);
    text-transform:uppercase;
    -webkit-border-top-left-radius: 2px;
    -webkit-border-top-right-radius: 2px;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-topright: 2px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}
    
#menulink {
    margin: 0px auto;
        width: 100%;
    padding:0px 0px;
    }
    
#menulink li {
    float: left;
    list-style: none;
    margin: 0;
    margin-top: -5px;
    padding: 0;
    }
    
#menulink li a {
    color: lightblue;
    display: block;
        margin: 0;
    padding: 15px 15px 18px 15px;
    position: relative;
        border-right: 1px solid rgba(255, 255, 255, 0.22);
    font-size: 15px;
        font-weight: bold;
        font-family: "Arial";
    }

#menulink li a:hover, #menulink li a:active {
    color: white;
    background: url(http://c1303.hizliresim.com/17/j/l3wum.png);
}

Not ALıntıdır..

[ASiPaTRoN61]

Teşekkürler.