فئات CSS للتنقل في نظام bluetronix CMS – نظرة عامة وتطبيق
في هذه النظرة العامة، تجد جميع فئات CSS المهمة للتنقل في bluetronix CMS. تعلم كيف يمكنك من خلال تغييرات قليلة تخصيص التصميم، الاستجابة، وسلوك بنية قائمتك.
فئات CSS للتنقل الوصف
هنا تجد نظرة عامة مختصرة عن كل فئة CSS في مقتطف HTML الخاص بك وما المقصود من كل منها. بحيث يمكنك تعديل التصميم والسلوك بسرعة.
مهم: هو عنصر نائب من جدول التنقل (مثل 00_Menue) وسيتم استبداله عند العرض بفئات خاصة (مثل الرؤية، التمييز، الأيقونات لكل عنصر قائمة).
نظرة عامة على الفئات
| الفئة | تستخدم في | الغرض / المعنى | التفاعل النموذجي |
|---|---|---|---|
bx-DesktopHTML1 |
div أعلاه شريط التنقل | شريط علوي فوق القائمة الرئيسية (مثل التنبيهات، الترويج، لافتة التطبيق). | يمكن التحكم في الرؤية عبر متغيرات قاعدة البيانات (none). |
bx-DesktopHTML2 |
div أسفل شريط التنقل | شريط سفلي تحت القائمة الرئيسية (معلومات إضافية/شارات). | الرؤية عن طريق none. |
bx-nav-outer |
غلاف حول nav.bx-nav |
حاوية خارجية لتحديد الموضع (مثل، لزق، ظل، عرض). | إطار تخطيط لعرض الصفحة بالكامل. |
bx-nav |
nav التنقل الرئيسي | شريط تنقل أساسي (شبكة/مرونة، خلفية، ارتفاع). | أنماط شريط التنقل العالمية والاستجابة. |
bx-navbar-left |
العمود الأيسر لشريط التنقل | منطقة لرمز القائمة (برجر) والشعار. | تحتوي على .bx-nav-icon و .bx-nav-brand. |
bx-navbar-center |
منتصف شريط التنقل | حاوية لعناصر القائمة (UL/LI) بما في ذلك القوائم الفرعية. | يملأ الهاتف الجوال/الشريط الجانبي عبر JS (المصدر: #bxNavPoints). |
bx-navbar-right |
عمود شريط التنقل الأيمن | مجموعة الرموز (بحث، وضع النهار/الوضع المظلم، تسجيل الدخول، اللغة، عربة التسوق، الشريط الجانبي). | الأزرار تستدعي وظائف JS (مثل BlueSearchBar()). |
bx-nav-icon |
زر / أزرار الرموز | أسلوب موحد لجميع رموز شريط التنقل. | أهداف النقر لتبديل (شريط الهاتف المحمول، الشريط الجانبي، البحث، إلخ). |
bx-nav-brand |
صورة الشعار | عرض الشعار (الحجم، المسافات). | غالباً مع رابط إلى /index.html. |
bx-nav-item |
قائمة في القائمة الرئيسية | عنصر قائمة لنقطة قائمة. | يمكن دمجه مع .has-submenu. |
bx-nav-link |
a في القائمة | أسلوب رابط القائمة (خط، تمرير، حالات نشطة). | يتلقى الهدف/الاسم عبر عنصر نائبة قاعدة البيانات. |
has-submenu |
قائمة مع قائمة فرعية | يُميز النقطة القائمة مع قائمة فرعية؛ يُفعل أنماط القوائم المنسدلة. | يفتح/يُغلق .bx-navbar-dropdown ذات الصلة. |
submenu-toggle |
زر بجانب الرابط | عنصر للتحكم في فتح/إغلاق القائمة الفرعية (رمز الشيفرون). | عادة ما يكون مرئيًا فقط على الشاشات الأكبر (راجع فئات الخدمة). |
d-none، d-lg-inline |
فئات الخدمة على زر. | تحكم في الرؤية (مثل: إخفاء → عرض بشكل خطي بدءًا من lg). | سلوك استجابة تبديل. |
bx-menu |
ul في القائمة المنسدلة | قائمة عناصر القائمة الفرعية. | يتم ملؤها من قاعدة البيانات. |
bx-navbar-dropdown |
ul (حاوية القائمة المنسدلة) | لوحة القائمة المنسدلة (الموضع، الظل، الحركة). | يفتح عند التحويم/النقر أو .submenu-toggle. |
bx-dropdown-item |
li في القائمة المنسدلة | عنصر فردي في القائمة الفرعية. | يحتوي على .bx-dropdown-link. |
bx-dropdown-link |
a في القائمة المنسدلة | أسلوب الرابط داخل القائمة المنسدلة. | حالات التحويم/التركيز لتحسين سهولة الاستخدام. |
bx-mobile-bar |
القائمة المحمولة (جانبي خارج) | حاوية للتنقل المحمول والكتل الاختيارية في الأعلى/الأسفل. | يتم ملؤها عبر JS (المصدر: #bxNavPoints). |
bx-MobilHTML1، bx-MobilHTML2 |
كتل في شريط التنقل المحمول | مجالات HTML اختيارية فوق/تحت القائمة المحمولة (مثل الشعار). | الرؤية عبر |
bx-side-bar |
التنقل الجانبي (خارج الشاشة من اليسار) | حاوية للتنقل البديل/الإضافي. | يمكن أن تستوعب القائمة أو محتويات خاصة. |
bx-SideHTML1، bx-SideHTML2 |
كتل في الشريط الجانبي | مجالات HTML اختيارية فوق/تحت قائمة الجانب (مثل الشعار الكبير). | الرؤية عبر |
WKGBAnzDiv |
غلاف الشارة في أيقونة سلة التسوق | منطقة العداد المحيطة (التخطيط/الموقع). | تتضمن .WKGBAnzDivInner (العدد). |
WKGBAnzDivInner |
داخل الشارة | يظهر كمية سلة التسوق الحالية. | يتم ملؤها عبر JS من خلال #WKGBAnz. |
فئات العنصر النائبة من قاعدة البيانات
| عنصر نائب | الوصف | مثال |
|---|---|---|
|
يتم استبدال كل عنصر قائمة بواسطة أو أكثر من الفئات الخاصة (مثل only-desktop، highlight، icon-contact). | يتحكم في الرؤية/الأسلوب لكل زر في النسخة المكتبية أو الهاتف المحمول أو الشريط الجانبي. |
اجمع بين .bx-nav-item والفئات المدارة من قبل قاعدة البيانات عبر ، لإظهار أو إخفاء أزرار معينة في #bxNavPoints (سطح المكتب)، .bx-mobile-bar أو .bx-side-bar، دون تعديل كود HTML.
الأسئلة المتكررة
ما الذي يسأله العملاء غالباً
هنا ستتعرف على فئات CSS المسؤولة عن التصميم والسلوك والرؤية في HTML شريط التنقل الخاص بك. بذلك يمكنك إجراء تغييرات مستهدفة على الملاحة.
ماذا يعني العنصر النائب ؟
يتم استبدال هذا العنصر النائب تلقائيًا بفئات CSS الخاصة التي تحددها في جدول التنقل (مثل 00_Menue). وبالتالي تتحكم في الرؤية والتسليط والرموز لعناصر القائمة الفردية.
كيف يمكنني إضافة محتويات فوق أو تحت شريط التنقل؟
استخدم الفئات bx-DesktopHTML1 (أعلى) وbx-DesktopHTML2 (أسفل). يمكنك تفعيلها أو إلغاء تفعيلها من خلال نظام إدارة المحتوى عبر CMS ⯈ الموقع الإلكتروني ⯈ رأس الصفحة.
ما هي وظيفة الفئة bx-nav-outer؟
هي الحاوية الخارجية للملاحة. بذلك تتحكم في العرض والظل أو سلوك التثبيت لشريط التنقل.
ماذا تعني bx-nav؟
تحدد هذه الفئة التنقل الرئيسي نفسه – أي التصميم (مثل Flex/Grid)، لون الخلفية وارتفاع شريط التنقل.
كيف يتم تقسيم شريط التنقل إلى أعمدة؟
يتكون شريط التنقل من ثلاثة مناطق: bx-navbar-left (الشعار ورمز القائمة)، bx-navbar-center (عناصر القائمة)، bx-navbar-right (رموز مثل البحث، تسجيل الدخول، اللغة، عربة التسوق).
ما الذي تفعله الفئة bx-nav-icon؟
تضمن تصميماً موحداً لجميع أيقونات شريط التنقل. تتحكم هذه الأزرار، على سبيل المثال، في فتح الشريط المحمول والشريط الجانبي أو البحث.
كيف يمكنني تصميم روابط القائمة؟
باستخدام bx-nav-item تحدد عناصر القائمة، وباستخدام bx-nav-link تحدد قواعد الأسلوب للنص، التحويم والحالات النشطة للروابط.
كيف تعمل إدارة القوائم الفرعية؟
عنصر القائمة مع الفئة has-submenu يحتوي على قائمة منسدلة. باستخدام submenu-toggle (زر مع رمز سهم) يمكنك فتحها أو إغلاقها.
ماذا تعني الفئات المساعدة d-none وd-lg-inline؟
تتحكم هذه الفئات في رؤية العناصر الفردية بناءً على حجم الشاشة – مثالية للملاحة المتجاوبة.
كيف يتم بناء قائمة منسدلة؟
تتكون القائمة المنسدلة من bx-navbar-dropdown (الحاوية)، وفيها bx-menu (القائمة) مع bx-dropdown-item وbx-dropdown-link للمواضيع الفرعية الفردية.
كيف تعمل شريط الهاتف المحمول؟
شريط الهاتف المحمول يفتح على الأجهزة المحمولة على اليمين كقائمة جانبية. يتم ملؤها بـ JS مع المحتويات من #bxNavPoints. يمكنك إضافة كتل إضافية باستخدام bx-MobilHTML1 و bx-MobilHTML2.
ما هو الشريط الجانبي؟
الشريط الجانبي هو قائمة جانبية (عادة على اليسار) هنا يمكنك وضع محتويات خاصة أو عناصر تصفح، مكملة بـ bx-SideHTML1 و bx-SideHTML2.
كيف يتم عرض عداد عربة التسوق؟
الغلاف WKGBAnzDiv يحتوي على WKGBAnzDivInner، الذي يعرض عدد العناصر الحالي باستخدام JS (عبر #WKGBAnz) - غالبًا كشارة في أيقونة عربة التسوق.
كيف يمكنني عرض أزرار معينة فقط في مجالات محددة؟
قم بدمج .bx-nav-item مع القيم المناسبة. بهذه الطريقة يمكنك إظهار أو إخفاء الأزرار بشكل مستهدف في #bxNavPoints (سطح المكتب)، .bx-mobile-bar أو .bx-side-bar، دون تغيير شفرة HTML.