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.
PHP- Kodu
<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>