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.

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.488
İlk yayınlama
Son güncelleme

Puanlar

0,00 yıldız 0 değerlendirme

Ugur ait diğer kaynakar

Tema özelleştirme sistemi

Bu menüden forum temasının bazı alanlarını kendinize özel olarak düzenleye bilirsiniz

Zevkini yansıtan rengi seç

Geniş / Dar görünüm

Temanızı geniş yada dar olarak kullanmak için kullanabileceğiniz bir yapıyı kontrolünü sağlayabilirsiniz.

Izgara görünümlü forum listesi

Forum listesindeki düzeni ızgara yada sıradan listeleme tarzındaki yapının kontrolünü sağlayabilirsiniz.

Resimli ızgara modu

Izgara forum listesinde resimleri açıp/kapatabileceğiniz yapının kontrolünü sağlayabilirsiniz.

Kenar çubuğunu kapat

Kenar çubuğunu kapatarak forumdaki kalabalık görünümde kurtulabilirsiniz.

Sabit kenar çubuğu

Kenar çubuğunu sabitleyerek daha kullanışlı ve erişiminizi kolaylaştırabilirsiniz.

Köşe kıvrımlarını kapat

Blokların köşelerinde bulunan kıvrımları kapatıp/açarak zevkinize göre kullanabilirsiniz.

Geri