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

IQ Games Tech

New member
بسم الله الرحمن الرحيم
أهلا بكم في شرح جديد وإن شاء الله يكون مفيد
شرحنا اليوم يتمثل في كيفية تحويل التبويبات العلوية إلى قوائم منسدلة
المعلومات
اسم الشرح: كيفية تحويل التبويبات العلوية إلى قوائم منسدلة
توافق الشرح: 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;
}
}
}​
والنتيجة تكون هكذا



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

متابعة القراءة...
 
أعلى أسفل