دليل المواقع دمز




ركن شروحات الزين فورو XENFORO هذا القسم خاص بكل شروحات إستخدام XENFORO وتعديلات القوالب

كيفية تحويل التبويبات العلوية إلى قوائم منسدلة

بسم الله الرحمن الرحيم أهلا بكم في شرح جديد وإن شاء الله يكون مفيد شرحنا اليوم يتمثل في كيفية تحويل التبويبات...

احصائياتى

الردود
5

المشاهدات
492
MesterPerfect
.:: كبار شخصيات المنتدى ::.
المنتدى مراقب من خلاله
  • MesterPerfect is a name known to allMesterPerfect is a name known to allMesterPerfect is a name known to allMesterPerfect is a name known to allMesterPerfect is a name known to allMesterPerfect is a name known to all

  • MesterPerfect غير متواجد حالياً

المشاركات
2,291

+التقييم
131

تاريخ التسجيل
Jan 2018

الاقامة
sohag, Egypt

نظام التشغيل
windows 8.1

رقم العضوية
1529
03-29-2020, 06:13 PM
المشاركة 1
03-29-2020, 06:13 PM
المشاركة 1
افتراضي كيفية تحويل التبويبات العلوية إلى قوائم منسدلة
بسم الله الرحمن الرحيم
أهلا بكم في شرح جديد وإن شاء الله يكون مفيد
شرحنا اليوم يتمثل في كيفية تحويل التبويبات العلوية إلى قوائم منسدلة
المعلومات
اسم الشرح: كيفية تحويل التبويبات العلوية إلى قوائم منسدلة
توافق الشرح: 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;
        }
    }
}
والنتيجة تكون هكذا



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

قديم 03-29-2020, 11:07 PM
المشاركة 2
S!L3NT H!LL
.:: كبار شخصيات المنتدى ::.
المنتدى مراقب من خلاله
  • S!L3NT H!LL غير متواجد حالياً
افتراضي رد: كيفية تحويل التبويبات العلوية إلى قوائم منسدلة
ماشاء الله
تعطي جمالية للاستايل
شكرا صديقي احمد.

قديم 03-30-2020, 09:53 PM
المشاركة 3
abo-karim
.:: Administrator ::.
  • abo-karim غير متواجد حالياً
افتراضي رد: كيفية تحويل التبويبات العلوية إلى قوائم منسدلة
حطوة تطويريه عظيمه جدا

مشاء الله

فى تقدم دائما اخى احمد

يعيطك الف عافية

قديم 04-02-2020, 01:23 PM
المشاركة 4
maaidni
.:: معرب ومطور ومشرف ::.
قسم منتديات XenForo
  • maaidni غير متواجد حالياً
افتراضي رد: كيفية تحويل التبويبات العلوية إلى قوائم منسدلة
تعديل رائع وأعجبني كثيرا

قديم 05-22-2020, 02:54 AM
المشاركة 5
هيلبرنت
.:: رفيق درب ::.
  • هيلبرنت غير متواجد حالياً
افتراضي رد: كيفية تحويل التبويبات العلوية إلى قوائم منسدلة
يعطيك الف عافية

مش قولتلك الله واكبر بقيت محترف زين فوروووووووو

قديم 05-22-2020, 03:07 AM
المشاركة 6
MesterPerfect
.:: كبار شخصيات المنتدى ::.
المنتدى مراقب من خلاله
  • MesterPerfect غير متواجد حالياً
افتراضي رد: كيفية تحويل التبويبات العلوية إلى قوائم منسدلة
يعطيك الف عافية

مش قولتلك الله واكبر بقيت محترف زين فوروووووووو
الله يعافيك ويبارك فيك

شغال تجارب كل ما سمحت لي الفرصة

لسة بعمل على إدخال الheadings إلى المواضيع كما في المدونات

وأيضا إخفاء الروابط دون إضافات

وبحاول وإن شاء الله خير

اضافة رد

العلامات المرجعية

كيفية تحويل التبويبات العلوية إلى قوائم منسدلة


أدوات الموضوع

الانتقال السريع

المواضيع المتشابهه للموضوع: كيفية تحويل التبويبات العلوية إلى قوائم منسدلة
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
[Facebook] كيف تحذف اصدقاء من قوائم الفيس بوك ahmed200 ركن مواقع التواصل الإجتماعي 0 12-30-2016 01:26 AM
درس كيفية تحويل النهار إلى ليلة ممطرة روعة هيلبرنت دروس التصميم والجرافيكس 0 12-26-2015 01:07 AM
تعديل كود css قائمة منسدلة أبو_شهاب ركن مشاكل تصاميم الاستايلات 18 12-08-2015 08:41 PM
شرح تويتر 3 : عمل قوائم lists في Twitter وتنظيم قوائم المتابعين هيلبرنت ركن مواقع التواصل الإجتماعي 0 10-02-2015 12:47 AM
طريقة عمل قوائم في تويتر و عمل قوائم lists في تويتر هيلبرنت ركن مواقع التواصل الإجتماعي 0 10-02-2015 12:46 AM




الساعة الآن 10:20 AM
Powered by vBulletin® Copyright ©2000 - 2020, Jelsoft Enterprises Ltd. TranZ By Almuhajir
RSS 2.0XML Site MapTAGS SiteInfo SiteRSS FeedMap SectionsvB MapsMap TagSitemap ForumMaps Forum