W3.CSS 탐색 모음

수직의:

수평의:

집 링크 1

집 링크 1 텍스트

W3.CSS 탐색 모음 클래스

W3.CSS는 탐색 모음에 대해 다음 클래스를 제공합니다.

등급	정의
w3-바	HTML 요소용 수평 컨테이너
w3-바-블록	HTML 요소용 수직 컨테이너
w3-bar-항목	컨테이너 바 요소
w3 사이드바	HTML 요소용 세로 사이드바
w3-모바일	모든 바 요소를 모바일 우선 반응형으로 만듭니다.
w3-dropdown-hover	호버블 드롭다운 요소
w3 드롭다운 클릭	클릭 가능한 드롭다운 요소(호버 대신)

기본 탐색

w3-bar 클래스 는 HTML 요소를 가로로 표시하기 위한 컨테이너입니다.

w3-bar-item 클래스는 컨테이너 요소를 정의합니다 .

탐색 모음을 만들기 위한 완벽한 도구입니다.

집 링크 1 링크 2 링크 3

예시

반응형 탐색

w3-mobile 클래스는 모든 막대 요소를 반응형으로 만듭니다 ( 큰 화면에서는 가로로, 작은 화면에서는 세로로).

중대형 화면:

집 링크 1 링크 2

작은 화면:

집 링크 1 링크 2

예시

컬러 탐색 모음

w3-color 클래스를 사용 하여 탐색 모음에 색상을 추가합니다.

집 링크 1 링크 2 링크 3

예시

테두리가 있는 탐색 모음

w3-border 또는 w3-card 클래스를 사용 하여 탐색 모음 주위에 테두리를 추가하거나 카드로 표시합니다.

집 링크 1 링크 2 링크 3

예시

활성/현재 링크

링크에 w3-color 클래스를 추가 하여 강조 표시합니다.

집 링크 1 링크 2 링크 3

예시

호버링 링크

버튼 위에 마우스를 올리면 배경색이 회색으로 바뀝니다.

호버에서 다른 배경색을 원하면 w3- hover- color 클래스 중 하나를 사용하십시오.

집 링크 1 링크 2 링크 3

예시

대신 텍스트 색상을 변경하려면 w3-hover-none 클래스 로 기본 호버 효과를 끄고 w3-hover-text 클래스를 추가하십시오.

집 링크 1 링크 2 링크 3

예시

<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>

시간을 할애하여 다양한 호버 효과를 사용해 보세요.

링크 1 링크 2 링크 3

예시

오른쪽 정렬 링크

목록 항목에서 w3-right 클래스를 사용 하여 특정 링크를 오른쪽 정렬합니다.

집 링크 1 링크 2 링크 3

예시

탐색 모음 크기

w3-size 클래스를 사용하여 탐색 모음 내 링크의 글꼴 크기를 변경합니다.

집 링크 1 링크 2 링크 3

예시

w3-padding 클래스를 사용 하여 탐색 모음 내 각 링크의 패딩을 변경합니다.

집 링크 1 링크 2 링크 3

예시

참고: 각 버튼 대신 탐색 모음에 패딩을 추가할 수도 있습니다. 그러나 이렇게 하면 링크가 호버링 시 전체 패딩을 얻지 못합니다.

집 링크 1 링크 2

예시

CSS 너비 속성으로 링크 너비 사용자 지정

( 참고 : w3-mobile 을 사용하여 작은 화면에서 링크를 100% 너비로 변환):

집 링크 1 링크 2

집 링크 1 집 링크 1

예시

아이콘이 있는 탐색 모음

예시

위의 예에서 "fa fa" 클래스는 "Font Awesome" 아이콘을 표시합니다.

W3.CSS 아이콘 장에서 아이콘을 표시하는 방법에 대해 자세히 알아보세요 .

탐색 표시줄 텍스트

탐색 모음 내부에 버튼 대신 텍스트를 원하면 w3-bar-item 클래스를 사용하여 버튼과 동일한 패딩을 가져옵니다.

집 링크 1 링크 2 링크 3 텍스트

예시

입력 및 버튼이 있는 Navbar

집 링크 1 링크 2

예시

드롭다운이 있는 탐색 모음

"드롭다운" 링크 위로 마우스를 이동합니다.

집 링크 1

예시

<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 을 사용하십시오.

집 링크 1

예시

<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 클래스를 제거합니다.

집 링크 1

예시

<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>

반응형 드롭다운이 있는 반응형 Navbar

드롭다운 컨테이너를 포함한 모든 링크에서 w3-mobile 클래스를 사용하여 반응형 드롭다운 링크가 있는 반응형 탐색 모음을 만듭니다.

효과를 보려면 브라우저 창의 크기를 조정합니다.

집 링크 1 링크 2

예시

<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>

Fixed Navigation Bar

To force the navigation bar to stay at the top or at the bottom of the page, even when the user scrolls the page, wrap a <div> element around the bar and add the w3-top or w3-bottom class:

Fixed Top

Fixed Bottom

Vertical Navigation Bar

The w3-bar-block class is a container for displaying HTML elements vertically.

Home Link 1 Link 2 Link 3

Example

Collapsing the Navigation Bar

When the navigation bar takes up too much space on a small screen, and you do not want to display it vertically by default, you can use hide and show classes on specific links in the navigation bar.

In the example below, the navigation bar is replaced with a button (☰) in the top right corner when shown on tablets and mobile devices. When the button is clicked, the links in the navigation bar will vertically stack:

Example

Side Navigation

The w3-sidebar class creates a side navigation:

Go to the next chapter to learn more about the side navigation.

❮ Previous Next ❯

W3.CSS

W3.CSS 색상

웹 구축

예

참고문헌

W3.CSS 탐색 모음

W3.CSS 탐색 모음 클래스

기본 탐색

예시

반응형 탐색

예시

컬러 탐색 모음

예시

테두리가 있는 탐색 모음

예시

활성/현재 링크

예시

호버링 링크

예시

예시

예시

오른쪽 정렬 링크

예시

탐색 모음 크기

예시

예시

예시

예시

아이콘이 있는 탐색 모음

예시

탐색 표시줄 텍스트

예시

입력 및 버튼이 있는 Navbar

예시

드롭다운이 있는 탐색 모음

예시

클릭 가능한 드롭다운

예시

수평 드롭다운 메뉴

예시

반응형 드롭다운이 있는 반응형 Navbar

예시

Fixed Navigation Bar

Fixed Top

Fixed Bottom

Vertical Navigation Bar

Example

Collapsing the Navigation Bar

Example

Side Navigation