القوائم المنسدلة للرأس

:discourse2: الملخص سيسمح لك Header Submenus (القوائم الفرعية للرأس) ببناء قائمة رأسية تحتوي على قوائم فرعية باستخدام النص العادي!
:eyeglasses: معاينة معاينة على منشئ موضوعات Discourse
:hammer_and_wrench: رابط المستودع https://github.com/discourse/discourse-header-submenus
:open_book: هل أنت جديد في موضوعات Discourse؟ دليل المبتدئين لاستخدام موضوعات Discourse

تثبيت مكون الموضوع هذا

الميزات

سطح المكتب

الجوال

الإعدادات

الاسم الوصف
عناصر القائمة أضف عناصر القائمة. عنصر واحد في كل سطر بهذا الترتيب: النص، الأيقونة، العنوان، العرض.
عناصر القائمة الفرعية أضف عناصر القائمة الفرعية. عنصر واحد في كل سطر بهذا الترتيب: الأصل، النص، الأيقونة، الرابط، الهدف، العنوان.
أيقونات SVG تضمين فئات أيقونات FontAwesome لكل أيقونة مستخدمة في القوائم أعلاه.
الوضع الثابت إجبار القائمة على أن تكون مرئية في أعلى الشاشة بغض النظر عن موضع التمرير - سطح المكتب فقط
إظهار السهم إظهار أيقونات السهم بجوار عناصر القائمة
عكس الموضع عرض عناصر القائمة على الجانب المقابل من الشاشة
خلفية القائمة لون خلفية القائمة. (hex، rgb، rgba أو اسم لون CSS)
لون عنصر القائمة لون عناصر القائمة. (hex، rgb، rgba أو اسم لون CSS)
خلفية عنصر القائمة النشط لون خلفية عناصر القائمة عندما تكون نشطة. (hex، rgb، rgba أو اسم لون CSS)
لون عنصر القائمة النشط لون عناصر القائمة عندما تكون نشطة. (hex، rgb، rgba أو اسم لون CSS)
خلفية القائمة الفرعية لون خلفية القوائم الفرعية. (hex، rgb، rgba أو اسم لون CSS)
لون عنصر القائمة الفرعية لون عناصر القائمة الفرعية. (hex، rgb، rgba أو اسم لون CSS)
خلفية عنصر القائمة الفرعية عند التحويم لون خلفية عناصر القوائم الفرعية عند التحويم عليها. (hex، rgb، rgba أو اسم لون CSS)
لون عنصر القائمة الفرعية عند التحويم لون عناصر القوائم الفرعية عند التحويم عليها. (hex، rgb، rgba أو اسم لون CSS)
لون الفاصل لون خطوط الفاصل في القوائم الفرعية. (hex، rgb، rgba أو اسم لون CSS)

هناك أربع مجموعات من الإعدادات

  1. عناصر القائمة

    أدخل العناصر التي تريد أن تظهر في القائمة. عنصر واحد مفصول بفاصلة في كل سطر بهذا الترتيب

    النص، الأيقونة، العنوان، العرض

    النص: ما يظهر في القائمة.
    الأيقونة: الأيقونة المعروضة بجوار العنصر. إذا لم ترد استخدام أيقونة، استخدم none.
    العنوان: النص الذي يظهر عند التحويم على العنصر.
    العرض: اختر الأجهزة التي يظهر عليها العنصر.

    ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ vdm يظهر على كل من سطح المكتب والجوال
    ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ vdo يظهر على أجهزة سطح المكتب فقط،
    ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ vmo يظهر على أجهزة الجوال فقط.

    ونظرًا لقلة المساحة، لا يُنصح بإضافة أكثر من 3-4 عناصر على الجوال.

  2. عناصر القائمة الفرعية

    أدخل قائمة بعناصر القائمة الفرعية التي تريد إضافتها إلى قائمتك. عنصر واحد مفصول بفاصلة في كل سطر بهذا الترتيب

    الأصل، النص، الأيقونة، الرابط، الهدف، العنوان

    الأصل: اسم عنصر القائمة الأصلي الذي يجب أن يظهر تحته عنصر القائمة الفرعية هذا. استخدم قيمة النص من القائمة أعلاه.
    النص: النص الذي يظهر لهذا العنصر من عناصر القائمة الفرعية.
    الأيقونة: الأيقونة لهذا العنصر من عناصر القائمة الفرعية، استخدم none إذا لم تكن هناك حاجة لأيقونة.
    الرابط: المسار الذي يشير إليه هذا العنصر من عناصر القائمة. يمكنك أيضًا استخدام المسارات النسبية.
    الهدف: اختر ما إذا كان هذا العنصر سيفتح في علامة تبويب جديدة أو في نفس علامة التبويب. استخدم blank لفتح الرابط في علامة تبويب جديدة، أو استخدم self لفتحه في نفس علامة التبويب.
    العنوان: النص الذي يظهر عند التحويم على العنصر.
    الفواصل: يمكنك أيضًا إضافة فواصل بين عناصر القائمة الفرعية. لإضافة فاصل، استخدم الأصل، divider.

إليك مثال سريع لتغطية النقاط 1 و 2 أعلاه:

لنفترض أنني أرغب في إضافة عنصر قائمة يُسمى Design (تصميم) وإضافة بعض العناصر إلى قائمته الفرعية كما يلي

سأدخل هذا أولاً كـ menu_item (عنصر قائمة)

Design, magic, Get inspired!, vdm

ثم أدخل هذه كعناصر sub_menu (قائمة فرعية)

Design, Galleries, th, #, blank, Cool galleries for you to look at.
Design, Design process, lightbulb-o, #, blank, Learn the basics.
Design, Blog design, columns, #, blank, What makes for a great blog?
Design, divider
Design, Freebies, gift, #, blank, Everyone likes freebies!
Design, Photoshop tutorials, book, #, blank, Photoshop for beginners.
Design, Design trends, bar-chart, #, blank, Stay on top of the current trends!

هذا كل شيء!

يأتي المكون مع قائمة افتراضية (قائمة نموذجية) بشكل افتراضي، لذا اطّلع عليها واسأل إذا كان لديك أسئلة.

  1. خيارات التخطيط.

    هذه واضحة إلى حد كبير

  2. خيارات الألوان

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


:discourse2: مستضاف من قبلنا؟ مكونات الموضوعات متاحة للاستخدام على خططنا القياسية، والأعمال، والمؤسسية.

90 إعجابًا

لقد قمت للتو بدفع تحديث لهذا المكون.

لا توجد تغييرات بصرية، وإذا كنت قد أضفت تنسيقات CSS مخصصة إلى سمةك، فستعمل كما هو متوقع لأن المكون لا يزال يحتوي على نفس الفئات.

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

إلى جانب ذلك، يضيف التحديث ميزة جديدة واحدة فقط. ستظهر القوائم الفرعية الآن عند التمرير بالماوس على سطح المكتب بدلاً من الحاجة إلى النقر.

14 إعجابًا

تحديث رائع يا جو، لقد واجهت مشكلتين فقط على الجوال.

  1. لم يعد بإمكانك التمرير من جانب إلى آخر إذا كان لديك العديد من عناصر القائمة.
  2. عند النقر على عنصر في القائمة المنسدلة، تبقى القائمة مفتوحة.
إعجابَين (2)

ينبغي أن يعمل هذا لا يزال، لكنه يعمل فقط في عرض الهاتف المحمول. لذا، إذا قمت باختباره فقط في وضع الهاتف المحمول المزيف في المتصفح دون تغيير وكيل المستخدم، فلن يعمل. هل يمكنك تأكيد أنك تجري الاختبار على هاتف فعلي؟ إذا كان الأمر كذلك، هل يمكنك إخباري بالجهاز/المتصفح الذي تستخدمه؟

أرى هذه المشكلة أيضًا. السبب هو أن سلوك القائمة المنسدلة (الفتح/الإغلاق) يتم إدارته الآن باستخدام CSS بدلاً من JavaScript. لا أعتقد أن CSS لديه طريقة للتعامل مع الإغلاق التلقائي للقائمة المنسدلة بعد النقر عليها. لذا، يجب أن نعود إلى JavaScript لهذه المشكلة بالتحديد. سأقوم بذلك بعد تأكيدك لمشكلة التمرير على الهاتف المحمول.

إعجابَين (2)

هذا يحدث على جهاز iPhone 8 مع تطبيق Discourse، وكذلك في متصفح Safari. شكرًا لك جو!

إعجابَين (2)

هل هناك أي تحديث حول هذا يا جو؟ شكرًا لك!

في موقع مجتمع Sponge، لديهم تكامل جميل لهذا في الرأس الرئيسي بدلاً من طبقة إضافية في الأعلى:

كيف يمكن تحقيق ذلك؟ نود أن يكون لدينا ذلك في موقعنا.

4 إعجابات

هل يمكن إضافة قوائم فرعية إلى روابط الرأس؟ يضيف مكون السمة هذا قائمة جديدة فوق الرأس، لكن بعض المستخدمين لا يريدون قائمة تنقل جديدة. هم فقط يريدون القدرة على تمرير الماوس فوق روابط الرأس الحالية والحصول على قوائم فرعية.

5 إعجابات

هذا جميل. أتساءل كيف فعلوا ذلك.

إعجاب واحد (1)

هل يواجه شخص ما هذه المشكلة؟ أيقونات الشبكات الاجتماعية لا تعمل (كانت تعمل سابقًا)، وحتى عند استخدام أيقونات Font Awesome مختلفة لا تظهر.

إعجاب واحد (1)

هل جربت بادئة fab، نظرًا لأن هذه علامات تجارية، فيجب أن تحمل هذه البادئة.

إعجاب واحد (1)

شكرًا على ردك @davidkingham. لقد أضفت البادئة fab، لكن الشعار لا يظهر.

إعجاب واحد (1)

لا تنسَ تعديل الأيقونات في قائمة الروابط أيضًا، يجب أن تتضمن بادئة fab- في هذه الأيقونات

4 إعجابات

بمبارك! هذا هو :slight_smile: شكراً جزيلاً!

إعجابَين (2)

مرحبًا، لست متأكدًا من السبب، لكن يبدو أن الإعداد “Menu-item-active-background” لا يعمل بشكل صحيح. أعتقد أنه يجب أن يغير فقط لون خلفية القائمة عند التمرير، ومع ذلك فإن اللون المحدد يغطي النص بالكامل. انظر هنا…

أيضًا، يبدو أن الإعداد الموجود تحته “Menu-item-active-color” لا يفعل شيئًا. جربت أكواد ألوان مختلفة ولا يحدث أي تغيير عند تجربته.

هل لديك أي أفكار؟

إعجابَين (2)

أود وضع القوائم الفرعية أسفل رأس الموقع بدلاً من الأعلى. هل يمكنك إخباري بكيفية القيام بذلك؟ سيكون مقتطف كود مفيدًا :pray:

إعجاب واحد (1)

@Johani @davidkingham هل وجدت حلًا لهذه المشكلة: “عند النقر على عنصر في القائمة المنسدلة، تظل القائمة مفتوحة”؟

شكرًا لك

إعجاب واحد (1)

لا، لا يزال يتصرف بهذه الطريقة. أحد الحلول المحتملة هو عرض الأيقونات فقط على الأجهزة المحمولة دون نصوص، ما رأيكم؟

إعجاب واحد (1)

كيف يحل إظهار الأيقونات فقط على الجوال المشكلة؟ “عند النقر على عنصر في القائمة المنسدلة، تظل القائمة مفتوحة”

إعجاب واحد (1)

@ElForoViajero يبدو أن القوائم الفرعية لديك تعمل بشكل جيد على كل من سطح المكتب والجوال. بمجرد النقر على العنصر في القائمة، يتم تحديث الشاشة ويغلق القوائم تلقائيًا. هل كان عليك القيام بشيء خاص؟

إعجاب واحد (1)