재단 상단의 탐색 모음

페이지의 머리 위쪽 탐색 모음 :

분석의 예

사용 <nav class="top-bar" data-topbar> "데이터 topbar> 표준 도구 모음을 만듭니다. .title-area 클래스 (방지해야합니다 사이트 로고 영역을 정의 li.name 내부). 작은 화면 후에는 "메뉴"버튼을 볼 수 있습니다. 화면 크기에 따라 메뉴의 재단은 자동으로 접는 음료를 확장 :

작은 화면 때문에 많은 옵션의 크기의 숨겨집니다. li.toggle-topbar menu.icon 클래스는 메뉴 버튼을 생성, 숨겨진 옵션을 표시를 클릭합니다.
? 팁 : 효과를 확인하려면 브라우저 창을 재설정합니다.

.top-bar-section 탐색 링크 섹션을 정의합니다. .left 클래스는 링크가 왼쪽 정렬을 지정합니다. .active 클래스는 선택한 항목, 파란색 배경을 표시하는 데 사용됩니다.

팁 : 당신이 원하는 경우 마우스 오른쪽 정렬 탐색 링크가 될 수 .left 수정 .right :

또한 왼쪽 정렬 오른쪽에 맞춰 설정할 수 있습니다 :

에 의해 탐색 모음 .divider 클래스 분할 라인을 추가하는 (큰 화면에 세로 선을, 작은 화면은 수평 라인)

드롭 다운 메뉴 탐색 모음을

드롭 다운 메뉴의 상단에있는 탐색 모음을 설정할 수 있습니다.

에 의해 <li> 요소가 추가됩니다 .has-dropdown 드롭 다운 메뉴를 설정하는 클래스를 :

분할 선

사용 .divider 분할 선 드롭 다운 메뉴를 설정하는 클래스를 :

풀다운 메뉴 레이블

에서 <li> 추가 내 <label> 라벨 (제목)를 설정하는 요소 풀다운 메뉴 :

임베디드 드롭 다운 메뉴

드롭 다운 메뉴가 드롭 다운 메뉴에 포함 할 수 있습니다 :

클릭 가능한

기본적으로 탐색 모음의 드롭 다운 메뉴가 화면 위로 마우스를 이동, 우리가 사용할 수있는 data-options="is_hover: false" " 속성을 탐색 바는 마우스 클릭으로 표시되는 설정 :

탐색 모음의 버튼 및 아이콘

당신은 탐색 모음 버튼에 아이콘을 배치 할 수 있습니다 :

당신은 당신이 더 많은 사진 스타일을보실 수 있습니다 탐색 표시 줄에 아이콘을 넣을 수 있습니다 재단 아이콘 자습서 :

고정 탐색

탐색 바는 페이지의 상단에 고정 할 수 있습니다.

상단에있는 페이지 탐색 막대가 움직이지 스크롤합니다.

단지에있는 탐색 모음에 내비게이션 막대를 해결하려면 <div class="fixed"> 에 내부 :

탐색 모음 절대 위치

우리는 탐색 모음 넣을 수 있습니다 <div class="sticky"> 스크롤 막대가 지역 이동하지 않습니다 상단의 탐색 막대로 고정으로 탐색 모음에 출시 할 때, 절대 위치를 설정하는 탐색 모음에서 :

당신이 사용하는 경우 .sticky 클래스를, 상단 네비게이션 바는 모든 화면 크기에 고정됩니다. 당신 만의 화면에 설정을 지정해야하는 경우 <nav> 이전 data-options="sticky_on: small|medium|large" | 미디어 | 큰" 속성을 :

또는 스크린 크기의 다수의 어레이에 의해 :