지금 앱 다운로드하고 10일 무료 체험하기
google play store logo apple store logo
통화 언어 선택 지역 선택

블루트로닉스 CMS 내비게이션 편집기 - 메뉴를 개별적으로 조정

이 가이드에서는 bluetronix CMS에서 웹사이트 내비게이션을 어떻게 개별적으로 조정하는지 배울 수 있습니다. 네비게이션 바 구조부터 모바일 메뉴까지 – 메뉴를 최적으로 구성하는 방법을 단계별로 배울 수 있습니다.

저장 위치 & 가시성 코드 예시: <i>/bx_Header.html</i> 네비게이션 바 구조 섹션: 네비게이션 바 상단 섹션: 네비게이션 바 하단 모바일 메뉴 사이드바 메뉴 버튼 & 서브 메뉴 SVG 아이콘 설정 CSS 조정 & 순서 팁 & 트릭 내비게이션 편집기를 위한 추가 버튼 FAQ

내비게이션 편집기: 웹사이트 메뉴 커스터마이징

이 문서는 bluetronix CMS에서 네비게이션 바(웹사이트 내비게이션)가 어떻게 구성되어 있고 어떻게 조정하는지 보여줍니다. 구조, 플레이스홀더(텍스트 마크), 모바일 및 사이드 바, 내비게이션 편집기를 안내합니다.

참고: 파일 /bx_Header.html은 개발자 모드에서만 표시됩니다(관리자로 로그인).

저장 위치 & 가시성

기본적으로 네비게이션 바는 주 디렉터리의 페이지 → /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 헤더의 옵션을 사용하고 싶지 않다면, HTML에서 __​DB​_GB_xxx__와 __​DB​_GB_xxx_Display__를 제거할 수 있습니다. 이들은 선택 사항입니다.

섹션: 네비게이션 바 상단

메뉴 위의 추가 바는 (폰 및 데스크탑) 위로 스크롤하여 시야에서 사라집니다. 실제 네비게이션 바는 상단에서 '고정' 상태로 표시됩니다. 이로 인해 중요한 정보(예: '앱 다운로드…')가 항상 보이는 공간을 차지하지 않고 위에 나타날 수 있습니다.

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

모바일 메뉴

모바일 바는 전화 모드에서 오른쪽에서 들어옵니다. 페이지를 로드할 때 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를 교체하여 다른 탐색 테이블을 지정할 수 있습니다. 기본 탐색 편집기는 항상 00_Menue를 사용합니다.

모범 사례: 모든 탐색 요소를 /bx_Header.html에 묶어 두십시오. 이렇게 하면 모바일 바, 사이드 바 및 데스크톱 내비게이션이 일관성을 유지하며 데이터 소스(예: 00_Menue 외의 다른 테이블)의 교체가 신속하게 완료됩니다.

FAQ

고객들이 자주 묻는 질문

블루트로닉스 CMS에서 Navbar 파일을 찾으려면 어디로 가야하나요?

Navbar는 주 디렉토리의 페이지 ⯈ /bx_Header.html에 있습니다. 여기서 웹사이트 탐색에 대한 모든 변경을 수행할 수 있습니다.

왜 /bx_Header.html 파일이 보이지 않나요?

파일은 개발자 모드에서만 표시됩니다. 접근을 위해 AAdmin으로 로그인해야 합니다.

Navbar는 어떻게 구성되어 있나요?

Navbar는 세 가지 주요 영역으로 구성됩니다: – 왼쪽 아이콘 및 로고: 메뉴 아이콘 및 로고 – 센터 버튼: 주요 탐색 및 하위 메뉴 – 오른쪽 아이콘: 검색, 로그인 또는 장바구니와 같은 기능 아이콘

HTML 코드의 플레이스홀더(텍스트 태그)는 무엇을 의미하나요?

플레이스홀더는 CMS에서 저장할 때 자동으로 대체됩니다. 예를 들어, none는 요소의 가시성을 제어하며 는 실제 내용을 삽입합니다. 이 태그는 CMS ⯈ 웹사이트 ⯈ 헤더에서 구성할 수 있습니다.

텍스트 태그를 삭제할 수 있나요?

예, CMS 헤더 옵션을 사용하고 싶지 않다면 또는 태그를 간단히 삭제할 수 있습니다. 이는 선택 사항입니다.

Navbar 위와 아래에 콘텐츠를 추가하려면 어떻게 하나요?

Navbar-Top 및 Navbar-Bottom 영역을 통해 추가 바를 활성화할 수 있습니다. 이 바는 CMS ⯈ 웹사이트 ⯈ 헤더에서 제어되며 HTML 콘텐츠로 채워집니다.

모바일 메뉴는 어떻게 작동하나요?

전화 모드에서 모바일 바는 오른쪽에서 올라옵니다. 메뉴 내용은 자동으로 데스크톱 메뉴에서 가져옵니다. 로고와 같은 추가 HTML 블록을 위와 아래에 삽입할 수 있습니다.

사이드바를 활성화하려면 어떻게 해야 하나요?

사이드바는 전화 모드에서 왼쪽에서 열립니다. 여기에서도 사용자 HTML 블록을 추가할 수 있습니다. 표시 형식은 CMS ⯈ 웹사이트 ⯈ 머리글을 통해 조정할 수 있습니다.

사이드바 또는 모바일 바에 내비게이션이 표시될지 결정할 수 있나요?

예, 레이아웃 옵션을 통해 내비게이션이 사이드바 또는 모바일 바에 표시될지 선택할 수 있습니다. 또한 아이콘을 통해 어느 페이지(왼쪽/오른쪽)에 표시될지를 설정할 수 있습니다.

CMS에서 메뉴는 어떻게 관리되나요?

메뉴 구조는 시스템 테이블 00_Menue에서 생성됩니다. 이 부분은 CMS의 여백 ⯈ 내비게이션에서 편집할 수 있습니다. 페이지와 하위 페이지는 자동으로 생성됩니다.

자체 메뉴 템플릿을 어떻게 만들 수 있나요?

태그 <!--bxNV_DB 00_Menue bxNV_DB-->를 통해 다른 테이블을 데이터 소스로 지정할 수 있습니다. 이렇게 하면 CMS 내비게이션과 연결된 자신만의 내비게이션 또는 템플릿을 생성할 수 있습니다.

SVG 아이콘을 어떻게 변경하나요?

아이콘의 SVG 코드는 CMS ⯈ 웹사이트 ⯈ 머리글의 개발자 보기 하단에서 편집할 수 있습니다.

내비게이션 바의 아이콘 순서를 어떻게 변경하나요?

아이콘의 순서는 CSS를 통해 조정할 수 있습니다. 모바일 바의 위치(오른쪽 또는 왼쪽) 또한 CSS를 통해 제어할 수 있습니다.

데스크톱, 모바일 또는 사이드바에서 어떤 버튼이 표시될지 어떻게 설정하나요?

테이블 00_Menue를 통해 각 내비게이션에 CSS 클래스 이름을 지정할 수 있습니다. 이 클래스를 사용하여 #bxNavPoints (데스크톱), #BxMobileBar (모바일) 또는 #BxSideBar (사이드바)에서 버튼이 표시되는 위치를 CSS로 제어할 수 있습니다.

내비게이션 편집기를 위한 추가 버튼은 무엇인가요?

이 버튼은 편집 모드에서 내비게이션 요소를 위한 추가 편집기를 표시합니다. 기본적으로는 테이블 00_Menue를 사용하지만, 다른 테이블을 지정할 수도 있습니다.

내비게이션을 위한 권장 모범 사례는 무엇인가요?

모든 내비게이션 요소를 /bx_Header.html 파일에 통합하십시오. 이렇게 하면 데스크톱, 모바일 및 사이드바 메뉴가 동기화되어 필요할 때 쉽게 조정하거나 교체할 수 있습니다.

CMS