• VIP Üyelik
    12 AY SADECE 50 TL'ye Sınırsız IPTV listeleri ve hiç bir yerde bulamayacağınız özel paylaşımlar sizelerle... Bilgi İçin : TIKLAYIN!
  • İPTV Satışlarımız Başladı.
    Başlangıca özel fiyatlarla siz değerli üyelerimizin hizmetine sunuyoruz. Detaylı bilgi ve Test için : TIKLAYIN!

XenForo 2 Açılır / Kapanır (Collapsible) Kategoriler (Nodes)

MertK

Çalışkan Üye
#1
Çoğu özel temada bulunan "Açılır / Kapanır Kategori" özelliğini default temanıza ilave etmek ister misiniz?

Yapılan seçimler kayıt edildiği için sonraki girişlerde kapatılan kategoriler kapalı görünecektir.



NOT: Default tema üzerinde herhangi bir revizyon yapmadan önce kendi CHILD default temanızı oluşturmayı unutmayınız.

NASIL YAPIYORUZ:

1- ) Şablon "node_list_category " aşağıdaki kod değişikliklerini yapıyoruz.

a-) BUL :

Kod:
<div class="block block--category block--category{$node.node_id}">
DEĞİŞTİR:

Kod:
<div class="block block--category block--category{$node.node_id} collapsible-nodes">
b-) BUL :

Kod:
<h2 class="block-header">
ALTINA ILAVE ET:

Kod:
<div class="block-header--left">
c-) BUL :

Kod:
<div class="block-desc">{$node.description|raw}</div></xf:if>
SONUNA EKLE:

Kod:
</div>
d-) BUL :

Kod:
</h2>
ÜSTÜNE EKLE:

Kod:
<span id="collapse-{$node.node_id}" class="collapseTrigger collapseTrigger--block is-active" data-xf-click="toggle" data-xf-init="toggle-storage" data-target=".block--category{$node.node_id} .block-body" data-storage-key="_node-{$node.node_id}"></span>
e-) BUL :

Kod:
<div class="block-body">
DEĞİŞTİR:

Kod:
<div class="block-body block-body--collapsible is-active">
2- ) Şablon "extra.less " aşağıdaki kodu ilave ediyoruz.

Kod:
/* Node Collapse */
.block--category
{
    .collapseTrigger
    {
        opacity: 0.5;
        transition: opacity 0.3s;
        margin-right: 10px;
        &.is-active:before
        {
            content: "\f205";
            transform: scale(-1, 1);
            margin-right: -8px;
        }
        &:before
        {
            content: "\f205";
            font-size: 80%;
        }
    }
    .block-container:hover .collapseTrigger
    {
        opacity: 1;
    }
}

.collapsible-nodes
{
        .block-header
        {
            display: flex;
        }
        .block-header--left
        {
            margin-right: auto;
            max-width: 100%;
        }
}
OPSİYONEL:
Ben şahsen pek beğenmedim ama isterseniz "Açma / Kapama" animasyonu daha belirgin hale getirebilirsiniz. Bunun için aşağıdaki kodu "extra.less" ilave ediyoruz.

Kod:
.block-body.block-body--collapsible
{
    transition: all 0.75s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    -webkit-transition-property: all, -xf-opacity;
    transition-property: all, -xf-opacity;
    overflow-y: hidden;
    height: 0;
    -webkit-transition-property: all, -xf-height;
    transition-property: all, -xf-height;
}
SONUÇ :