탐색 모음에 대한 모든 종류를 제공 W3.CSS :
수직선:
수평 (작은 화면에 수직) :
기본 탐색
W3-Navbar의 클래스는 가로 방향 탐색 메뉴를 만듭니다
예
<ul class="w3-navbar w3-black">
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul> »그에게 자신을보십시오 컬러 네비게이션 바
예
<ul class="w3-navbar w3-light-grey">
<ul
class="w3-navbar w3-green">
<ul
class="w3-navbar w3-blue"> »그에게 자신을보십시오 경계가 탐색 바
예
<ul class="w3-navbar w3-border w3-light-grey">
<ul
class="w3-navbar w3-border w3-round w3-light-grey">
<ul
class="w3-navbar w3-card-8 w3-light-grey"> »그에게 자신을보십시오 액티브 / 현재 링크
예
<ul class="w3-navbar
w3-border w3-light-grey">
<li><a
class="w3-green" href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul> »그에게 자신을보십시오 Hoverable 링크
때 탐색 모음 내의 링크를 통해 사용자가 마우스, 배경 색상은 회색으로 변경됩니다.
당신이 가져가에 다른 배경 색상을 원하는 경우, W3-hover- 색상 클래스 중 하나를 사용하여, 당신은 호버에 다른 텍스트 색상을 원하는 경우 W3 - 호버 텍스트 색상 클래스 중 하나를 사용하십시오
예
<ul class="w3-navbar
w3-border w3-light-grey">
<li><a
class="w3-hover-red" href="#">Home</a></li>
<li><a class="w3-hover-blue" href="#">Link 1</a></li>
<li><a
class="w3-hover-green" href="#">Link 2</a></li>
<li><a class="w3-hover-teal" href="#">Link 3</a></li>
</ul> »그에게 자신을보십시오 마우스 오른쪽 정렬 링크
예
<ul class="w3-navbar w3-light-grey w3-border">
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li
class="w3-right"><a class="w3-green" href="#">Link
3</a></li>
</ul> »그에게 자신을보십시오 네비게이션 바의 크기
글꼴 크기를 변경합니다 :
패딩을 변경합니다 :
예
<ul class="w3-navbar w3-green">
<li><a class="w3-padding-hor-16" href="#">Home</a></li>
<li><a class="w3-padding-hor-16" href="#">Link 1</a></li>
<li><a
class="w3-padding-hor-16" href="#">Link 2</a></li>
<li><a class="w3-padding-hor-16" href="#">Link 3</a></li>
</ul> »그에게 자신을보십시오 CSS의 폭 속성 (: 작은 화면에, 그들은 100 %로 변환됩니다 주)와 목록 항목의 폭을 사용자 정의 :
예
<ul class="w3-navbar w3-dark-grey w3-center">
<li
style="width:50%"><a class="w3-padding w3-green" href="#">Home</a></li>
<li style="width:50%"><a class="w3-padding" href="#">Link 1</a></li>
</ul> »그에게 자신을보십시오 아이콘과 네비게이션
예
<ul class="w3-navbar w3-light-grey w3-border
w3-large">
<li><a
class="w3-green" href="#"><i class="fa fa-home w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-search w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-envelope w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-globe w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-sign-in w3-large"></i></a></li>
</ul> »그에게 자신을보십시오 드롭 다운과 네비게이션
은 "드롭 다운"링크 위로 마우스를 이동 :
예
<ul class="w3-navbar w3-card-2 w3-light-grey">
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li class="w3-dropdown-hover">
<a href="#">Dropdown</a>
<div
class="w3-dropdown-content w3-white w3-card-4">
<a
href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul> »그에게 자신을보십시오 참고 : 드롭 다운 메뉴는 "오픈"인 경우, 드롭 다운 링크가 활성화되어 있음을 나타 내기 위해 회색 배경 색을 가져옵니다. 이를 무시하려면, 모두 "드롭 다운"<리>와 <A>에 W3-hover- 색상 클래스를 추가 :
팁 : 드롭 다운 텍스트 옆에 드롭 다운 기호를 원하는 경우, 같은 (적합한 아이콘을 추가 ) :
예
<li class="w3-dropdown-hover
w3-hover-orange">
<a class="w3-hover-orange" href="#">Dropdown
<i class="fa fa-caret-down"></i></a>
<div class="w3-dropdown-content w3-white w3-card-4">
<a href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</li> »그에게 자신을보십시오 (W3) - 드롭 다운 메뉴를 클릭 사용 대신 호버의 드롭 다운 링크를 클릭하는 것을 선호하는 경우 :
예
<li class="w3-dropdown-click">
<a onclick="myFunction()" href="#">Dropdown
<i class="fa fa-caret-down"></i></a>
<div id="demo"
class="w3-dropdown-content w3-white w3-card-4">
<a
href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li> »그에게 자신을보십시오 고정 네비게이션
사용자가 스크롤이 페이지의 <UL> 주위에 <div> 요소를 포장하고 W3 정상 또는 W3 바닥 클래스를 추가하는 경우에도, 상단 또는 페이지의 하단에 머물 탐색 모음을 강제로 :
탐색 바 붕괴
탐색 줄이 작은 화면에 너무 많은 공간을 차지, 당신은 기본적으로 수직으로 표시하지 않는 경우, 당신은 숨기고 탐색 모음에서 특정 링크를 표시하는 유틸리티 클래스를 사용할 수 있습니다.
태블릿 및 모바일 장치에 표시 할 때 아래의 예에서, 탐색 바는 오른쪽 상단 모서리에있는 버튼 (☰)로 대체됩니다. 버튼을 클릭하면, 탐색 줄이 세로로 표시됩니다 :
Topnav
네비게이션 바의 또 다른 예는 W3-topnav 클래스입니다. 그것은 당신이 대신 배경 색깔, 링크 위에 마우스를 올려 때 밑줄을 추가합니다 것을 제외하고, W3 - 네비게이션 바 비슷합니다 :
예
<nav class="w3-topnav w3-green">
<a href="#">Home</a>
<a
href="#">Link 1</a>
<a
href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</nav> »그에게 자신을보십시오 글꼴 최고 아이콘으로 예
<nav class="w3-topnav w3-green">
<a href="#"><i class="fa
fa-home"></i></a>
<a
href="#">Link 1</a>
<a
href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</nav> »그에게 자신을보십시오 사이드 탐색
W3-sidenav 클래스는 수직 탐색 모음을 만듭니다
로 이동 다음 장 측면 탐색에 대한 자세한 내용은.