עורך ניווט: התאמת תפריט האתר

התיעוד הזה מראה לך איך ה-navbar (ניווט האתר) ב-CMS של בלוטרוניקס בנויה ואיך להתאים אותה. תועבר דרך מבנה, מחזיקים (סימני טקסט), מובייל וסרגל צד וכן דרך עורך הניווט.

הערה: הקובץ /bx_Header.html גלוי רק במצב מפתח (התחברות כAAdmin).

מיקום & נראות

כברירת מחדל, ה-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 עצמה נשארת 'סטיקי' גלויה בחתך העליון. כך ניתן להציג מידע חשוב (למשל "הורד אפליקציה …") למעלה, מבלי לחסום מקום באופן קבוע.

• __​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.

תפריט מובייל

הבר הנייד נכנס במצב טלפון מהצד הימני. במהלך טעינת הדף, 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>

סרגל צד

הסרגל בצד נכנס מצד שמאל במצב טלפון. גם כאן אתה יכול להוסיף בלוקים HTML אישיים מעל/מתחת לתפריט (למשל, עבור לוגואים גדולים). בנוסף, אפשר להציג את תפריט הניווט גם בסרגל הצד.

<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>

הערה לגבי הפריסה: אתה יכול להציג בחירה בין תפריט נייד או סרגל צד מימין/משמאל ולהחליף את האייקונים דרך 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 מתבצע דרך התגיות. כך ניתן לקשר גם תבניות מותאמות אישית לחלוטין. עורך הניווט אתה עורך בתפריט המשנה של ה-CMS (מתחת לשוליים). המערכת יוצרת עמודים ותיקיות באופן אוטומטי – אין צורך בהקשרים ידניים.

קונפיגורציה של אייקוני SVG

את קוד ה-SVG של האייקונים אתה מנהל בתצוגת המפתחים של CMS → אתר אינטרנט → כותרת עליונה באזור התחתון.

שליטת CSS & סדר

את הסדר של האייקונים תוכל לשנות באמצעות CSS. הבר הנייד יכול להיכנס מימין או משמאל בהתאם לפריסה.

טיפים & טריקים

• 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 תוכל לציין טבלת ניווט אחרת. עורך הניווט המ stanרדי תמיד משתמש ב00_Menue.

שיטת עבודה מומלצת: שמור את כל מרכיבי הניווט ב/bx_Header.html מרוכזים. כך הבר הנייד, סרגל הצד ו-navbar המחשב הנייד נשמרים עקביים, והחלפת מקור הנתונים (למשל, טבלה אחרת מאשר 00_Menue) מתבצעת במהירות.