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
1,733
İlk yayınlama
Son güncelleme
Değerlendirme
5.00 yıldız 2 değerlendirme

Mbtt ait diğer kaynakar

Son incelemeler

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

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.