Açılır kapanır forum katogorileri

kullanıcıların ilgilenmedikleri katogorileri daraltma seceneğinın basit bir yolu. artık kullanıcılar sayfayı yenilediğinde veya siteyi tekrar ziyaret ettiklerinde kapattıkları katogoriler kapalı kalmaya devam edecek.tir.

sablonu ac
Kod:
node_list_category

bul
Kod:
<div class="block block--category block--category{$node.node_id}">

değiştir
Kod:
<div class="block block--category block--category{$node.node_id} collapsible-nodes">

bul
Kod:
<h2 class="block-header">

üstüne ekle
Kod:
<div class="block-header--left">

BUL
xenforo 2x için
Kod:
<div class="block-desc">{$node.description|raw}</div></xf:if>

xenforo 2.1x için
Kod:
<xf:if is="{$node.description}"><span class="block-desc">{$node.description|raw}</span></xf:if>

altına ekle
Kod:
</div>

bul
Kod:
<div class="block-body">
değiştir
Kod:
<div class="block-body block-body--collapsible {{ !is_toggled('_node-' . $node.node_id) ? ' is-active' : '' }}">

ac ve ekle extra.less: template

Kod:
/* Collapse katogori */
.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%;
        }
}
 

Ekli dosyalar

  • ALMUSA-CollapsibleCategory-2.2.0.zip
    330.8 KB · Bakış: 88
eğer geçiş efekti vermek isterseniz extra.less: template ye asağıdaki kodları ekleyin

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;
}
 

Benzer konular ↴

Benzer konular ↴

Üst Alt