هيلبرنت | Helpernt - [XF 2.x] : كيفية تحويل التبويبات العلوية إلى قوائم منسدلة

بسم الله الرحمن الرحيم
أهلا بكم في شرح جديد وإن شاء الله يكون مفيد
شرحنا اليوم يتمثل في كيفية تحويل التبويبات العلوية إلى قوائم منسدلة
المعلومات
اسم الشرح: كيفية تحويل التبويبات العلوية إلى قوائم منسدلة
توافق الشرح: xf2.1
مقدم الشرح: أحمد بكر @MesterPerfect

الشرح

ندخل إلى لوحة التحكم -==> المظهر -==> القوالب
نختار الستايل الذي نريد تعديله

نبحث عن قالب

كود:

PAGE_CONTAINER

ثم نبحث فيه عن الكود التالي:

كود:

<xf:macro name="nav_menu_entry" arg-navId="!" arg-nav="!" arg-depth="0">

    <xf:macro name="nav_link"

        arg-navId="{$navId}"

        arg-nav="{$nav}"

        arg-class="menu-linkRow u-indentDepth{$depth} js-offCanvasCopy" />

    <xf:if is="$nav.children">

        <xf:foreach loop="$nav.children" key="$childNavId" value="$child">

            <xf:macro name="nav_menu_entry"

                arg-navId="{$childNavId}"

                arg-nav="{$child}"

                arg-depth="{{ $depth + 1 }}" />

        </xf:foreach>

        <xf:if is="$depth == 0">

            <hr class="menu-separator" />

        </xf:if>

    </xf:if>

</xf:macro>

ونستبدله بالكود التالي

كود:

<xf:macro name="nav_menu_entry" arg-navId="!" arg-nav="!" arg-depth="0">

    <xf:if is="$nav.children">

        <div class="nav-popout">

    </xf:if>

    <xf:macro name="nav_link"

        arg-navId="{$navId}"

        arg-nav="{$nav}"

        arg-class="menu-linkRow u-indentDepth{$depth} js-offCanvasCopy {{ $nav.children ? 'nav-has-children' : 'nav-has-children' }}" />

        <xf:if is="$nav.children">

        <div class="nav-popout--menu">

        <xf:foreach loop="$nav.children" key="$childNavId" value="$child">

            <xf:macro name="nav_menu_entry"

                arg-navId="{$childNavId}"

                arg-nav="{$child}"

                arg-depth="{{ $depth + 1 }}" />

        </xf:foreach>

        <xf:if is="$depth == 0">

            <hr class="menu-separator" />

        </xf:if>

        </div>

    </xf:if>

    <xf:if is="$nav.children">

        </div>

    </xf:if>

</xf:macro>

ثم نبحث عن قالب

كود:

extra.less

ونضيف فيه الكود التالي

كود:

.menu--structural .menu-content

{

    overflow: visible !important;

    .nav-popout

    {

        position: relative;



        &:hover .nav-popout--menu { display: block; }

        > .nav-has-children:after

        {

            .m-faBase();

            .m-faContent("\f0da");

            float: right;

        }

        .nav-popout--menu

        {

            display: none;

            position: absolute;

            right: -200px;

            top: 0;

            width: 200px;

            background-color: @xf-contentBg;

            border: 1px solid @xf-borderColor;

        }

    }

}

والنتيجة تكون هكذا

https://i.imgur.com/bZN5meO.gif

وختاما
أرجو أن يكون هذا الشرح قد نال أعجابكم
ونراكم في شروحات أخرى إن شاء الله
والسَلام عليكم ورحمة الله وبركاته