Kategori Menüsü

Bu bölümün görüntülenmesi categorymenu.tpl dosyasında yapılandırılabilir. Bu bölümde, yayınlar için kategorilerin çıktı menüsünü yapılandırırsınız.

Temel Kategori Menü Etiketleri

Etiket	Açıklama
`[root]` ve `[/root]`	Menü şablonu başlangıçta oluşturulduğunda bunlar arasındaki bir metni görüntüler. Bu etiketler, menünün görünümünü oluşturmak için kullanılabilir. Örneğin, bazı HTML öğeleri eklemek veya kategori listesine dahil olmayan öğeleri eklemek için.
`[item]` ve `[/item]`	Kategori menü listesi oluşturulurken tek bir kategori listesi öğesini temsil eder. Bu etiketler arasındaki metin, her liste öğesi için özelleştirilmiş HTML görünümüyle görüntülenir.
`[sub-prefix]` ve `[/sub-prefix]`	Bir kategori ebeveynse ve alt kategorileri varsa, bunlar arasındaki metni alt kategori öneki olarak görüntüler.
`[sub-suffix]` ve `[/sub-suffix]`	Bir kategori ebeveynse ve alt kategorileri varsa, bunlar arasındaki metni alt kategori soneki olarak görüntüler.
`{sub-item}`	Ebeveyn kategoride alt kategorileri varsa, bu etiket alt kategorileri temsil eder. Bu etiket yalnızca [item] [/item] etiketleri içinde kullanılır.

Kategori İçerik Etiketleri

Etiket	Açıklama
`{id}`	Kategorinin kimliğini (ID) görüntüler.
`{name}`	Kategori adını görüntüler. Bu etiket yalnızca [item] [/item] etiketleri içinde kullanılır.
`{url}`	Kategori URL'sini görüntüler. Bu etiket yalnızca [item] [/item] etiketleri içinde kullanılır.
`{icon}`	Kategori simgesini görüntüler. Bu etiket yalnızca [item] [/item] etiketleri içinde kullanılır.
`[cat-icon]` ve `[/cat-icon]`	Yayının bulunduğu kategori için kategori ayarlarında bir simge ayarlanmışsa, bunlar arasındaki metin görüntülenir.
`[not-cat-icon]` ve `[/not-cat-icon]`	Yayının bulunduğu kategori için simge ayarlanmamışsa metin çıktısı alınır.
`{news-count}`	Kategorinin makale sayısını görüntüler. Bu etiket yalnızca [item] [/item] etiketleri içinde kullanılır.
`{description}`	Kategori açıklamasını görüntüler.
`[description]` ve `[/description]`	Açıklama belirtilmişse gömülü metni görüntüler.
`[not-description]` ve `[/not-description]`	Açıklama belirtilmemişse gömülü metni görüntüler.

Koşullu Etiketler

Etiket	Açıklama
`[active]` ve `[/active]`	Görüntülenen kategori veya makale menüdeki kategoriyle ilgiliyse, bunlar arasındaki bir metni görüntüler. Bu etiket yalnızca [item] [/item] etiketleri içinde kullanılabilir ve genellikle menüdeki aktif kategorileri vurgulamak için kullanılır.
`[not-active]` ve `[/not-active]`	Görüntülenen kategori veya makale bir menü kategorisine ait değilse, içindeki metin görüntülenir. Bu etiket yalnızca [item] [/item] etiketlerinin içinde bulunabilir ve örneğin bazı bilgileri (örneğin bağlantılar) yalnızca aktif olmayan menü kategorileri için çıktı olarak kullanılır.
`[isparent]` ve `[/isparent]`	Bir kategori ebeveynse ve alt kategorileri içeriyorsa, bunlar arasındaki bir metni görüntüler. Bu etiket yalnızca [item] [/item] etiketleri içinde kullanılır.
`[not-parent]` ve `[/not-parent]`	Kategori bir ebeveyn kategori değilse ve herhangi bir alt kategorisi yoksa gömülü metni görüntüler.
`[is-children]` ve `[/is-children]`	Bir kategorinin bir ebeveyn kategorisi varsa gömülü metni görüntüler.
`[not-children]` ve `[/not-children]`	Bir kategorinin ebeveyn kategorisi yoksa gömülü metni görüntüler.

Örnek Kullanımlar

Basit Liste Menü Şablonu

ul ve li HTML etiketlerine dayalı basit bir kategori menü şablonu örneğini görebilirsiniz:

[root]<ul class="catmenu">[/root]
[item]
 <li><a href="{url}">{name}</a>
 [sub-prefix]<ul>[/sub-prefix]{sub-item}[sub-suffix]</ul>[/sub-suffix]
 </li>
[/item]
[root]</ul>[/root]

Gelişmiş Menü Şablonu - Aktif Durumlu ve Makale Sayılı

[root]<ul class="category-nav">[/root]
[item]
  <li class="cat-item[active] active[/active]">
    <a href="{url}">
      [cat-icon]<img src="{icon}" alt="{name}" class="cat-icon">[/cat-icon]
      <span class="cat-name">{name}</span>
      <span class="cat-count">({news-count})</span>
    </a>
    [isparent]
      [sub-prefix]<ul class="subcat-menu">[/sub-prefix]
        {sub-item}
      [sub-suffix]</ul>[/sub-suffix]
    [/isparent]
  </li>
[/item]
[root]</ul>[/root]

Bootstrap Dropdown Menü Şablonu

[root]<ul class="nav navbar-nav">[/root]
[item]
  [isparent]
    <li class="dropdown[active] active[/active]">
      <a href="{url}" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
        {name} <span class="caret"></span>
      </a>
      [sub-prefix]<ul class="dropdown-menu">[/sub-prefix]
        {sub-item}
      [sub-suffix]</ul>[/sub-suffix]
    </li>
  [/isparent]
  [not-parent]
    <li[active] class="active"[/active]><a href="{url}">{name}</a></li>
  [/not-parent]
[/item]
[root]</ul>[/root]

Açıklama İçeren Menü Şablonu

[root]<div class="category-blocks">[/root]
[item]
  <div class="cat-block[active] active[/active]">
    <a href="{url}" class="cat-link">
      [cat-icon]<div class="cat-img"><img src="{icon}" alt="{name}"></div>[/cat-icon]
      <h3 class="cat-title">{name}</h3>
    </a>
    [description]
      <div class="cat-desc">{description}</div>
    [/description]
    <div class="cat-meta"><span>Makaleler: {news-count}</span></div>
  </div>
[/item]
[root]</div>[/root]

Mobil Uyumlu Menü Şablonu

[root]<div class="mobile-category-menu">
  <div class="mobile-menu-toggle">Kategoriler <i class="fas fa-chevron-down"></i></div>
  <ul class="mobile-menu-list">[/root]
[item]
  <li class="mobile-cat-item[active] active[/active][isparent] has-children[/isparent]">
    <a href="{url}">{name} <span class="item-count">({news-count})</span></a>
    [isparent]
      <span class="submenu-toggle"><i class="fas fa-plus"></i></span>
      [sub-prefix]<ul class="mobile-submenu">[/sub-prefix]
        {sub-item}
      [sub-suffix]</ul>[/sub-suffix]
    [/isparent]
  </li>
[/item]
[root]  </ul>
</div>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Mobil menü açma/kapama
    document.querySelector('.mobile-menu-toggle').addEventListener('click', function() {
      document.querySelector('.mobile-menu-list').classList.toggle('active');
      this.querySelector('i').classList.toggle('fa-chevron-up');
      this.querySelector('i').classList.toggle('fa-chevron-down');
    });
    
    // Alt menü açma/kapama
    document.querySelectorAll('.submenu-toggle').forEach(function(toggle) {
      toggle.addEventListener('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        this.closest('.mobile-cat-item').classList.toggle('open');
        this.querySelector('i').classList.toggle('fa-minus');
        this.querySelector('i').classList.toggle('fa-plus');
        let submenu = this.closest('.mobile-cat-item').querySelector('.mobile-submenu');
        if (submenu.style.maxHeight) {
          submenu.style.maxHeight = null;
        } else {
          submenu.style.maxHeight = submenu.scrollHeight + 'px';
        }
      });
    });
  });
</script>[/root]