מחלקות CSS בניווט ב-CMS של בלוטרוניקס – סקירה ושימוש
בסקירה זו תמצא את כל כיתות ה-CSS החשובות של הניווט ב-CMS של bluetronix. למד איך אתה יכול עם כמה התאמות לעצב, להפוך את זה לנגיש ולעצב את התנהגות מבנה התפריט שלך.
כיתות CSS לניווט תיאור
כאן תמצא סקירה קומפקטית, איזו כיתת CSS מיועדת למה בקוד HTML שלך. כך תוכל להתאים במהירות את העיצוב ואת ההתנהגות.
חשוב: __DB_Nav_CSSclass__ הוא תו מוחלף מטבלת הניווט (למשל 00_תפריט) ומוחלף כאשר הרינדור מתבצע עם מחלקות מותאמות (למשל עבור נראות, הדגשה, אייקונים לכל פריט בתפריט).
סקירת כיתות
| כיתה | שימוש ב | מטרה / משמעות | אינטראקציה טיפוסית |
|---|---|---|---|
bx-DesktopHTML1 |
div מעל ה-Navbar | שורת העליונה מעל התפריט הראשי (לדוגמה, הודעות, פרומו, באנר של אפליקציה). | נראות נשלטת דרך תווי DB (__DB_GB_DesktopHTML1_Display__). |
bx-DesktopHTML2 |
div מתחת ל-Navbar | שורת התחתונה מתחת לתפריט הראשי (מידע נוסף/תגים). | נראות דרך __DB_GB_DesktopHTML2_Display__. |
bx-nav-outer |
עטיפת nav.bx-nav |
מיכל חיצוני למיקום (לדוגמה, דבק, צל, רוחב). | מסגרת לפריסה ברוחב מלא של העמוד. |
bx-nav |
nav ניווט ראשי | Navbar בסיסית (Grid/Flex, רקע, גובה). | סגנונות Navbar גלובליים ותמיכה ברספונסיביות. |
bx-navbar-left |
עמודה שמאלית של Navbar | אזור עבור אייקון התפריט (בורגר) ולוגו. | כולל .bx-nav-icon ו-.bx-nav-brand. |
bx-navbar-center |
מרכז Navbar | מיכל עבור פרטי התפריט (UL/LI) כולל תתי תפריטים. | ממלא את ה-Mobile/Sidebar דרך JS (מקור: #bxNavPoints). |
bx-navbar-right |
עמודת הניווט הימנית | קבוצת אייקונים (חיפוש, בהיר/כהה, כניסה, שפה, עגלת קניות, צד-בר). | כפתורים מפעילים פונקציות JS (למשל, BlueSearchBar()). |
bx-nav-icon |
כפתור / כפתורי אייקונים | סגנון אחיד לכל אייקוני הניווט. | יעדי לחיצה עבור מתגים (מובייל-בר, צד-בר, חיפוש, וכו'). |
bx-nav-brand |
תמונה לוגו | הצגת לוגו (גודל, רווחים). | לעיתים עם קישור ל /index.html. |
bx-nav-item |
li בתפריט הראשי | אלמנט רשימה של נקודת תפריט. | יכול להתמזג עם .has-submenu. |
bx-nav-link |
a בתפריט | סגנון הקישור בתפריט (גופן, ריחוף, מצבים פעילים). | מקבל יעד/שם דרך מחזיקי DB. |
has-submenu |
li עם דרופדאון | מסמן נקודת תפריט עם תפריט משנה; מפעיל סגנונות דרופדאון. | פותח/סוגר את .bx-navbar-dropdown המתאים. |
submenu-toggle |
כפתור ליד הקישור | יסוד להפעלת/הסתרת התפריט המשני (אייקון שמאלה). | נראה בדרך כלל רק במסכים גדולים יותר (ראה מחלקות Utility). |
d-none, d-lg-inline |
מחלקות Utility בכפתור | בקרת נראות (למשל, להסתיר → להציג אינליין מlg). | התנהגות תגובה של ה-Toggle. |
bx-menu |
ul בתפריט הנפתח | רשימת פריטי התפריט המשני. | מוזן מתוך ניווט מהDB. |
bx-navbar-dropdown |
ul (מיכל התפריט הנפתח) | פאנל התפריט הנפתח (מיקום, צל, אנימציה). | נפתח בהצמדה/קליק או .submenu-toggle. |
bx-dropdown-item |
li בתפריט הנפתח | פריט בודד בתפריט המשני. | מכיל .bx-dropdown-link. |
bx-dropdown-link |
a בתפריט הנפתח | סגנון קישור בתוך התפריט הנפתח. | מצבים של Hover/Fotuc לשיפור שמישות. |
bx-mobile-bar |
תפריט נייד (Off-Canvas מימין) | מיכל לניווט נייד וחסימות אופציונליות למעלה/למטה. | יתמלא באמצעות JS (מקור: #bxNavPoints). |
bx-MobilHTML1, bx-MobilHTML2 |
חסימות בתפריט הנייד | תחומי HTML אופציונליים מעל/מתחת לתפריט הנייד (למשל, לוגו). | נראות דרך __DB_GB_MobilHTML*_Display__. |
bx-side-bar |
ניווט צדדי (Off-Canvas משמאל) | מיכל לניווט חלופי/נוסף. | יכול להכיל את התפריט או תוכן אישי. |
bx-SideHTML1, bx-SideHTML2 |
חסימות בסרגל הצד | תחומי HTML אופציונליים מעל/מתחת לתפריט הצדדי (למשל, לוגו גדול). | נראות דרך __DB_GB_SideHTML*_Display__. |
WKGBAnzDiv |
עטיפת תג בסמל עגלת הקניות | אזור סופר קונטנר (פריסת/מיקום). | כולל .WKGBAnzDivInner (כמות). |
WKGBAnzDivInner |
תו פנימי | מציג את כמות העגלת קניות הנוכחית. | יתמלא באמצעות JS דרך #WKGBAnz. |
מעמדות פלייסהולדר מה-DB
| פלייסהולדר | תיאור | דוגמא |
|---|---|---|
__DB_Nav_CSSclass__ |
כל פריט בתפריט מוחלף על ידי אחת או יותר מהכיתות האישיות (למשל, only-desktop, highlight, icon-contact). | שולט על הנראות/סגנון עבור כל כפתור בדסקטופ, במובייל או בסרגל הצד. |
שילב את .bx-nav-item עם מחלקות שמנוהלות על ידי DB דרך __DB_Nav_CSSclass__, כדי להציג או להסתיר כפתורים בודדים באופן מדויק ב#bxNavPoints (מחשב), .bx-mobile-bar או .bx-side-bar מבלי לשנות את קוד ה-HTML.
שאלות נפוצות
מה לקוחות שואלים אותנו לעיתים קרובות
מה המטרה של עמוד "תיאור מחלקות CSS של ניווט"?
כאן תדע אילו כיתות CSS אחראיות על הפריסה, ההתנהגות והנראות של הניווט שלך ב-HTML.
מה המשמעות של תו __DB_Nav_CSSclass__?
מקטע זה מוחלף אוטומטית על ידי כיתות CSS אישיות שאתה מגדיר בטבלת הניווט (למשל, 00_Menue). כך אתה שולט בנראות, בולטות ואייקונים עבור פריטי תפריט ספציפיים.
איך אני יכול להוסיף תוכן מעל או מתחת ל-navbar?
השתמש בכיתות bx-DesktopHTML1 (מעלה) ו-bx-DesktopHTML2 (מטה). תוכל להפעיל או לכבות אותן ב-CMS דרך CMS ⯈ אתר ⯈ כותרת עליונה.
מהי התפקיד של הכיתה bx-nav-outer?
זוהי הקונטיינר החיצוני של הניווט. כך אתה שולט על רוחב, צל או התנהגות דביקה של ה-navbar.
מה משמעות bx-nav?
כיתה זו מגדירה את הניווט הראשי עצם – כלומר, את הפריסה (למשל, Flex/Grid), צבע הרקע וגובה ה-navbar.
איך ה-navbar מחולקת לעמודות?
ה-navbar מורכבת משלושה אזורים: bx-navbar-left (לוגו & אייקון תפריט), bx-navbar-center (פריטי תפריט), bx-navbar-right (אייקונים כמו חיפוש, התחברות, שפה, עגלת קניות).
מה עושה הכיתה bx-nav-icon?
היא דואגת לסגנון אחיד של כל אייקוני ה-navbar. כפתורים אלה שורצים, למשל, על פתיחת Mobile-Bar, Side-Bar או החיפוש.
איך אני יכול לעצב קישורי תפריט?
עם 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 עבור הפריטים התחתונים.
איך עובד ה-Mobile-Bar?
הbx-mobile-bar נפתחת במכשירים ניידים בצד ימין בתור תפריט Off-Canvas. היא מתמלאת באמצעות JS עם התוכן מתוך #bxNavPoints. ניתן להוסיף בלוקים נוספים עם bx-MobilHTML1 וbx-MobilHTML2.
מה זה ה-Side-Bar?
הbx-side-bar הוא תפריט צדדי Off-Canvas (בעיקר בצד השמאלי). כאן ניתן למקם תוכן אישי או אלמנטי ניווט, יחד עם bx-SideHTML1 וbx-SideHTML2.
איך מוצג מונה העגלת קניות?
ה-Wrapper WKGBAnzDiv מכיל את WKGBAnzDivInner, שמציג באמצעות JS (דרך #WKGBAnz) את מספר הפריטים הנוכחי – בדרך כלל בתור Badge באייקון של העגלת קניות.
איך אפשר להציג כפתורים מסוימים רק באזורים מסוימים?
שילב את .bx-nav-item עם __DB_Nav_CSSclass__. כך תוכל לכוון כפתורים ב#bxNavPoints (מחשב), .bx-mobile-bar או .bx-side-bar להופיע או להיעלם, מבלי לשנות את קוד ה-HTML.