CSS κλάσεις πλοήγησης στο bluetronix CMS – επισκόπηση & εφαρμογή
Σε αυτήν την επισκόπηση βρίσκεις όλες τις σημαντικές κλάσεις CSS της πλοήγησης στο bluetronix CMS. Μάθε πώς μπορείς με λίγες προσαρμογές να διαμορφώσεις το σχέδιο, την ανταγωνιστικότητα και τη συμπεριφορά της δομής του μενού σου.
Κλάσεις CSS πλοήγησης Περιγραφή
Εδώ βρίσκεις μια συμπαγή επισκόπηση, ποια κλάση CSS προορίζεται για ποιο σκοπό στο HTML snippet σου. Έτσι μπορείς γρήγορα να προσαρμόσεις τη διάταξη και τη συμπεριφορά.
Σημαντικό: είναι μια θέση κράτησης από τον πίνακα πλοήγησης (π.χ. 00_Menue) και αντικαθίσταται κατά την αναγνώριση με δικές σου κλάσεις (π.χ. για ορατότητα, επισήμανση, εικονίδια ανά στοιχείο μενού).
Επισκόπηση κλάσεων
| Κλάση | Χρησιμοποιείται σε | Σκοπός / Σημασία | Τυπική Αλληλεπίδραση |
|---|---|---|---|
bx-DesktopHTML1 |
div πάνω από τη Navbar | Κορυφαία γραμμή πάνω από το κύριο μενού (π.χ. Σημειώσεις, Προώθηση, Μπάναρ εφαρμογής). | Ορατότητα ελέγχεται μέσω DB-πα placeholders (none). |
bx-DesktopHTML2 |
div κάτω από τη Navbar | Κάτω γραμμή κάτω από το κύριο μενού (επιπλέον πληροφορίες/ετικέτες). | Ορατότητα μέσω none. |
bx-nav-outer |
Wrapper γύρω από nav.bx-nav |
Εξωτερικός κοντέινερ για τοποθέτηση (π.χ. Sticky, Σκιά, Πλάτος). | Πλαίσιο διάταξης για πλήρη πλάτος σελίδας. |
bx-nav |
nav Κύρια πλοήγηση | Βασική Navbar (Grid/Flex, Φόντο, Ύψος). | Παγκόσμια στυλ Navbar και Αντίκρισμα. |
bx-navbar-left |
Αριστερή στήλη Navbar | Περιοχή για εικονίδιο μενού (Burger) και λογότυπο. | Περιλαμβάνει .bx-nav-icon και .bx-nav-brand. |
bx-navbar-center |
Κέντρο Navbar | Κοντέινερ για τις καταχωρήσεις μενού (UL/LI) συμπεριλαμβανομένων υπομενού. | Γεμίζει Mobile/Sidebar μέσω JS (Πηγή: #bxNavPoints). |
bx-navbar-right |
Στήλη Δεξιάς Πλοήγησης | Ομάδα Εικονιδίων (Αναζήτηση, Φωτεινό/Σκοτεινό, Σύνδεση, Γλώσσα, Καλάθι, Πλευρική Μπάρα). | Τα κουμπιά ενεργοποιούν JS συναρτήσεις (π.χ. BlueSearchBar()). |
bx-nav-icon |
κουμπί / Εικονίδια Κουμπιών | Ενοποιημένο στυλ για όλα τα εικονίδια της μπάρας πλοήγησης. | Στόχοι κλικ για εναλλαγές (Mobile-Bar, Side-Bar, Αναζήτηση, κ.λπ.). |
bx-nav-brand |
img Λογότυπο | Προβολή λογότυπου (μέγεθος, αποστάσεις). | Συχνά με σύνδεσμο στο /index.html. |
bx-nav-item |
li στο κύριο μενού | Στοιχείο λίστας ενός μενού. | Μπορεί να συνδυαστεί με .has-submenu. |
bx-nav-link |
a στο μενού | Στυλ του συνδέσμου του μενού (Γραμματοσειρά, Hover, ενεργές καταστάσεις). | Λαμβάνει στόχο/όνομα μέσω DB placeholder. |
has-submenu |
li με Dropdown | Επισημαίνει το μενού με υπομενού; ενεργοποιεί τα στυλ Dropdown. | Ανοίγει/Κλείνει το αντίστοιχο .bx-navbar-dropdown. |
submenu-toggle |
κουμπί δίπλα από τον σύνδεσμο | Στοιχείο ελέγχου για την άντληση/αποτροπή του υπομενού (εικονίδιο Chevron). | Συνήθως μόνο σε μεγαλύτερες οθόνες ορατό (βλ. Utility-classes). |
d-none, d-lg-inline |
Utility-classes στο κουμπί | Έλεγχος ορατότητας (π.χ. απόκρυψη → από lg inline εμφάνιση). | Αντιδραστική συμπεριφορά του Toggles. |
bx-menu |
ul στο Dropdown | Λίστα με στοιχεία του υπομενού. | Γεμίζεται μέσω πλοήγησης από τη βάση δεδομένων. |
bx-navbar-dropdown |
ul (Container Dropdown) | Πάνελ Dropdown (τοποθέτηση, σκιά, κινούμενα σχέδια). | Ανοίγει με Hover/Click ή .submenu-toggle. |
bx-dropdown-item |
li στο Dropdown | Μοναδικό στοιχείο υπομενού. | Περιέχει .bx-dropdown-link. |
bx-dropdown-link |
a στο Dropdown | Στυλ συνδέσμου εντός του Dropdown. | Καταστάσεις Hover/Focus για καλύτερη χρηστικότητα. |
bx-mobile-bar |
Κινητό μενού (Off-Canvas δεξιά) | Δοχείο για κινητή πλοήγηση και προαιρετικά μπλοκ πάνω/κάτω. | Γεμίζει μέσω JS (Πηγή: #bxNavPoints). |
bx-MobilHTML1, bx-MobilHTML2 |
Μπλοκ στην Κινητή Γραμμή | Προαιρετικοί HTML τομείς πάνω/κάτω από το κινητό μενού (π.χ. Λογότυπο). | Ορατότητα μέσω |
bx-side-bar |
Πλευρική πλοήγηση (Off-Canvas αριστερά) | Δοχείο για εναλλακτική/επιπλέον πλοήγηση. | Μπορεί να φιλοξενήσει το μενού ή δικά σας περιεχόμενα. |
bx-SideHTML1, bx-SideHTML2 |
Μπλοκ στην Πλευρική Γραμμή | Προαιρετικοί HTML τομείς πάνω/κάτω από το πλευρικό μενού (π.χ. μεγάλο λογότυπο). | Ορατότητα μέσω |
WKGBAnzDiv |
Wrapper σήματος στο εικονίδιο του καλαθιού αγορών | Περιοχή μετρητή (Διάταξη/Θέση). | Περιλαμβάνει .WKGBAnzDivInner (Ποσότητα). |
WKGBAnzDivInner |
Εσωτερικό σήματος | Εμφανίζει την τρέχουσα ποσότητα του καλαθιού. | Γεμίζεται μέσω JS μέσω #WKGBAnz. |
Placeholder κλάσεις από τη DB
| Placeholder | Περιγραφή | Παράδειγμα |
|---|---|---|
|
Κάθε μενού αντικαθίσταται από μία ή περισσότερες δικές κλάσεις (π.χ. 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 μέσω CMS ⯈ Ιστοσελίδα ⯈ Επικεφαλίδα.
Ποιο είναι το καθήκον της κλάσης bx-nav-outer;
Είναι ο εξωτερικός κεντρικός χώρος της πλοήγησης. Με αυτό ελέγχεις το πλάτος, τη σκιά ή τη συμπεριφορά sticky της γραμμής πλοήγησης.
Τι σημαίνει bx-nav;
Αυτή η κλάση ορίζει την κύρια πλοήγηση – δηλαδή τη διάταξη (π.χ. Flex/Grid), το χρώμα φόντου και την ύψος της γραμμής πλοήγησης.
Πώς είναι χωρισμένη η γραμμή πλοήγησης σε στήλες;
Η γραμμή πλοήγησης αποτελείται από τρία τμήματα: bx-navbar-left (Λογότυπο & εικονίδιο μενού), bx-navbar-center (Επιλογές μενού), bx-navbar-right (Εικονίδια όπως αναζήτηση, σύνδεση, γλώσσα, καλάθι αγορών).
Τι κάνει η κλάση bx-nav-icon;
Φροντίζει για ομοιόμορφο στυλ όλων των εικονιδίων της γραμμής πλοήγησης. Αυτά τα κουμπιά ελέγχουν π.χ. την ανοίγμαση της Mobile-Bar, Side-Bar ή την αναζήτηση.
Πώς μπορώ να σχεδιάσω συνδέσμους μενού;
Με το bx-nav-item ορίζεις τα στοιχεία της λίστας, με το bx-nav-link τους κανόνες στυλ για το κείμενο, το hover και τις ενεργές καταστάσεις των συνδέσμων.
Πώς λειτουργεί ο έλεγχος υπομενού;
Ένα μενού με την κλάση has-submenu περιέχει ένα αναπτυσσόμενο μενού. Με το submenu-toggle (κουμπί με εικονίδιο βέλους) μπορείς να το ανοίξεις ή να το κλείσεις.
Τι σημαίνουν οι Utility κλάσεις d-none και d-lg-inline;
Αυτές οι κλάσεις ελέγχουν την ορατότητα μεμονωμένων στοιχείων ανάλογα με το μέγεθος οθόνης – ιδανικές για responsive πλοηγήσεις.
Πώς είναι δομημένο ένα αναπτυσσόμενο μενού;
Ένα αναπτυσσόμενο μενού αποτελείται από 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.
Πώς εμφανίζεται ο μετρητής του καλαθιού αγορών;
Ο περιτύλιξ WKGBAnzDiv περιέχει WKGBAnzDivInner, το οποίο μέσω JS (μέσω #WKGBAnz) εμφανίζει τον τρέχοντα αριθμό άρθρων – συνήθως ως badge στο εικονίδιο του καλαθιού.
Πώς μπορώ να εμφανίσω μεμονωμένα κουμπιά μόνο σε συγκεκριμένες περιοχές;
Συνδύασε .bx-nav-item με . Έτσι μπορείς να εμφανίζεις ή να αποκρύπτεις τις κουμπίες συγκεκριμένα σε #bxNavPoints (Desktop), .bx-mobile-bar ή .bx-side-bar, χωρίς να αλλάξεις τον κώδικα HTML.