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

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

  • بادئ الموضوع بادئ الموضوع shqawe
  • تاريخ البدء تاريخ البدء

shqawe

ربي أشرح لي صدري
27 يونيو 2019
3,164
23
2,073
113
K.S.A
بسم الله الرحمن الرحيم

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

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

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

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


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

التعديل سوف يكون على قالب 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;
    }


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

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

تقبلوا احترامي وتقديري
اخوكم
شقاوي
 
اللهم امين اخي تركي نسال الله ان يرفع عنا البلاء

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

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

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

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

احترامي وتقديري
اخوك
شقاوي
 
وفيك حبيبي @Fallag

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

احترامي وتقديري
اخوك
شقاوي
 
كالعادة @shqawe شرح رائع وبسيط لكل ماهو مفيد

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

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

screenshot-2021.09.17-22_30_21.png
 
كالعادة @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

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

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

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

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

ولله الحمد والمنه
أطيب تحية.
 
تحت امرك اخوي @A.Jamal والله يقبل ما دعيت والله يكتب لك مثل مادعيت

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

2023-10-02 11 12 53.png
 

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

المواضيع
1,451
المشاركات
16,634
الأعضاء
1,025
آخر عضو مسجل
ahmedelshazly.work2024
أعلى