XF 2.1 Eklenti - Açılır Kapanır Sidebar Yapım Kılavuzu | XenGenTr - Türkiye'nin XenForo Türkçe destek topluluğu

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: