أضف عناصر القائمة. عنصر واحد في كل سطر بهذا الترتيب: النص، الأيقونة، العنوان، العرض.
عناصر القائمة الفرعية
أضف عناصر القائمة الفرعية. عنصر واحد في كل سطر بهذا الترتيب: الأب، النص، الأيقونة، الرابط، الهدف، العنوان.
أيقونات 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)
هناك أربع مجموعات من الإعدادات
عناصر القائمة
أدخل العناصر التي تريد ظهورها في القائمة. عنصر واحد مفصول بفواصل في كل سطر بهذا الترتيب
النص، الأيقونة، العنوان، العرض
النص: ما يظهر في القائمة.
الأيقونة: الأيقونة المعروضة بجانب العنصر. إذا لم ترغب في استخدام أيقونة، استخدم none.
العنوان: النص الذي يظهر عند تمرير الماوس فوق العنصر.
العرض: اختر الأجهزة التي سيظهر فيها العنصر.
vdm يظهر على كل من سطح المكتب والجوال
vdo يظهر على أجهزة سطح المكتب فقط،
vmo يظهر على أجهزة الجوال فقط.
نظرًا لنقص المساحة، لا يُنصح بإضافة أكثر من 3-4 عناصر على الجوال.
عناصر القائمة الفرعية
أدخل قائمة بعناصر القائمة الفرعية التي تريد إضافتها إلى قائمتك. عنصر واحد مفصول بفواصل في كل سطر بهذا الترتيب
الأب، النص، الأيقونة، الرابط، الهدف، العنوان
الأب: اسم عنصر القائمة الأب الذي يجب أن تظهر تحته هذه العنصر من القائمة الفرعية. استخدم قيمة النص من القائمة أعلاه.
النص: النص الذي يظهر لهذا العنصر من القائمة الفرعية.
الأيقونة: الأيقونة لهذا العنصر من القائمة الفرعية، استخدم none إذا لم تكن هناك حاجة لأيقونة.
الرابط: المسار الذي يرتبط إليه هذا العنصر من القائمة. يمكنك استخدام المسارات النسبية أيضًا.
الهدف: اختر ما إذا كان هذا العنصر سيفتح في تبويب جديد أم في نفس التبويب. استخدم blank لفتح الرابط في تبويب جديد، أو استخدم self لفتحه في نفس التبويب.
العنوان: النص الذي يظهر عند تمرير الماوس فوق العنصر.
الفواصل: يمكنك أيضًا إضافة فواصل بين عناصر القائمة الفرعية. لإضافة فاصل استخدم parent, divider.
إليك مثال سريع لتغطية النقطتين 1 و 2 أعلاه:
لنفترض أنني أريد إضافة عنصر قائمة يسمى التصميم وإضافة بعض العناصر إلى قائمته الفرعية كالتالي
I dropped the external library that the component previously used and jQuery by extension. I went through the issues reported here, fixed the one I could reproduce and then deleted the replies to keep everything tidy. If your problem still persists after the update, please feel free to post it.
Beyond that, the update only adds one new feature. The submenus will now show on hover on desktop instead of requiring a click.
This should still work, but it’s only on the mobile view. So, if you just test it the browser fake mobile view without changing the user agent, it won’t work. Can you please confirm that you’re testing this on an actual phone. If so, can you let me know what device / browser you’re using?
I see this too. The reason is that all the dropdown (opening / closing) behaviour is now handled with CSS instead of JavaScript. I don’t think CSS has a way to handle auto closing the dropdown after you click it. So, we have to fallback to JS for that particular issue. I’ll do it after you confirm the scroll issue on mobile.
Can submenus be possible to header links? This theme component adds a new menu above the header, but some people don’t want a new navigation menu. They just want ability to hover over the current header links and have submenus.
Hi, I’m not sure why but the setting “Menu-item-active-background” doesn’t seem to be working right. I believe it should just change the background color of the menu when I hover, however the selected color is completely covering up the text. See here…
Also, the setting below it " Menu-item-active-color" doesn’t seem to do anything. I’ve tried different color codes and nothing changes when I go to test it.
@ElForoViajero Your submenus seem to work okay on both desktop and mobile. As soon as you click the item in the menu, the screen refreshes and the menu closes automatically. Did you have to do something special?
مُستضاف بواسطةنا؟ تتوفر مكونات الموضوع للاستخدام في خططنا القياسية، والأعمال، والمؤسسات.
thanks a lot!
