[ حصريا ] - شرح اخفاء واظهار الشريط الجانبي - معهد زين العربية
موقع حلبية الموقع الاول في العالم العربي لللمعلومات الصحيحة
تجارتنا منصة تجارية تساهم في تطور التجارة العالمية والاقتصاد
موقع كيف افضل موقع للرد على جميع اسئلتك موقع كيف بوابتك للمستقبل

[ حصريا ] شرح اخفاء واظهار الشريط الجانبي

shqawe

ربي أشرح لي صدري
طاقم الإدارة
إنضم
27 يونيو 2019
المشاركات
2,794
مستوى التفاعل
2,375
النقاط
113
الإقامة
K.S.A
  • التقييمات: 0
  • #1
بسم الله الرحمن الرحيم

الحمد لله والصلاة والسلام على رسول الله نبينا محمد عليه افضل الصلاة واتم التسليم

اللهم لا علم لنا إلا ما علمتنا، إنك أنت العليم الحكيم، اللهم علمنا ما ينفعنا، وانفعنا بما علمتنا، وزدنا علما،

غبنا عنكم كثيرا ً وذلك رغما ً عنا بسبب ما يمر به العالم بنكبة وباء كورونا حمانا الله واياكم منه انتم ومن تحبون وهو ما سبب لخبطة في حياة الكل لذا احببنا ان نقدم لكم هذا الدرس الذي لاطالما رأيت الكثير يسألون عنه وعن كيفية عمله لذا وجب علينا ان نقدم المعلومة لعلها تجيب عن تساؤل الجميع ان شاء الله ولا نطلب منكم سواء الدعاء لنا ولوالدينا

الدرس هو عبارة عن كيفية عمل زر عند الضغط عليه يتم اخفاء الشريط الجانبي او اظهاره حسب ما تريد مع حفظ اختيارك هذا عند العودة مرة أخرى للمنتدى مثل ماهو موجود في استايل زين العربية الموجود على الرابط التالي :


بسم الله نبدأ الدرس:

التعديل سوف يكون على قالب PAGE_CONTAINER نفتح القالب ومن ثم نبحث عن:

HTML:
<div class="p-body-main

ونضيف فوقة هالكود:


كود:
<div class="hide_sidebar">
            <xf:if is="$sidebar">
                <span id="collapse-side" class="sidebar-btn {{ !is_toggled('xensidebarCollapse') ? ' is-active' : '' }}"
                      data-xf-click="toggle" data-xf-init="toggle-storage" data-storage-type="cookie"
                      data-target=".p-body-main--withSidebar" data-storage-key="xensidebarCollapse">
                </span>
            </xf:if>
        </div>


ونبحث عن هذا الكود

كود:
<div class="p-body-main {{ $sidebar ? 'p-body-main--withSidebar' : '' }} {{ $sideNav ? 'p-body-main--withSideNav' : '' }}">


ونستبدله بهذا الكود:


كود:
<div class="p-body-main {{ $sidebar ? 'p-body-main--withSidebar' : '' }} {{ $sideNav ? 'p-body-main--withSideNav' : '' }}{{ !is_toggled('xensidebarCollapse') ? ' xy_default' : '' }}">

ثم نقوم باضافة هذه الاكواد في قالب extra.less مع امكانية تغييرها حسب ما تريد

CSS:
.sidebar-btn{
    background:#fff;
    padding: 1px 7px;
    font-size: 16pt;
    color:#4bcbdf;
    border: 1px solid #d4d4d4;
    border-radius: 3px;
    line-height: 28px;
    
    &:hover{
            background: #4bcbdf;
            color: #fff;
    }// End hover sidebar-btn
    
    &:before{
        .m-faBase('Pro');
           .m-faContent(@fa-var-arrow-square-left);
    }// End before sidebar-btn
    
    &.is-active:before{
        .m-faBase('Pro');
           .m-faContent(@fa-var-arrow-square-right);
        color:#ce3451;
    }// End is-active:before
    
} // End sidebar-btn tag

.p-body-main.p-body-main--withSidebar.is-active .p-body-content, .p-body-main.p-body-main--withSideNav.is-active .p-body-content {
        width: 100%;
        max-width: 100%;
        padding-right: 0;
    }

    .p-body-main.p-body-main--withSidebar.is-active .p-body-sidebar, .p-body-main.p-body-main--withSideNav.is-active .p-body-sidebar, .p-body-main.p-body-main--withSidebar.is-active .p-body-sideNav, .p-body-main.p-body-main--withSideNav.is-active .p-body-sideNav {
        width: 0;
        height: 0;
        opacity: 0;
        overflow: hidden;
        display: none;
    }


والى هنا ينتهي درسنا واتمنى التجربة واي سؤال حاضرين للغالين

ان اصبت فهذا من فضل الله علي وان اخطأت فجل من لا يخطأ

تقبلوا احترامي وتقديري
اخوكم
شقاوي
 

أبو غَيْث

:: الإدارة العامة ::
طاقم الإدارة
إنضم
23 يناير 2019
المشاركات
5,206
مستوى التفاعل
3,276
النقاط
113
العمر
38
الإقامة
المغرب
الموقع الالكتروني
اللهم امين اخي تركي نسال الله ان يرفع عنا البلاء

بارك الله فيك على الدرس المهم و المفيد لم يبحثون عن طريقة اخفاء الشريط الجانبي

ولو ان الاكواد قد لا يفهمها الكثيرون خصوصا المبتدئون مع سكربت زين فورو

لذا لو تكرمت ان شاء الله مستقبلا يتم عمل اضافة خاصة لها
 

shqawe

ربي أشرح لي صدري
طاقم الإدارة
إنضم
27 يونيو 2019
المشاركات
2,794
مستوى التفاعل
2,375
النقاط
113
الإقامة
K.S.A
تحت امرك وامر الاعضاء الغالين

بس اخلص بعض الطلبات اللي عندي وباذن الله اعمل اضافة خاصة بهذا الموضوع

احترامي وتقديري
اخوك
شقاوي
 

Fallag

:: الأعضاء ::
[ عُملاء زين العَربية ]
إنضم
20 مارس 2019
المشاركات
258
مستوى التفاعل
80
النقاط
28
الموقع الالكتروني
بارك الله فيك أخي تركي
تم تطبيقها على موقعي بنجاح
 

shqawe

ربي أشرح لي صدري
طاقم الإدارة
إنضم
27 يونيو 2019
المشاركات
2,794
مستوى التفاعل
2,375
النقاط
113
الإقامة
K.S.A
وفيك حبيبي @Fallag

والحمد لله انه الشرح كان واضح

احترامي وتقديري
اخوك
شقاوي
 

ireepaircom

عضو فعال
[ عُملاء زين العَربية ]
إنضم
12 مارس 2020
المشاركات
163
مستوى التفاعل
30
النقاط
28
ماشاء الله شرح ممتاز
 

shqawe

ربي أشرح لي صدري
طاقم الإدارة
إنضم
27 يونيو 2019
المشاركات
2,794
مستوى التفاعل
2,375
النقاط
113
الإقامة
K.S.A
حياك الله اخوي @ireepaircom نورت الموضوع
 

A.Jamal

:: الأعضاء ::
إنضم
23 فبراير 2021
المشاركات
58
مستوى التفاعل
10
النقاط
8
كالعادة @shqawe شرح رائع وبسيط لكل ماهو مفيد

هل من الممكن اضافة تاثير عند اخفاء\اظهار الشريط الجانبي

مثال: كما هو موجود في ستايل هذا الموقع

screenshot-2021.09.17-22_30_21.png
 

shqawe

ربي أشرح لي صدري
طاقم الإدارة
إنضم
27 يونيو 2019
المشاركات
2,794
مستوى التفاعل
2,375
النقاط
113
الإقامة
K.S.A
كالعادة @shqawe شرح رائع وبسيط لكل ماهو مفيد

هل من الممكن اضافة تاثير عند اخفاء\اظهار الشريط الجانبي

مثال: كما هو موجود في ستايل هذا الموقع

مشاهدة المرفق 5235

حياك الله اخوي @A.Jamal

استبدل كود css بهذا الكود واعطينا النتيجة

CSS:
.sidebar-btn {
    background: #fff;
    padding: 1px 7px;
    font-size: 16pt;
    color: #4bcbdf;
    border: 1px solid #d4d4d4;
    border-radius: 3px;
    line-height: 28px;
    &:hover {
        background: #4bcbdf;
        color: #fff;
    } // End hover sidebar-btn
    &:before {
        .m-faBase('Pro');
        .m-faContent(@fa-var-arrow-square-left);
    } // End before sidebar-btn
    &.is-active:before {
        .m-faBase('Pro');
        .m-faContent(@fa-var-arrow-square-right);
        color: #ce3451;
    } // End is-active:before
} // End sidebar-btn tag
.p-body-main.p-body-main--withSidebar.is-active .p-body-content,
.p-body-main.p-body-main--withSideNav.is-active .p-body-content {
    width: 100%;
    max-width: 100%;
    padding-right: 0;
}

.p-body-main.p-body-main--withSidebar.is-active .p-body-sidebar,
.p-body-main.p-body-main--withSideNav.is-active .p-body-sidebar,
.p-body-main.p-body-main--withSidebar.is-active .p-body-sideNav,
.p-body-main.p-body-main--withSideNav.is-active .p-body-sideNav {
    width: 0;
    height: 0;
    opacity: 0;
    transform: scale(0);
    overflow: hidden;
}

.p-body-main.p-body-main--withSidebar.is-active .p-body-sidebar {
    display: table-column;
}

.p-body-main.p-body-main--withSidebar.is-active .p-body-contentCol {
    display: none;
}

.p-body-content {
    transition: all .55s cubic-bezier(.68, -0.55, .27, 1.55);
}

.p-body-sidebar {
    transition: all .45s cubic-bezier(.68, -0.55, .27, 1.55);
}

احترامي وتقديري
اخوك
شقاوي
 

جميع المواضيع والمشاركات المكتوبة تعبّر عن وجهة نظر صاحبها ,, ولا تعبّر بأي شكل من الاشكال عن وجهة نظر إدارة زين العربية .

التعليقات المنشورة لا تعبر عن رأي معهد زين العربية ولا نتحمل أي مسؤولية قانونية حيال ذلك :: يتحمل كاتبها مسؤولية النشر ::

الأعضاء المتصلون

إحصائيات المنتدى

المواضيع
1,707
المشاركات
18,626
الأعضاء
682
آخر عضو مسجل
hima
أعلى