Κατεβάστε την εφαρμογή τώρα και δοκιμάστε δωρεάν για 10 ημέρες
google play store logo apple store logo
Νόμισμα Επιλέξτε γλώσσα Επιλέξτε περιοχή

Επεξεργαστής πλοήγησης στο bluetronix CMS – προσαρμογή μενού ανάλογα με τις ανάγκες

Σε αυτόν τον οδηγό θα μάθεις πώς να προσαρμόσεις την πλοήγηση της ιστοσελίδας σου στο bluetronix CMS. Από τη δομή της Navbar έως το Mobile-μενού – εδώ θα μάθεις βήμα προς βήμα πώς να ρυθμίσεις το μενού σου βέλτιστα.

Θέση αποθήκευσης & Ορατότητα Παράδειγμα κώδικα: <i>/bx_Header.html</i> Δομή Navbar Τμήμα: Navbar-Top Τμήμα: Navbar-Bottom Mobile μενού Sidebar Κουμπιά μενού & Υπομενού Ρύθμιση SVG-Icons Έλεγχος CSS & Σειρά Συμβουλές & Τέχνασμα Πρόσθετο κουμπί για τον επεξεργαστή πλοήγησης Συχνές Ερωτήσεις

Επεξεργαστής πλοήγησης: Προσαρμογή μενού ιστοσελίδας

Αυτή η τεκμηρίωση δείχνει πώς είναι δομημένη η Navbar (Πλοήγηση ιστοσελίδας) στο bluetronix CMS και πώς μπορείς να την προσαρμόσεις. Θα καθοδηγηθείς μέσα από τη δομή, τους χώρους κράτησης (κείμενα-σήματα), το Mobile- και Side-Bar καθώς και τον επεξεργαστή πλοήγησης.

Σημείωση: Το αρχείο /bx_Header.html είναι ορατό μόνο σε λειτουργία προγραμματιστή (Εγγραφή ως AAdmin).

Θέση αποθήκευσης & Ορατότητα

Κατά προ-default, η Navbar βρίσκεται στο κύριο κατάλογο κάτω από Σελίδες → /bx_Header.html. Τυχόν αλλαγές στην πλοήγηση γίνονται σε αυτό το αρχείο.

Παράδειγμα κώδικα: /bx_Header.html



<div style="display:__​DB​_GB_DesktopHTML1_Display__" class="bx-DesktopHTML1"><!--bxEB_DSedit 00_Config DesktopHTML1 bxEB_DSedit-->
   __​DB​_GB_DesktopHTML1__     
</div>   


<div class="bx-nav-outer">
   <nav class="bx-nav">

      <!-- left Icon logo -->
      <div class="bx-navbar-left">
         <div style="display:__​DB​_GB_DesktopNavIcon_Display__">
			   <button class="bx-nav-icon" id="BxMobileBarToggle">__​DB​_GB_DesktopNavIcon_SVG__</button>    
         </div>

         <div style="display:__​DB​_GB_DesktopLogo_Display__;">
            <a href="/index.html"><img src="__​DB​_GB_DesktopLogo_Src__" class="bx-nav-brand"></a>                 
         </div>  
      </div>


      <!-- center buttons -->
      <div class="bx-navbar-center" id="bxNavPoints">

         <!-- zusatz icon Menue-Editor - display:none -->
         <div style="position:relative;display:none;"><div style="position:absolute;left:15px;top:-21px;width:35px;height:35px;z-index:100000;"><!--bxEB_Navi 00_Menue bxEB_Navi--></div></div>

         <ul style="display:__​DB​_GB_DesktopNav_Display__">
<!--bxNV_DB 00_Menue bxNV_DB-->

<!--bxNV_Navi-->
            <li class="bx-nav-item __​DB​_Nav_CSSclass__"><a class="bx-nav-link" href="__​DB​_Nav_Link__" __​DB​_Nav_NewZiel__>__​DB​_Nav_MenuePunktName__</a></li>
<!--bxNV_Navi-->

               <li class="bx-nav-item has-submenu">
                  <a class="bx-nav-link __​DB​_Nav_CSSclass__" href="__​DB​_Nav_Link__" __​DB​_Nav_NewZiel__>__​DB​_Nav_MenuePunktName__</a>
                  <button class="bx-nav-icon submenu-toggle d-none d-lg-inline" type="button"><span>__​DB​_GB_NavIconChevron_SVG__</span></button>

                  <ul class="bx-menu bx-navbar-dropdown" role="menu">
<!--bxNV_Next_Sub_Button-->
                  </ul>
               </li>

<!--bxNV_Navi-->
                     <li class="bx-dropdown-item __​DB​_Nav_CSSclass__" role="none"><a class="bx-dropdown-link" role="menuitem" href="__​DB​_Nav_Link__" __​DB​_Nav_NewZiel__>__​DB​_Nav_MenuePunktName__</a></li>
<!--bxNV_Navi-->
         </ul>
      </div>

      <!-- icons right -->
      <div class="bx-navbar-right">
         <div style="display:__​DB​_GB_DesktopIconSearch_Display__ ">    
         	<button class="bx-nav-icon" onclick="BlueSearchBar();">__​DB​_GB_DesktopIconSearch_SVG__</button>
         </div>         

         <div style="display:__​DB​_GB_DesktopIconLight_Display__">      
         	<button class="bx-nav-icon" onclick="BlueLightDdark();">__​DB​_GB_DesktopIconLight_SVG__</button>            
         </div>  

         <div style="display:__​DB​_GB_DesktopIconLogin_Display__">          
         	<button class="bx-nav-icon" onclick="BlueLoginBar();">__​DB​_GB_DesktopIconLogin_SVG__</button>                   
         </div>   

         <div style="display:__​DB​_GB_DesktopIconLang_Display__">                  
         	<button class="bx-nav-icon" onclick="BlueLangBar();">__​DB​_GB_DesktopIconLang_SVG__</button>                   
         </div>   

         <div style="display:__​DB​_GB_DesktopIconBasket_Display__">      
         	<button class="bx-nav-icon" onclick="BlueBasketBar();">__​DB​_GB_DesktopIconBasket_SVG__<div class="WKGBAnzDiv"><div class="WKGBAnzDivInner" id="WKGBAnz"></div></div></button>  
         </div>
                         
         <div style="display:__​DB​_GB_DesktopIconSide_Display__"> 
            <button class="bx-nav-icon" id="BxSideBarToggle">__​DB​_GB_DesktopIconSide_SVG__</button>               
         </div> 
      </div>

   </nav>
</div>

<!-- Mobile Menü -->
<div class="bx-mobile-bar" id="BxMobileBar">
   <div style="display:__​DB​_GB_MobilHTML1_Display__" class="bx-MobilHTML1"><!--bxEB_DSedit 00_Config MobilHTML1 bxEB_DSedit-->__​DB​_GB_MobilHTML1__</div>  
   <div id="bxNavPointsMobile" style="display:__​DB​_GB_MobilNav_Display__"></div>
   <div style="display:__​DB​_GB_MobilHTML2_Display__" class="bx-MobilHTML2"><!--bxEB_DSedit 00_Config MobilHTML2 bxEB_DSedit-->__​DB​_GB_MobilHTML2__</div>  
</div>

<!-- Sidebar -->
<div class="bx-side-bar" id="BxSideBar">
   <div style="display:__​DB​_GB_SideHTML1_Display__" class="bx-SideHTML1"><!--bxEB_DSedit 00_Config SideHTML1 bxEB_DSedit-->__​DB​_GB_SideHTML1__</div>  
   <div id="bxNavPointsSide" style="display:__​DB​_GB_SideNav_Display__"></div>
   <div style="display:__​DB​_GB_SideHTML2_Display__" class="bx-SideHTML2"><!--bxEB_DSedit 00_Config SideHTML2 bxEB_DSedit-->__​DB​_GB_SideHTML2__</div>  
</div>


<div style="display:__​DB​_GB_DesktopHTML2_Display__" class="bx-DesktopHTML2"><!--bxEB_DSedit 00_Config DesktopHTML2 bxEB_DSedit-->
   __​DB​_GB_DesktopHTML2__       
</div>

Δομή Navbar

  • Left Icon & Logo: Menü-Icon und Logo.
  • Center Buttons: Menü-Buttons und Untermenüs.
  • Icons Right: Funktions-Icons (z. B. Warenkorb, Suche, Sprache).

Κατανόηση χώρων κράτησης (κείμενα-σήματα)

Οι HTML χώροι κράτησης αντικαθίστανται αυτόματα κατά την αποθήκευση στο CMS:

  • __​DB​_GB_DesktopHTMLxxx_Display__: Steuert die Sichtbarkeit (Aktiv/Inaktiv) über CMS → Webseite → Kopfzeile.
  • __​DB​_GB_DesktopHTMLxxx__: Wird durch Inhalte (z. B. HTML, Bild-URL, SVG) ersetzt, die Du in Kopfzeile hinterlegst.
  • __​DB​_Nav_xxx__: Werte aus der Navigationstabelle (z. B. Link, Name, Ziel, CSS-Klasse).
  • __​DB​_GB_xxx_SVG__: SVG-Code des jeweiligen Icons.

Εάν δεν θέλεις να χρησιμοποιήσεις τις επιλογές από την κεφαλίδα του CMS, μπορείς να αφαιρέσεις τις μάρκες __​DB​_GB_xxx__ και __​DB​_GB_xxx_Display__ από το HTML. Είναι προαιρετικές.

Τμήμα: Navbar-Top

Η πρόσθετη γραμμή πάνω από το μενού κύλιζεται (τηλέφωνο & υπολογιστής) προς τα πάνω εκτός του ορατού πεδίου. Η πραγματική Navbar παραμένει «sticky» ορατή στην επάνω πλευρά. Έτσι, σημαντικές πληροφορίες (π.χ. «Λήψη App ...») μπορούν να εμφανίζονται πάνω, χωρίς να καταλαμβάνουν μόνιμα χώρο.

  • __​DB​_GB_DesktopHTML1_Display__: Aktiv/Inaktiv über CMS → Webseite → Kopfzeile.
  • __​DB​_GB_DesktopHTML1__: HTML-Inhalt aus Kopfzeile.
  • <!--bxEB_DSedit 00_Config DesktopHTML1 bxEB_DSedit-->: Editier-Button für den HTML-Eintrag.

Τμήμα: Navbar-Bottom

Η πρόσθετη γραμμή κάτω από το μενού κύλιζεται (τηλέφωνο & υπολογιστής) επίσης προς τα πάνω.

  • __​DB​_GB_DesktopHTML2_Display__: Aktiv/Inaktiv über CMS → Webseite → Kopfzeile.
  • __​DB​_GB_DesktopHTML2__: HTML-Inhalt aus Kopfzeile.
  • <!--bxEB_DSedit 00_Config DesktopHTML2 bxEB_DSedit-->: Editier-Button für den HTML-Eintrag.

Mobile μενού

Η κινητή μπάρα εισέρχεται από τη δεξιά πλευρά σε λειτουργία τηλεφώνου. Κατά την φόρτωση της σελίδας, το JavaScript (/bx_script/BxScript_own_min.js) αναλαμβάνει το περιεχόμενο του μενού από το bxNavPoints στην κινητή μπάρα (BxMobileBar). Επιπλέον, μπορείς να προσθέσεις δικούς σου HTML μπλοκ πάνω και κάτω από το μενού (π.χ. μεγάλα λογότυπα).


<div class="bx-mobile-bar" id="BxMobileBar">
   <div style="display:__​DB​_GB_MobilHTML1_Display__" class="bx-MobilHTML1"><!--bxEB_DSedit 00_Config MobilHTML1 bxEB_DSedit-->__​DB​_GB_MobilHTML1__</div>  
   <div id="bxNavPointsMobile" style="display:__​DB​_GB_MobilNav_Display__"></div>
   <div style="display:__​DB​_GB_MobilHTML2_Display__" class="bx-MobilHTML2"><!--bxEB_DSedit 00_Config MobilHTML2 bxEB_DSedit-->__​DB​_GB_MobilHTML2__</div>  
</div>

Sidebar

Η Side-Bar εισάγεται από την αριστερή πλευρά σε κατάσταση τηλεφώνου. Εδώ μπορείς επίσης να προσθέσεις δικά σου HTML μπλοκ πάνω/κάτω από το μενού (π.χ. για μεγάλα λογότυπα). Προαιρετικά, μπορείς να εμφανίσεις το μενού πλοήγησης και στη Sidebar.


<div class="bx-side-bar" id="BxSideBar">
   <div style="display:__​DB​_GB_SideHTML1_Display__" class="bx-SideHTML1"><!--bxEB_DSedit 00_Config SideHTML1 bxEB_DSedit-->__​DB​_GB_SideHTML1__</div>  
   <div id="bxNavPointsSide" style="display:__​DB​_GB_SideNav_Display__"></div>
   <div style="display:__​DB​_GB_SideHTML2_Display__" class="bx-SideHTML2"><!--bxEB_DSedit 00_Config SideHTML2 bxEB_DSedit-->__​DB​_GB_SideHTML2__</div>  
</div>

Σημείωση διάταξης: Μπορείς να επιλέξεις να εμφανίσεις είτε το Mobile-Menü είτε τη Side-Bar δεξιά/αριστερά και να αλλάξεις τα εικονίδια μέσω CMS → Ιστοσελίδα → Κεφαλίδα.

Κουμπιά μενού & Υπομενού



         <ul style="display:__​DB​_GB_DesktopNav_Display__">
<!--bxNV_DB 00_Menue bxNV_DB-->

<!--bxNV_Navi-->
            <li class="bx-nav-item __​DB​_Nav_CSSclass__"><a class="bx-nav-link" href="__​DB​_Nav_Link__" __​DB​_Nav_NewZiel__>__​DB​_Nav_MenuePunktName__</a></li>
<!--bxNV_Navi-->

               <li class="bx-nav-item has-submenu">
                  <a class="bx-nav-link __​DB​_Nav_CSSclass__" href="__​DB​_Nav_Link__" __​DB​_Nav_NewZiel__>__​DB​_Nav_MenuePunktName__</a>
                  <button class="bx-nav-icon submenu-toggle d-none d-lg-inline" type="button"><span>__​DB​_GB_NavIconChevron_SVG__</span></button>

                  <ul class="bx-menu bx-navbar-dropdown" role="menu">
<!--bxNV_Next_Sub_Button-->
                  </ul>
               </li>

<!--bxNV_Navi-->
                     <li class="bx-dropdown-item __​DB​_Nav_CSSclass__" role="none"><a class="bx-dropdown-link" role="menuitem" href="__​DB​_Nav_Link__" __​DB​_Nav_NewZiel__>__​DB​_Nav_MenuePunktName__</a></li>
<!--bxNV_Navi-->
         </ul>

Η δομή του μενού δημιουργείται με UL/LI και συμπληρώνεται από τον πίνακα της βάσης δεδομένων 00_Menue. Με την ετικέτα <!--bxNV_DB 00_Menue bxNV_DB--> μπορείς να υποδείξεις και έναν άλλο πίνακα.

Ανάμεσα σε <!--bxNV_Navi--> βρίσκονται τα HTML πρότυπα για τα κύρια και υπομενύσματα. Η ετικέτα <!--bxNV_Next_Sub_Button--> συμπληρώνεται αυτόματα με τις καταχωρήσεις του υπομενού.

Σημαντικό: Η σύνδεση με τη λειτουργία πλοήγησης του CMS γίνεται μέσω των ετικετών κειμένου. Έτσι μπορείς να ενσωματώσεις πλήρως και Custom Templates. Επεξεργάζεσαι την πλοήγηση στο υπομενού του CMS (κάτω από Περιθώριο). Το σύστημα δημιουργεί αυτόματα σελίδες και καταλόγους – δεν χρειάζεται χειροκίνητη σύνδεση.

Ρύθμιση SVG-Icons

Το SVG κώδικα των εικονιδίων τον συντηρείς στην προβολή προγραμματιστή από CMS → Ιστοσελίδα → Κεφαλίδα στην κάτω περιοχή.

Έλεγχος CSS & Σειρά

Μπορείς να αλλάξεις τη σειρά των εικονιδίων μέσω CSS. Η Mobile-Bar μπορεί να εμφανιστεί είτε δεξιά είτε αριστερά ανάλογα με τη διάταξη.

Συμβουλές & Τέχνασμα

  • In Kombination mit der Systemtabelle 00_Menue und CSS legst Du je Button fest, ob er in der Desktop-Navigation, der Mobile-Bar und/oder in der Side-Bar erscheint.
  • In 00_Menue kann jedem Button eine CSS-Klasse in der Spalte CSSclass zugewiesen werden.
  • Über CSS und die IDs bxNavPoints, BxMobileBar, BxSideBar bestimmst Du, welche Buttons wo gerendert werden. So baust Du auch komplexe Navbar-Strukturen, die der Endkunde später selbst mit der CMS-Navigation verändern kann.

Πρόσθετο κουμπί για τον επεξεργαστή πλοήγησης

<!-- zusatz icon Menue-Editor - display:none -->
<div style="position:relative;display:none;"><div style="position:absolute;left:15px;top:-21px;width:35px;height:35px;z-index:100000;"><!--bxEB_Navi 00_Menue bxEB_Navi--></div></div>

Με αυτόν τον τρόπο εισάγεις έναν επιπλέον κουμπί επεξεργασίας στη λειτουργία επεξεργασίας. Αντικαθιστώντας το 00_Menue μπορείς να υποδείξεις έναν άλλο πίνακα πλοήγησης. Ο προεπιλεγμένος επεξεργαστής πλοήγησης χρησιμοποιεί πάντα το 00_Menue.

Καλύτερη πρακτική: Κράτησε όλα τα στοιχεία πλοήγησης συγκεντρωμένα σε /bx_Header.html. Έτσι θα παραμείνουν συνεπείς η Mobile-Bar, η Side-Bar και η Desktop-Navbar, και η αντικατάσταση της πηγής δεδομένων (π.χ. άλλος πίνακας από το 00_Menue) θα γίνει γρήγορα.

Συχνές Ερωτήσεις

τι ρωτούν συχνά οι πελάτες μας

Πού μπορώ να βρω το αρχείο Navbar στο bluetronix CMS;

Η Navbar βρίσκεται στον κύριο κατάλογο κάτω από Σελίδες ⯈ /bx_Header.html. Εκεί μπορείς να κάνεις όλες τις αλλαγές στην πλοήγηση της ιστοσελίδας.

Γιατί δεν βλέπω το αρχείο /bx_Header.html;

Το αρχείο είναι ορατό μόνο σε Λειτουργία Προγραμματιστή. Συνδέσου ως AAdmin για να αποκτήσεις πρόσβαση.

Πώς είναι δομημένη η Navbar;

Η Navbar αποτελείται από τρεις κύριους τομείς: – Αριστερό Εικονίδιο & Λογότυπο: Εικονίδιο μενού και λογότυπο – Κεντρικά Κουμπιά: Κύρια πλοήγηση και υπομενύσματα – Δεξιά Εικονίδια: Εικονίδια λειτουργιών όπως αναζήτηση, σύνδεση ή καλάθι αγορών.

Τι σημαίνουν οι_placeholder (ετικέτες κειμένου) στον HTML κώδικα;

Οι ετικέτες αντικαθίστανται αυτόματα κατά την αποθήκευση στο CMS. Για παράδειγμα, το none ελέγχει την ορατότητα ενός στοιχείου, ενώ το εισάγει το πραγματικό περιεχόμενο. Αυτές τις ετικέτες μπορείς να τις ρυθμίσεις κάτω από CMS ⯈ Ιστοσελίδα ⯈ Κεφαλίδα.

Μπορώ να αφαιρέσω τις ετικέτες κειμένου;

Ναι, αν δεν θέλεις να χρησιμοποιήσεις τις επιλογές κεφαλίδας του CMS, μπορείς απλώς να διαγράψεις τις ετικέτες όπως ή . Είναι προoptional.

Πώς μπορώ να προσθέσω περιεχόμενο πάνω και κάτω από την Navbar;

Μέσα από τις περιοχές Navbar-Top και Navbar-Bottom μπορείς να ενεργοποιήσεις επιπλέον γραμμές. Αυτές ελέγχονται μέσω CMS ⯈ Ιστοσελίδα ⯈ Κεφαλίδα και γεμίζουν με HTML περιεχόμενο.

Πώς λειτουργεί το Mobile Menü;

Σε κατάσταση τηλεφώνου, η Mobile-Bar εισάγεται από τη δεξιά πλευρά. Το περιεχόμενο του μενού αναλαμβάνεται αυτόματα από το επιτραπέζιο μενού. Μπορείς να προσθέσεις επιπλέον HTML μπλοκ όπως λογότυπα πάνω και κάτω.

Πώς ενεργοποιώ τη Sidebar;

Η πλαϊνή μπάρα ανοίγει από την αριστερή πλευρά σε λειτουργία τηλεφώνου. Εδώ μπορείς επίσης να προσθέσεις τα δικά σου μπλοκ HTML. Τη διάταξη την ελέγχεις μέσω CMS ⯈ Ιστοσελίδα ⯈ Κεφαλίδα.

Μπορώ να αποφασίσω αν η πλοήγηση εμφανίζεται στην πλαϊνή μπάρα ή στην κινητή μπάρα;

Ναι, μέσω των επιλογών διάταξης μπορείς να επιλέξεις αν η πλοήγησή σου εμφανίζεται στην πλαϊνή μπάρα ή στην κινητή μπάρα. Επιπλέον, μπορείς να καθορίσεις μέσω των εικονιδίων σε ποια πλευρά (αριστερά/δεξιά) θα εμφανιστεί.

Πώς διαχειρίζεται το μενού στο CMS;

Η δομή του μενού δημιουργείται από τον πίνακα συστήματος 00_Menue. Αυτόν τον επεξεργάζεσαι στο CMS υπό Περιθώριο ⯈ Πλοήγηση. Σελίδες και υποσελίδες δημιουργούνται αυτόματα.

Πώς μπορώ να δημιουργήσω τα δικά μου πρότυπα μενού;

Μέσω της ετικέτας <!--bxNV_DB 00_Menue bxNV_DB--> μπορείς να ορίσεις μια άλλη πίνακα ως πηγή δεδομένων. Έτσι μπορείς να δημιουργήσεις δικές σου πλοηγήσεις ή πρότυπα που συνδέονται με την πλοήγηση του CMS.

Πώς αλλάζω τα εικονίδια SVG;

Οι κωδικοί SVG των εικονιδίων μπορείς να τους επεξεργαστείς υπό CMS ⯈ Ιστοσελίδα ⯈ Κεφαλίδα στην κάτω περιοχή της προβολής προγραμματιστή.

Πώς αλλάζω τη σειρά των εικονίων στη γραμμή πλοήγησης;

Μπορείς να προσαρμόσεις τη σειρά των εικονίων μέσω CSS. Επίσης, η θέση της κινητής μπάρας (δεξιά ή αριστερά) μπορεί να ελεγχθεί μέσω CSS.

Πώς μπορώ να καθορίσω ποια κουμπιά εμφανίζονται σε υπολογιστή, κινητό ή πλαϊνή μπάρα;

Μέσω του πίνακα 00_Menue μπορείς να δώσεις σε κάθε πλοήγηση ένα όνομα κλάσης CSS. Με αυτές τις κλάσεις ελέγχεις μέσω CSS πού θα εμφανιστεί το κουμπί – π.χ. σε #bxNavPoints (Υπολογιστής), #BxMobileBar (Κινητό) ή #BxSideBar (Πλαϊνή Μπάρα).

Τι κάνει το πρόσθετο κουμπί για τον επεξεργαστή πλοήγησης;

Αυτό το κουμπί ενσωματώνει έναν επιπλέον επεξεργαστή για στοιχεία πλοήγησης στη λειτουργία επεξεργασίας. Καταρχάς, χρησιμοποιεί τον πίνακα 00_Menue, αλλά μπορείς επίσης να ορίσεις έναν άλλο πίνακα.

Ποια είναι η προτεινόμενη καλύτερη πρακτική για την πλοήγηση;

Διατήρησε όλα τα στοιχεία πλοήγησης συγκεντρωμένα στο αρχείο /bx_Header.html. Έτσι, τα μενού υπολογιστή, κινητού και πλαϊνής μπάρας παραμένουν συγχρονισμένα και μπορούν να προσαρμοστούν ή να αντικατασταθούν γρήγορα αν χρειαστεί.

CMS