ویرایشگر ناوبری: سفارشی‌سازی منوی وب‌سایت

این مستندات به تو نشان می‌دهد که چگونه نوار ناوبری (ناوبری وب‌سایت) در CMS bluetronix طراحی شده است و چگونه می‌توانی آن را تنظیم کنی. تو از طریق ساختار، جای‌گذاری‌ها (برچسب‌های متنی)، سایدبار و ویرایشگر ناوبری راهنمایی می‌شوی.

توجه: فایل /bx_Header.html فقط در حالت توسعه‌دهنده قابل مشاهده است (ورود به عنوان Admin).

محل ذخیره و دیدVisibility

به طور پیش‌فرض، نوار ناوبری در دایرکتوری اصلی در صفحات → /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> 

ساختار نوار ناوبری

• 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 حذف کنید. اینها اختیاری هستند.

بخش: نوار ناوبری بالایی

نوار اضافی بالای منو (در گوشی و دسکتاپ) به سمت بالا از دید خارج می‌شود. نوار ناوبری واقعی در بالای صفحه "چسبناک" باقی می‌ماند. اینگونه می‌توان اطلاعات مهم (مثلاً "دانلود اپ …") را بالا به نمایش گذاشت، بدون اینکه فضای دائمی را مسدود کند.

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

بخش: نوار ناوبری پایینی

نوار اضافی زیر منو (در گوشی و دسکتاپ) نیز به سمت بالا خارج می‌شود.

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

منوی موبایل

بار موبایل در حالت تلفن از سمت راست وارد می‌شود. هنگام بارگذاری صفحه، جاوااسکریپت محتویات منو را از 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 می‌توانی جدول ناوبری دیگری را مشخص کنی. ویرایشگر ناوبری استاندارد همیشه از 00_Menue استفاده می‌کند.

بهترین شیوه: تمامی عناصر ناوبری را در /bx_Header.html متمرکز نگه‌دار. این‌طور نوار موبایل، نوار کناری و نوار ناوبری دسکتاپ هماهنگ می‌مانند و تعویض منبع داده (مثلاً جدول دیگری به‌عنوان 00_Menue) به‌سرعت انجام می‌شود.