Neler yeni

Foruma hoş geldin 👋, Ziyaretçi

Forum içeriğine ve tüm hizmetlerimize erişim sağlamak için foruma kayıt olmalı ya da giriş yapmalısınız. Foruma üye olmak tamamen ücretsizdir.

Kaynak ikonu

XF 2.1 Eklenti Açılır Kapanır Sidebar Yapım Kılavuzu

Bu eklenti, add-ons XenForo 2.1.X ile uyumlu ve stabil olarak çalışmaktadır.
Uyumlu XF 2 Sürümleri
AÇIKLAMA
Bu kılavuz ile açılır kapanır bir sidebar sistemi yapabilirsiniz.
Xenforo varsayılan teması üzerinden anlatılmıştır. Diğer temalar için uyum bilinmemektedir.


ANLATIM

PAGE_CONTAINER
1-) Açma Kapama Butonu
HTML:
<xf:set var="$subNavHtml">
    <xf:if is="$selectedNavChildren is not empty">
        <div class="p-sectionLinks">

Bu kod kısmını bulun içinde:

HTML:
</xf:foreach>

kısmından sonra alttaki satırları ekleyin.

HTML:
<xf:if is="$template == 'forum_list'">
    <a href="javascript:void(0)" class="hirqiz-sidebar-toggle open" sidebar-state='collapse'><i class="fa fa-toggle-off" aria-hidden="true"></i></a>
    <a href="javascript:void(0)" class="hirqiz-sidebar-toggle close" sidebar-state='collapsed'><i class="fa fa-toggle-on" aria-hidden="true"></i></a>
</xf:if>

SONUCUNDA AŞAĞIDAKİ GİBİ GÖRÜNMELİDİR
HTML:
<xf:set var="$subNavHtml">
    <xf:if is="$selectedNavChildren is not empty">
        <div class="p-sectionLinks">
            <div class="p-sectionLinks-inner hScroller" data-xf-init="h-scroller">
                <div class="hScroller-scroll">
                    <ul class="p-sectionLinks-list">
                    <xf:foreach loop="$selectedNavChildren" key="$navId" value="$navEntry" i="$i">
                        <li>
                            <xf:macro name="nav_entry" arg-navId="{$navId}" arg-nav="{$navEntry}" arg-shortcut="alt+{$i}" />
                        </li>
                    </xf:foreach>
                        <xf:if is="$template == 'forum_list'">
                            <a href="javascript:void(0)" class="hirqiz-sidebar-toggle open" sidebar-state='collapse'><i class="fa fa-toggle-off" aria-hidden="true"></i></a>
                            <a href="javascript:void(0)" class="hirqiz-sidebar-toggle close" sidebar-state='collapsed'><i class="fa fa-toggle-on" aria-hidden="true"></i></a>
                        </xf:if>
                    </ul>
                </div>
            </div>
        </div>
    <xf:elseif is="{$selectedNavEntry}" />
        <div class="p-sectionLinks p-sectionLinks--empty"></div>
    </xf:if>
</xf:set>


2-) Sidebar Değişikliği
HTML:
<xf:if is="$sidebar">
    <div class="p-body-sidebar">

kısmını bulun

HTML:
<xf:ad position="container_sidebar_above" />
yukarıdaki kodun üzerine aşağıdaki satırı ekleyin

HTML:
<div class="hirqiz-sidebar">

daha sonra aşağıdaki kodu bulun

HTML:
<xf:ad position="container_sidebar_below" />

bulun altına aşağıdaki satırı ekleyin.

HTML:
</div>

SONUCUNDA AŞAĞIDAKİ GİBİ GÖRÜNMELİDİR

HTML:
<xf:if is="$sidebar">
    <div class="p-body-sidebar">
        <div class="hirqiz-sidebar">
            <xf:ad position="container_sidebar_above" />
            <xf:foreach loop="$sidebar" value="$sidebarHtml">
                {$sidebarHtml}
            </xf:foreach>
            <xf:ad position="container_sidebar_below" />
        </div>
    </div>
</xf:if>

helper_js_global
1-) Head Tagı

Aşağıdaki satırları bulun
HTML:
<!--XF:CSS-->
<xf:if is="$xf.fullJs">
    <script src="{{ js_url('vendor/modernizr/modernizr.min.js') }}"></script>
    <script src="{{ js_url('xf/preamble.js') }}"></script>
<xf:else />
    <script src="{{ js_url('xf/preamble-compiled.js') }}"></script>
</xf:if>

Aşağıdaki kodu ekleyin

HTML:
<script>
    var xfhtml = document.getElementById('XF');
    function addClass(el, className) { if (el.classList) el.classList.add(className); else if (!hasClass(el, className)) el.className += ' ' + className; }
    function getCookie(name) { var v = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)'); return v ? v[2] : null; }
    function setCookie(name, value, days) { var d = new Date; d.setTime(d.getTime() + 24*60*60*1000*days); document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString(); }
    function deleteCookie(name) { setCookie(name, '', -1); }
    var sidebarCookie = getCookie('sidebarState');
    if(sidebarCookie){ xfhtml.setAttribute('sidebar-state', '' + sidebarCookie + '');    } else { xfhtml.setAttribute('sidebar-state', "collapse"); }
</script>

2-) Body Tagı
HTML:
<form style="display:none" hidden="hidden">
    <input type="text" name="_xfClientLoadTime" value="" id="_xfClientLoadTime" title="_xfClientLoadTime" tabindex="-1" />
</form>

satırlarını bulun üstüne şu kodları ekleyin:

HTML:
<script>
    $(document).ready(function(){
        var html = $('#XF');
          
        $("a.hirqiz-sidebar-toggle.open").on('click', function(){
            var styleid = html.attr('style-id');
            var sidebarState = $(this).attr("sidebar-state");
            html.attr('sidebar-state', '' + sidebarState + '');
            setCookie('sidebarState', '' + sidebarState + '', 30);
        });
        $("a.hirqiz-sidebar-toggle.close").on('click', function(){
            var styleid = html.attr('style-id');
            var sidebarState = $(this).attr("sidebar-state");
            html.attr('sidebar-state', '' + sidebarState + '');
            setCookie('sidebarState', '' + sidebarState + '', 30);
        });
    });
</script>

extra.less
CSS:
/* Açılır Kapanır Sidebar */
.hirqiz-sidebar-toggle{
    float: right;
    padding-right: 10px;
    font-size: 20px;
}

.p-body-sidebar {
    -moz-transition: left 0.3s ease;
    transition: 0.3s ease;
}

@media (max-width:650px) { .p-body-sidebar {width: 100% !important;} }

@media (max-width: 480px) { .p-body-sidebar {width: 100% !important;} }

html[sidebar-state='collapse']{
    .p-body-sidebar {width: 250px}
    .p-body-sidebar {overflow: visible}
    .p-body-main--withSidebar .p-body-content {padding-right: 10px}
    .hirqiz-sidebar{display:block}
    .hirqiz-sidebar-toggle.open{display:none}
    .hirqiz-sidebar-toggle.close{display:inline-block}

    @media (max-width: 650px) {.p-body-main--withSidebar .p-body-content {padding-right: 0px;}}
    @media (max-width: 480px) {.p-body-main--withSidebar .p-body-content {padding-right: 0px;}}
}

html[sidebar-state='collapsed']{
    .p-body-sidebar {width: 0px}
    .p-body-sidebar {overflow: hidden}
    .p-body-main--withSidebar .p-body-content {padding-right: 0px}
    .hirqiz-sidebar{display:none}
    .hirqiz-sidebar-toggle.open{display:inline-block}
    .hirqiz-sidebar-toggle.close{display:none}

    @media (max-width: 650px) {.p-body-main--withSidebar .p-body-content {padding-right: 0px;}}
    @media (max-width: 480px) {.p-body-main--withSidebar .p-body-content {padding-right: 0px;}}
}

SONUÇ

Açık Hali:

7716



Kapalı Hali:

7717
Yazar
Mbtt
Görüntüleme
2.054
İlk yayınlama
Son güncelleme

Puanlar

5,00 yıldız 2 değerlendirme

Mbtt ait diğer kaynakar

Son incelemeler

Ellerine sağlık hocam
Ellerinize sağlık

Tema özelleştirme sistemi

Bu menüden forum temasının bazı alanlarını kendinize özel olarak düzenleye bilirsiniz

Zevkini yansıtan rengi seç

Geniş / Dar görünüm

Temanızı geniş yada dar olarak kullanmak için kullanabileceğiniz bir yapıyı kontrolünü sağlayabilirsiniz.

Izgara görünümlü forum listesi

Forum listesindeki düzeni ızgara yada sıradan listeleme tarzındaki yapının kontrolünü sağlayabilirsiniz.

Resimli ızgara modu

Izgara forum listesinde resimleri açıp/kapatabileceğiniz yapının kontrolünü sağlayabilirsiniz.

Kenar çubuğunu kapat

Kenar çubuğunu kapatarak forumdaki kalabalık görünümde kurtulabilirsiniz.

Sabit kenar çubuğu

Kenar çubuğunu sabitleyerek daha kullanışlı ve erişiminizi kolaylaştırabilirsiniz.

Köşe kıvrımlarını kapat

Blokların köşelerinde bulunan kıvrımları kapatıp/açarak zevkinize göre kullanabilirsiniz.

Geri