Neler yeni

Foruma hoş geldin 👋, Ziyaretçi

Forum içeriğine ve tüm hizmetlerimize erişim sağlamak için foruma kayıt olmalı ya da giriş yapmalısınız. Foruma üye olmak tamamen ücretsizdir.

  • Forumdan daha fazla yararlanmak için, profilinizi telefon numaranız 📱 ile doğrulayın ve daha ayrıcalıklı olun 😉
    Daha fazla bilgi!
Kaynak ikonu

Kullanım tekniği Açılır Kapanır (Akordiyon) Kategori Widget Ekleme

XenForo için kullanım tekniği.
Açılıp kapanabilen (akordiyon) linkler eklemek için önce yeni bir widget oluşturuyoruz.

Görünüm ve diller > Widget yöneticisi > Widget ekle

Widget tanımı: HTML
-------
Widget kimliği-ID: menu_akordiyon
Başlık: Menü
Bu pozisyonlarda göster: Widgetin görünmesini istediğiniz alanları seçin...

Şablon:
HTML:
<ol class="categoryList toggleTarget is-active">
    <li class="categoryList-item">
        <div class="categoryList-itemRow">          
                <a class="categoryList-toggler" data-xf-click="toggle" data-target="< :up :next" role="button" tabindex="0" aria-label="Toggle expanded"></a>      
            <a href="link" class="categoryList-link">
                Link-1
            </a>
        </div>          
    <ol class="categoryList toggleTarget">
       
    <li class="categoryList-item">
        <div class="categoryList-itemRow">      
                <span class="categoryList-togglerSpacer"></span>  
            <a href="link" class="categoryList-link">
                Alt link-1
            </a>
        </div>  
    </li>

    <li class="categoryList-item">
        <div class="categoryList-itemRow">  
                <span class="categoryList-togglerSpacer"></span>  
            <a href="link" class="categoryList-link">
                Alt link-2
            </a>
        </div>  
    </li>

    <li class="categoryList-item">
        <div class="categoryList-itemRow">
                <span class="categoryList-togglerSpacer"></span>
            <a href="link" class="categoryList-link">
                Alt link-3
            </a>
        </div>
    </li>

    <li class="categoryList-item">
        <div class="categoryList-itemRow">
                <span class="categoryList-togglerSpacer"></span>
            <a href="link" class="categoryList-link">
                Alt link-4
            </a>
        </div>
    </li>

    <li class="categoryList-item">
        <div class="categoryList-itemRow">
                <span class="categoryList-togglerSpacer"></span>
            <a href="link" class="categoryList-link">
                Alt link-5
            </a>
        </div>
    </li>
   
    </ol>      
    </li>

    <li class="categoryList-item">
        <div class="categoryList-itemRow">
                <a class="categoryList-toggler" data-xf-click="toggle" data-target="< :up :next" role="button" tabindex="0" aria-label="Toggle expanded"></a>
            <a href="link" class="categoryList-link">
                Link-2
            </a>
        </div>
       
    <ol class="categoryList toggleTarget" style="" tabindex="-1">
       
    <li class="categoryList-item">
        <div class="categoryList-itemRow">
                <span class="categoryList-togglerSpacer"></span>
            <a href="link" class="categoryList-link">
                Alt link-2.1
            </a>
        </div>
    </li>

    <li class="categoryList-item">
        <div class="categoryList-itemRow">
                <span class="categoryList-togglerSpacer"></span>
            <a href="link" class="categoryList-link">
                Alt link-2.2
            </a>
        </div>
    </li>  

        <li class="categoryList-item">
        <div class="categoryList-itemRow">
                <span class="categoryList-togglerSpacer"></span>
            <a href="link" class="categoryList-link">
                Alt link-2.3
            </a>
        </div>
    </li>

    </ol>  
    </li>

    <li class="categoryList-item">
        <div class="categoryList-itemRow">
                <span class="categoryList-togglerSpacer"></span>
            <a href="link" class="categoryList-link">
                Link-3
            </a>
        </div>  
    </li>

    <li class="categoryList-item">
        <div class="categoryList-itemRow">
                <span class="categoryList-togglerSpacer"></span>
            <a href="link" class="categoryList-link">
                Link-4
            </a>
        </div>
    </li>

    <li class="categoryList-item">
        <div class="categoryList-itemRow">
                <span class="categoryList-togglerSpacer"></span>
            <a href="link" class="categoryList-link">
                Link-5
            </a>
        </div>
    </li>

    <li class="categoryList-item">
        <div class="categoryList-itemRow">
                <span class="categoryList-togglerSpacer"></span>
            <a href="link" class="categoryList-link">
                Link-6
            </a>
        </div>
    </li>  
   
    </ol>

HTML kodlardaki linkleri ve kategori isimlerini kendinize göre düzenleyin...




link1.jpg
link2.jpg


link-3.jpg
link-4.jpg
Yazar
Ugur
Görüntüleme
1,415
İlk yayınlama
Son güncelleme
Değerlendirme
0.00 yıldız 0 değerlendirme

Ugur ait diğer kaynakar

Foruma hoş geldin 👋, Ziyaretçi

Forum içeriğine ve tüm hizmetlerimize erişim sağlamak için foruma kayıt olmalı ya da giriş yapmalısınız. Foruma üye olmak tamamen ücretsizdir.