MyBB Depo Forum
MyBB Jquery Dropdown Menu - Baskı Önizleme

+- MyBB Depo Forum (https://mybbdepo.com)
+-- Forum: Mybb Ders Deposu (https://mybbdepo.com/mybb-ders-deposu-forumu)
+--- Forum: Grafik & Tasarım Ders Deposu (https://mybbdepo.com/grafik-tasarim-ders-deposu-forumu)
+---- Forum: Tema Yapımı (https://mybbdepo.com/tema-yapimi-forumu)
+---- Konu Başlığı: MyBB Jquery Dropdown Menu (/mybb-jquery-dropdown-menu-konusu.html)

MyBB Jquery Dropdown Menu - ßyßurak - 01-03-2014

Resim-Grafik Ekran Görüntüsü
resim

1. Temalar&Şablonlar Sağ Ok Şablonlar Sağ Ok 3. Header Şablonlar Sağ Ok header

Alttaki Kodları Header Şablonunda İstediğimiz Bir Yere Ekliyoruz
Kod:
<ul id="menu">
    <li><a href="#">Parent 01</a></li>
    <li><a href="#" class="selected">Parent 02 > </a>
        <ul>
            <li><a href="#">Item 01</a></li>
            <li><a href="#" class="selected">Item 02</a></li>
            <li><a href="#">Item 03</a></li>
        </ul>
        <div class="clear"></div>
    </li>
    <li><a href="#">Parent 03 > </a>
    <ul>
        <li><a href="#">Item 04</a></li>
        <li><a href="#">Item 05</a></li>
        <li><a href="#">Item 06</a></li>
        <li><a href="#">Item 07</a></li>
    </ul>            
        <div class="clear"></div>
    </li>
    <li><a href="#">Parent 04</a></li>
</ul>


2. Temalar&Şablonlar Sağ Ok Temalar Sağ Ok Global.css

Alttaki Kodları Global.css'nin En Altına Ekliyoruz
Kod:
/* remove the list style */
#menu {
    margin:0;
    padding:0;
    list-style:none;
}    

#menu li {
    float:left;
    display:block;
    width:100px;
    background:#ccc;
    position:relative;
    z-index:500;
    margin:0 1px;
}

/* this is the parent menu */
#menu li a {
    display:block;
    padding:8px 5px 0 5px;
    font-weight:700;  
    height:23px;
    text-decoration:none;
    color:#fff;
    text-align:center;
    color:#333;
}

#menu li a:hover {
    color:#fff;
}

/* submenu, it's hidden by default */
#menu ul {
    position:absolute;
    left:0;
    display:none;
    margin:0 0 0 -1px;
    padding:0;
    list-style:none;
}

#menu ul li {
    width:100px;
    float:left;
    border-top:1px solid #fff;
}


#menu ul a {
    display:block;  
    height:15px;
    padding: 8px 5px;
    color:#666;
}

#menu ul a:hover {
    text-decoration:underline;    
}

*html #menu ul {
    margin:0 0 0 -2px;
}



3. Temalar&Şablonlar Sağ Ok Şablonlar Sağ Ok * Headerinclude Şablonlar Sağ Ok headerinclude

Alttaki Kod Buluyoruz
Kod:
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/popup_menu.js?ver=1600"></script>

Alttaki İle Değiştiriyoruz
Kod:
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/popup_menu.js?ver=1600"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/dropdownmenu.js"></script>
<script>
    jQuery.noConflict();
</script>


4. Son Olarak Alttaki Dosyayı /jscripts Klasörüne Atıyoruz

Kod:
https://mega.co.nz/#!iJlEXZTQ!grEuIsBtq_jKMFy72lWeS6drgNBZd_fYUNwLCLg5-SU



AlıntıAlıntı Tasarimaraci.com

Cvp: MyBB Jquery Dropdown Menu - duruk - 01-03-2014

Sağol Güzel.