w3.css
내비게이션
수직:
수평:
W3.CSS 내비게이션 바 클래스
W3.CSS는 내비게이션 바에 대해 다음 클래스를 제공한다.
| Class | Defines |
|---|---|
| w3-bar | HTML 요소의 수평 컨테이너 |
| w3-bar-block | HTML 요소의 수직 컨테이너 |
| w3-bar-item | 컨테이너 바 요소 |
| w3-sidebar | HTML 요소의 수직 사이드바 |
| w3-mobile | 모든 막대 요소를 모바일 우선 반응형으로 만든다. |
| w3-dropdown-hover | 호버링 가능한 드롭다운 요소 |
| w3-dropdown-click | 클릭 가능한 드롭다운 요소(호버 대신) |
기본 내비게이션
w3-bar 클래스는 HTML 요소를 가로로 표시하기 위한 컨테이너다.
w3-bar-item 클래스는 컨테이너 요소를 정의한다.
탐색 모음을 만드는 데 완벽한 도구다.
예제
<div class="w3-bar w3-black"> <a href="#" class="w3-bar-item w3-button">Home</a> <a href="#" class="w3-bar-item w3-button">Link 1</a> <a href="#" class="w3-bar-item w3-button">Link 2</a> <a href="#" class="w3-bar-item w3-button">Link 3</a> </div>
반응형 내비게이션
w3-mobile 클래스는 모든 막대 요소를 반응형(큰 화면에서는 가로, 작은 화면에서는 세로)으로 만든다.
중형 및 대형 화면:
작은 화면:
예제
<div class="w3-bar w3-black"> <a href="#" class="w3-bar-item w3-button w3-mobile">Home</a> <a href="#" class="w3-bar-item w3-button w3-mobile">Link 1</a> <a href="#" class="w3-bar-item w3-button w3-mobile">Link 2</a> <a href="#" class="w3-bar-item w3-button w3-mobile">Link 3</a> </div>
컬러 내비게이션 모음
내비게이션 바에 색상을 추가하려면 w3-color 클래스를 사용한다.
예제
<div class="w3-bar w3-light-grey"> <div class="w3-bar w3-green"> <div class="w3-bar w3-blue">
테두리가 있는 내비게이션 바
탐색 모음 주위에 테두리를 추가하거나 카드로 표시하려면 w3-border 또는 w3-card 클래스를 사용한다.
예제
<div class="w3-bar w3-border w3-light-grey"> <div class="w3-bar w3-border w3-card-4">
활성/현재 링크
링크에 w3-color 클래스를 추가하여 강조 표시한다.
예제
<div class="w3-bar w3-border w3-light-grey"> <a href="#" class="w3-bar-item w3-button w3-green">Home</a> <a href="#" class="w3-bar-item w3-button">Link 1</a> <a href="#" class="w3-bar-item w3-button">Link 2</a> <a href="#" class="w3-bar-item w3-button">Link 3</a> </div>
호버링 가능한 링크
버튼 위에 마우스를 올리면 배경색이 회색으로 변경된다.
마우스 오버 시 다른 배경색을 원할 경우 w3-hover-color 클래스 중 하나를 사용한다.
예제
<div class="w3-bar w3-border w3-light-grey"> <a href="#" class="w3-bar-item w3-button">Home</a> <a href="#" class="w3-bar-item w3-button w3-hover-green">Link 1</a> <a href="#" class="w3-bar-item w3-button w3-hover-blue">Link 2</a> <a href="#" class="w3-bar-item w3-button w3-hover-teal">Link 3</a> </div>
배경색 대신 텍스트 색상을 변경하려면 w3-hover-none 클래스를 사용하여 기본 호버 효과를 끄고 w3-hover-text 클래스를 추가한다.
예제
<div class="w3-bar w3-border w3-black"> <a href="#" class="w3-bar-item w3-button">Default</a> <a href="#" class="w3-bar-item w3-button w3-hover-none w3-text-grey w3-hover-text-white">Link 1</a> <a href="#" class="w3-bar-item w3-button w3-hover-none w3-text-grey w3-hover-text-white">Link 2</a> <a href="#" class="w3-bar-item w3-button w3-hover-none w3-text-grey w3-hover-text-white">Link 3</a> </div>
다양한 호버 효과를 가지고 놀면서 시간을 보내보자.
예제
<div class="w3-bar"> <a href="#" class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-black">Link 1</a> <a href="#" class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-black">Link 2</a> <a href="#" class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-black">Link 3</a> </div>
오른쪽 정렬 링크
특정 링크를 오른쪽 정렬하려면 목록 항목에 w3-right 클래스를 사용한다.
예제
<div class="w3-bar w3-border w3-light-grey"> <a href="#" class="w3-bar-item w3-button">Home</a> <a href="#" class="w3-bar-item w3-button">Link 1</a> <a href="#" class="w3-bar-item w3-button">Link 2</a> <a href="#" class="w3-bar-item w3-button w3-green w3-right">Link 3</a> </div>
내비게이션 바 크기
내비게이션 바 내부 링크의 글꼴 크기를 변경하려면 w3-size 클래스를 사용한다.
예제
<div class="w3-bar w3-green w3-large"> <div class="w3-bar w3-green w3-xlarge">
내비게이션 바 내부 각 링크의 패딩을 변경하려면 w3-padding 클래스를 사용한다.
예제
<div class="w3-bar w3-border w3-green"> <a href="#" class="w3-bar-item w3-button w3-padding-16">Home</a> <a href="#" class="w3-bar-item w3-button w3-padding-16">Link 1</a> <a href="#" class="w3-bar-item w3-button w3-padding-16">Link 2</a> <a href="#" class="w3-bar-item w3-button w3-padding-16">Link 3</a> </div>
⭐ 각 버튼 대신 내비게이션 바에 패딩을 추가할 수도 있다. 그러나 이렇게 하면 링크에 마우스를 올려도 전체 패딩이 적용되지 않는다.
예제
<div class="w3-bar w3-green w3-padding-16"></div>
CSS 너비 속성을 사용하여 링크 너비를 사용자 정의하자.
⭐ 작은 화면에서 링크를 100% 너비로 변환하려면 w3-mobile을 사용하자.
예제
<div class="w3-bar w3-dark-grey"> <a href="#" class="w3-bar-item w3-button w3-mobile w3-green" style="width:33%">Home</a> <a href="#" class="w3-bar-item w3-button w3-mobile" style="width:33%">Link 1</a> <a href="#" class="w3-bar-item w3-button w3-mobile" style="width:33%">Link 2</a> </div>
아이콘이 있는 내비게이션 바
예제
<div class="w3-bar w3-light-grey w3-border"> <a href="#" class="w3-bar-item w3-button w3-green"><i class="fa fa-home"></i></a> <a href="#" class="w3-bar-item w3-button"><i class="fa fa-search"></i></a> <a href="#" class="w3-bar-item w3-button"><i class="fa fa-envelope"></i></a> <a href="#" class="w3-bar-item w3-button"><i class="fa fa-globe"></i></a> <a href="#" class="w3-bar-item w3-button"><i class="fa fa-sign-in"></i></a> </div>
⭐ 위 예제의 “fa fa” 클래스는 “Font Awesome” 아이콘을 표시다.
내비게이션 바 텍스트
내비게이션 바 내부에 버튼 대신 텍스트를 원할 경우 w3-bar-item 클래스를 사용하여 버튼과 동일한 패딩을 얻을 수 있다.
예제
<div class="w3-bar w3-black"> <a href="#" class="w3-bar-item w3-button">Home</a> <a href="#" class="w3-bar-item w3-button">Link 1</a> <a href="#" class="w3-bar-item w3-button">Link 2</a> <a href="#" class="w3-bar-item w3-button">Link 3</a> <span class="w3-bar-item">Text</span> </div>
입력 및 버튼이 있는 내비게이션 바
예제
<div class="w3-bar w3-light-grey"> <a href="#" class="w3-bar-item w3-button">Home</a> <a href="#" class="w3-bar-item w3-button">Link 1</a> <a href="#" class="w3-bar-item w3-button">Link 2</a> <input type="text" class="w3-bar-item w3-input" placeholder="Search.."> <a href="#" class="w3-bar-item w3-button w3-green">Go</a> </div>
드롭다운이 포함된 내비게이션 바
“드롭다운” 링크 위로 마우스를 이동한다.
예제
<div class="w3-bar w3-light-grey">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<div class="w3-dropdown-hover">
<button class="w3-button">Dropdown</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>
</div>
클릭 가능한 드롭다운
마우스를 가져가는 대신 드롭다운 링크를 클릭하려면 w3-dropdown-click을 사용한다.
예제
<div class="w3-dropdown-click">
<button class="w3-button" onclick="myFunction()">
Dropdown <i class="fa fa-caret-down"></i>
</button>
<div id="demo" class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>
기본 예시
예제 보기수평 드롭다운 메뉴
드롭다운 링크를 수직이 아닌 수평으로 표시하려면 드롭다운 컨테이너에서 w3-bar-block 클래스를 제거한다.
예제
<div class="w3-bar w3-light-grey">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<div class="w3-dropdown-hover">
<button class="w3-button">Dropdown</button>
<div class="w3-dropdown-content w3-card-4">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>
</div>
반응형 드롭다운이 포함된 반응형 내비게이션 바
반응형 드롭다운 링크가 있는 반응형 탐색 모음을 만들려면 드롭다운 컨테이너를 포함한 모든 링크에서 w3-mobile 클래스를 사용한다.
효과를 보려면 브라우저 창 크기를 조정해보자.
예제
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button w3-mobile w3-green">Home</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 2</a>
<div class="w3-dropdown-hover w3-mobile">
<button class="w3-button">Dropdown <i class="fa fa-caret-down"></i></button>
<div class="w3-dropdown-content w3-bar-block w3-dark-grey">
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 3</a>
</div>
</div>
</div>
고정 내비게이션 바
사용자가 페이지를 스크롤하는 경우에도 탐색 모음을 페이지 상단이나 하단에 강제로 유지하려면 막대 주위에
요소를 래핑하고 w3 -top 또는 w3-bottom 클래스를 추가한다.
상단 고정
<div class="w3-top">
<div class="w3-bar">
...
...
</div>
</div>
기본 예시
예제 보기하단 고정
<div class="w3-bottom">
<div class="w3-bar">
...
...
</div>
</div>
기본 예시
예제 보기수직 내비게이션 바
w3-bar-block 클래스는 HTML 요소를 수직으로 표시하기 위한 컨테이너다.
예제
<div class="w3-bar-block w3-black"> <a href="#" class="w3-bar-item w3-button">Home</a> <a href="#" class="w3-bar-item w3-button">Link 1</a> <a href="#" class="w3-bar-item w3-button">Link 2</a> <a href="#" class="w3-bar-item w3-button">Link 3</a> </div>
내비게이션 바 축소
작은 화면에서 비게이션 바가 너무 많은 공간을 차지하고 기본적으로 세로로 표시하고 싶지 않은 경우 내비게이션 바의 특정 링크에 숨기기 및 표시 클래스를 사용할 수 있다.
아래 예시에서는 태블릿과 모바일 기기에 표시될 때 탐색 모음이 오른쪽 상단에 있는 버튼(☰)으로 대체되었다.
버튼을 클릭하면 탐색 모음의 링크가 수직으로 쌓인다.
예제
<div class="w3-bar w3-red"> <a href="#" class="w3-bar-item w3-button">Home</a> <a href="#" class="w3-bar-item w3-button w3-hide-small">Link 1</a> <a href="#" class="w3-bar-item w3-button w3-hide-small">Link 2</a> <a href="#" class="w3-bar-item w3-button w3-hide-small">Link 3</a> <a href="javascript:void(0)" class="w3-bar-item w3-button w3-right w3-hide-large w3-hide-medium" onclick="myFunction()">☰</a> </div> <div id="demo" class="w3-bar-block w3-red w3-hide w3-hide-large w3-hide-medium"> <a href="#" class="w3-bar-item w3-button">Link 1</a> <a href="#" class="w3-bar-item w3-button">Link 2</a> <a href="#" class="w3-bar-item w3-button">Link 3</a> </div>
기본 예시
예제 보기측면 내비게이션
w3-sidebar 클래스는 측면 내비게이션을 생성합니다.
예제
기본 예시
예제 보기참고
W3C School - W3.CSS Navigation Bars
공부 목적 블로그