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

shqawe

ربي أشرح لي صدري
طاقم الإدارة
إنضم
27 يونيو 2019
المشاركات
3,370
مستوى التفاعل
2,917
النقاط
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,743
مستوى التفاعل
3,916
النقاط
113
العمر
41
الإقامة
المغرب
الموقع الالكتروني
اللهم امين اخي تركي نسال الله ان يرفع عنا البلاء

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

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

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

shqawe

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

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

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

Fallag

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

shqawe

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

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

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

ireepaircom

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

shqawe

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

A.Jamal

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

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

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

screenshot-2021.09.17-22_30_21.png
 

shqawe

ربي أشرح لي صدري
طاقم الإدارة
إنضم
27 يونيو 2019
المشاركات
3,370
مستوى التفاعل
2,917
النقاط
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);
}

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

A.Jamal

:: الأعضاء ::
إنضم
23 فبراير 2021
المشاركات
64
مستوى التفاعل
15
النقاط
8
حياك الله اخوي @A.Jamal

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

الأخ العزيز الغالي @shqawe
أحسنت وبارك الله فيك وجعله في في ميزان حسناتك ولا حرمنا الله من مشاركاتك.

الكود يعمل بشكل صحيح وسليم

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

ولله الحمد والمنه
أطيب تحية.
 

shqawe

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

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

kamel dz

:: الأعضاء ::
إنضم
28 مارس 2019
المشاركات
74
مستوى التفاعل
57
النقاط
18
ربي يبارك فيك حركة جميلة
ممكن طريقة وضع الزر في نفس مستوى شريط التنقل الرئيسية كما هو موضح في الصورة

2023-10-02 11 12 53.png
 

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

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

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

المواضيع
2,082
المشاركات
21,949
الأعضاء
977
آخر عضو مسجل
rfab
أعلى