XenForo 2 Açılır Kapanır (Akordiyon) Kategori Widget Ekleme Resimli Anlatım


iZurdea

Üye
Üye
15 Ocak 2019
105
60
28
Selam arkadaşlar şimdi sizlere Açılıp kapanabilen (akordiyon) şablon linkler eklemek için önce yeni bir widget oluşturmayı göstereciğiz.

Örnek: site://www.admin.php /Kullandığımız Tema / 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ü
Daha Şok ve Güzel Bu pozisyonlarda göster: Widgetin Sitemizde veya Forumumuzda görünmesini istediğiniz alanları siz seçin...


ŞABLON

HTML:
Kod:
 <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...


- Resim:

- Resim:



- Resim:

- Resim:
 
  • Beğendim
Tepkiler: EmreOZCELIK