تحويل الناف بار الرئيسي الى قائمة جانبية ثابته

[shqawe]

بسم الله الرحمن الرحيم

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

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

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

اقصد بالناف بار الرئيسي الذي يحمل التبويبات [ المنتديات , ما لجديد , المعرض, المنتجات, الاعضاء, الترجمة ]

والناف بار الفرعي هو القوائم التي تتبع هذه التبويبات

لمشاهدة مثال حي على التعديل الرجاء زيارة المنتدى التجريبي الخاص بي واختيار الاستايل الافتراضي

اضغط هنا لمشاهدة المثال

بسم الله نبدأ التعديل:

نذهب الى لوحة التحكم > المستخدمين > حقول المستخدم المخصصة > اضافة حقل

ونملء البيانات حسب التالي:

معرف الحقل: menu_position

العنوان: Menu Position

مكان العرض: خيارات

نوع الحقل: خانات الاختيار

ثم خيارات لحقول الاختيار

الخيارات الممكنة:
القيمة: 1
النص: right

خيارات عامة: عدل حسب حاجتك

ثم اضغط على حفظ

وتوجه بعدها الى القوالب الخاصة بالاستايل الذي سوف تقوم بالتعديل عليه

وقم باضافة قالب جديد باسم: nav_side_menu.less

واضف بداخله الاكواد التالية:

@media (min-width: 651px) {
    .menu_right {margin-right:72px;}
    .menu_left {margin-left:72px;}

    .p-navSticky {
        position: fixed !important;
        width: 72px;
        top: 0 !important;
        right: 0;
        bottom: 0 !important;
        overflow: auto;
        background: #fff;
        box-shadow: 0 0 8px 3px rgba(0,0,0,0.3);
    }

    .side_menu_sticky{
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 99;
    }

    .side_left_nav.p-navSticky {
        left: 0;
        z-index: 100;
    }

    .p-nav-list>li , .p-navgroup-link , .p-nav-inner{
        display: block;
    }

    .p-navgroup , .p-navgroup-link {
        float: none;
        text-align: center;
    }

    .p-nav-list .p-navEl.is-selected .p-navEl-link , .p-nav-list .p-navEl-link , .p-navgroup-link {
        width: 100%;
        text-align: center;
        color: #185886;
        font-size: 11px;
    }
    .p-nav-list .p-navEl-link--splitMenu, .p-nav-list .p-navEl-splitTrigger {
        width: 100%;
        text-align: center;
        padding: 8px 0 8px 2px !important;
        font-size: 11px;
        font-family: 'Droid Sans', sans-serif;
    }

    .p-nav-list .p-navEl-splitTrigger  {
        width: 25%;
        color: #185886;
        font-size: 13px;
        text-align: center;
    }

    .p-navgroup {
        background: none;
    }


    .p-nav {
        color: #185886;
        background: transparent;
    }
    .p-navgroup-link.badgeContainer {
        font-size: 13px;
    }
  
    .p-navSticky--primary.is-sticky .p-nav-list .p-navEl-link.p-navEl-link--splitMenu ,
    .p-nav-list .p-navEl-link.p-navEl-link--splitMenu {
        padding-right: 15px;
    }
    .menu--account {
        top: 0px !important;
    }
  
    [data-load-target=".js-convMenuBody"] {
        top: 40px !important;
    }
  
    [data-load-target=".js-alertsMenuBody"] {
        top: 74px !important;
    }
  
    .menu--account , [data-load-target=".js-convMenuBody"] , [data-load-target=".js-alertsMenuBody"]  {
        right: 72px !important;
        left: initial !important;
    }
  
    .menu.menu--structural.side_search_menu {
        right: 72px !important;
        left: initial !important;
        margin-top: -30px;
    }
  
    .menu_position_left .menu--account , .menu_position_left [data-load-target=".js-convMenuBody"]
    , .menu_position_left [data-load-target=".js-alertsMenuBody"] , .menu_position_left .menu.menu--structural.side_search_menu  {
        left: 72px !important;
    }
    .p-navgroup-link.badgeContainer:after {
        left: 45px;
    }
    .badgeContainer:after {
        word-break: break-all;
        margin-right: 1px !important;
    }
    a.p-navgroup-link.p-navgroup-link--iconic.p-navgroup-link--whatsnew , .p-nav-list .p-navEl-splitTrigger
    , span.menu-arrow , .hScroller-action ,.p-navgroup-link.p-navgroup-link--iconic .p-navgroup-linkText, .p-navgroup-link.p-navgroup-link--textual i ,
    .p-navSticky--primary.is-sticky .p-nav-list .p-navEl.is-selected .p-navEl-splitTrigger  , .p-nav-scroller .hScroller-action.hScroller-action--end{
        display: none !important;
    }
    .p-sectionLinks-list .p-navEl-link.p-navEl-link--splitMenu {
        padding-right: 6px;
    }
    .p-navgroup-link--iconic i {
        font-size: 18px;
    }
    .p-navgroup-link {
        padding-top: 4px;
        padding-bottom: 4px;
    }
    .p-navgroup-link:hover ,.p-nav-list .p-navEl:not(.is-selected):not(.is-menuOpen):hover,
    .p-nav-list .p-navEl:not(.is-selected):not(.is-menuOpen) .p-navEl-link:hover,
    .p-nav-list .p-navEl:not(.is-selected):not(.is-menuOpen) .p-navEl-splitTrigger:hover {
        background: rgb(199, 221, 243);
    }
    .p-navgroup.p-discovery {
        margin-left: 0em;
    }
    .p-navgroup-link {
        border-left: 0px solid rgba(20, 20, 20, 0.15);
    }
    .p-nav-list .p-navEl-link {
        padding: 8px 0px;
        white-space: normal;
    }

    .p-nav-list .p-navEl.is-selected .p-navEl-link {
        padding-right: 0px;
    }

    .p-navgroup-link.p-navgroup-link--user .avatar {
        width: 32px;
        height: 32px;
        font-size: 19px;
        line-height: 32px;
    }

    .p-navgroup-link--logIn {
        font-size: 13px;
        padding: 8px 0px;
    }
    .p-navgroup-link--register {
        font-size: 13px;
        padding: 8px 0px;
    }
}

@media (max-width: 650px) {
    .menu_right {margin-right: 0px;}
    .menu_left {margin-left: 0px;}
}

ثم اضغط على حفظ وخروج.

ثم افتج قالب PAGE_CONTAINER

وابحث عن :

<xf:include template="google_analytics" />

واضف تحته :

<xf:css src="nav_side_menu.less" />

وابحث عن:

<body data-template="{$template}">

واضف تحته:

<xf:if is="$xf.visitor.Profile.custom_fields.menu_position">
    <div class="menu_right">
<xf:else />
    <div class="menu_left">
</xf:if>

ثم ابحث عن هذا الكود وقم بحذفه:

<div class="p-nav-scroller hScroller" data-xf-init="h-scroller" data-auto-scroll=".p-navEl.is-selected">
                <div class="hScroller-scroll">
                    <ul class="p-nav-list js-offCanvasNavSource">
                    <xf:foreach loop="$navTree" key="$navSection" value="$navEntry" i="$i" if="{{ $navSection != $xf.app.defaultNavigationId }}">
                        <li>
                            <xf:macro name="nav_entry"
                                arg-navId="{$navSection}"
                                arg-nav="{$navEntry}"
                                arg-selected="{{ $navSection == $pageSection }}"
                                arg-shortcut="{$i}" />
                        </li>
                    </xf:foreach>
                    </ul>
                </div>
            </div>

وابحث عن هذا الكود ايضاً وقم بحذفة:

<xf:else />
                        <a href="{{ link('login') }}" class="p-navgroup-link p-navgroup-link--textual p-navgroup-link--logIn"
                            data-xf-click="overlay" data-follow-redirects="on">
                            <span class="p-navgroup-linkText">{{ phrase('log_in') }}</span>
                        </a>
                        <xf:if is="$xf.options.registrationSetup.enabled">
                            <a href="{{ link('register') }}" class="p-navgroup-link p-navgroup-link--textual p-navgroup-link--register"
                                data-xf-click="overlay" data-follow-redirects="on">
                                <span class="p-navgroup-linkText">{{ phrase('register') }}</span>
                            </a>
                        </xf:if>

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

<div class="menu-footer">
                                    <span class="menu-footer-controls">
                                        <xf:button type="submit" class="button--primary" icon="search" />
                                        <xf:button href="{{ link('search') }}">{{ phrase('advanced_search...') }}</xf:button>
                                    </span>
                                </div>

                                <xf:csrf />
                            </form>
                        </div>
                    </xf:if>
                </div>
            </div>

واضف بعده هذا الكود:

<div class="p-nav-scroller hScroller" data-xf-init="h-scroller" data-auto-scroll=".p-navEl.is-selected">
                <div class="hScroller-scroll">
                    <ul class="p-nav-list js-offCanvasNavSource">
                    <xf:foreach loop="$navTree" key="$navSection" value="$navEntry" i="$i" if="{{ $navSection != $xf.app.defaultNavigationId }}">
                        <li>
                            <xf:macro name="nav_entry"
                                arg-navId="{$navSection}"
                                arg-nav="{$navEntry}"
                                arg-selected="{{ $navSection == $pageSection }}"
                                arg-shortcut="{$i}" />
                        </li>
                    </xf:foreach>
                    </ul>
                </div>
            </div>

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

<xf:if is="property('publicNavSticky') == 'primary'">
    <div class="p-navSticky p-navSticky--primary" data-xf-init="sticky-header">
        {$navHtml|raw}
    </div>
    {$subNavHtml|raw}
<xf:elseif is="property('publicNavSticky') == 'all'" />
    <div class="p-navSticky p-navSticky--all" data-xf-init="sticky-header">
        {$navHtml|raw}
        {$subNavHtml|raw}
    </div>
<xf:else />
    {$navHtml|raw}
    {$subNavHtml|raw}
</xf:if>

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

<xf:if is="$xf.visitor.Profile.custom_fields.menu_position">
        <div class="p-navSticky p-navSticky--primary">
    <xf:else />
        <div class="p-navSticky side_left_nav p-navSticky--primary">
    </xf:if>

        {$navHtml|raw}
    </div>
    {$subNavHtml|raw}

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

{$ldJsonHtml|raw}

واضف بعده هذا الكود:

<xf:js>
  if($(".p-navSticky").hasClass("side_left_nav")){
        $("body").addClass("menu_position_left");
    }
    
$(window).scroll(function() {
  if ($(this).scrollTop() > 48){ 
     $('.p-sectionLinks').addClass("side_menu_sticky");
  }
  else{
    $('.p-sectionLinks').removeClass("side_menu_sticky");
  }
});
    
$("[data-xf-init='quick-search']").parent().addClass("side_search_menu");
</xf:js>


</div>

ثم احفظ القالب وبكذا نكون قد انتهينا من التعديل اذهب لترى النتيجة

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


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

 

[Alrajabane]

احسنت
لاهنت اخوي @shqawe
وبشرنا عن صحتك ان شالله تمام ..

 

[shqawe]

احسنت
لاهنت اخوي @shqawe
وبشرنا عن صحتك ان شالله تمام ..

الله لا يهينك يالرجباني

ابشرك بخير جلعلك به والله يدوم علينا وعليك الصحة والعافية والستر

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

 

[أبو غَيْث]

الله يحفظك اخي @shqawe على هذه الدروس القيمة
جعلها الله في ميزان حسناتك ..

 

[shqawe]

الله يحفظك اخي @shqawe على هذه الدروس القيمة
جعلها الله في ميزان حسناتك ..

واياك اخوي محمد والمعهد والاعضاء يستاهلون نقدم لهم كل ما هو جديد وحصري

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

 

[MesterPerfect]

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

 

[shqawe]

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

حياك الله اخوي احمد وجزاك الله الخير عنا وعن المسلمين اجمعين

وبالنسبة لدورة الاضافات جاري تحضير الدرس الاول والله يوفق ويكتب اللي فيه الخير ان شاء الله

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

 

[Wolf Knight]

تعديل جميل ..
عاشت ايدك اخوية وماتشوف شر ان شاء الله
بانتظار جديدك دائما

 

[shqawe]

تعديل جميل ..
عاشت ايدك اخوية وماتشوف شر ان شاء الله
بانتظار جديدك دائما

حياك الله اخوي وجعل يمناك تمسح الكعبة وما يجيك الشر لاانت ولا من تعز

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