최신 웹 개발 튜토리얼
 

W3.CSS사이드 탐색


수직 네비게이션

측면 탐색, 당신은 몇 가지 옵션이 있습니다 :

  • 항상 페이지 내용의 왼쪽에있는 탐색 창을 표시합니다.
  • 축소, "완전 자동"응답 측면 탐색을 사용합니다.
  • 페이지 내용의 왼쪽 부분을 숨기고, 탐색 창을 엽니 다.
  • 페이지의 모든 콘텐츠를 숨기고, 탐색 창을 엽니 다.
  • 탐색 창을 열 때 오른쪽에 페이지의 콘텐츠를 이동.

예 : 항상 사이드 탐색 표시

<nav class="w3-sidenav w3-white" style="width:25%">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
</nav>

<div style="margin-left:25%">
... page content ...
</div>
»그에게 자신을보십시오

축소 응답 Sidenav

<nav class="w3-sidenav w3-collapse w3-white" style="width:200px">
  <a href="#" onclick="w3_close()" class="w3-closenav w3-hide-large">Close &times;</a>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</nav>

<div class="w3-main" style="margin-left:200px">
 <span class="w3-opennav w3-hide-large" onclick="w3_open()">&#9776;</span>
  ... page content ...
</div>

<script>
function w3_open() {
  document.getElementsByClassName(" w3-sidenav ")[ 0 ].style.display = " block ";
}
function w3_close() {
  document.getElementsByClassName(" w3-sidenav ")[ 0 ].style.display = " none ";
}
</script>
»그에게 자신을보십시오

여 탐색 창은 내용의 일부를 숨기기

function w3_open() {
    document.getElementsByClassName("w3-sidenav")[0].style.display = "block";
}
function w3_close() {
    document.getElementsByClassName("w3-sidenav")[0].style.display = "none";
}
»그에게 자신을보십시오

탐색 창을 열고 모든 컨텐츠 숨기기

function w3_open() {
    document.getElementsByClassName("w3-sidenav")[0].style.width = "100%";
    document.getElementsByClassName("w3-sidenav")[0].style.display = "block";
}
function w3_close() {
    document.getElementsByClassName("w3-sidenav")[0].style.display = "none";
}
»그에게 자신을보십시오

오른쪽에있는 내용을 이동

function w3_open() {
  document.getElementById("main").style.marginLeft = "25%";
  document.getElementsByClassName("w3-sidenav")[0].style.width = "25%";
  document.getElementsByClassName("w3-sidenav")[0].style.display = "block";
  document.getElementsByClassName("w3-opennav")[0].style.display = 'none';
}
function w3_close() {
  document.getElementById("main").style.marginLeft = "0%";
  document.getElementsByClassName("w3-sidenav")[0].style.display = "none";
  document.getElementsByClassName("w3-opennav")[0].style.display = "inline-block";
}
»그에게 자신을보십시오

측면 탐색 스타일링

배경 색상을 변경하려면 W3-sidenav에 w3- 색상 클래스를 추가합니다. 활성 / 현재 링크를 원하는 경우, 사용자가 그 / 그녀가 켜져있을뿐만 아니라 링크 중 하나에 w3- 색상 클래스를 추가하는 페이지 알려합니다 :

<nav class="w3-sidenav w3-light-grey">
  <a class="w3-green" href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</nav>
»그에게 자신을보십시오

경계가 측면 탐색

sidenav 주위에 테두리를 추가 할 수 W3 국경 클래스를 사용 :

<nav class="w3-sidenav w3-border">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</nav>
»그에게 자신을보십시오

링크 분배기를 만들 수있는 링크에 W3 국경 바닥 클래스를 추가 :

<nav class="w3-sidenav w3-border">
  <a class="w3-border-bottom" href="#">Link 1</a>
  <a class="w3-border-bottom" href="#">Link 2</a>
  <a href="#">Link 3</a>
</nav>
»그에게 자신을보십시오

카드로 sidenav을 표시 할 수 W3 카드 클래스를 사용 :

<nav class="w3-sidenav w3-card-8">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</nav>
»그에게 자신을보십시오

Hoverable 링크

때 sidenav 내부의 링크를 통해 사용자가 마우스, 배경 색상은 회색으로 변경됩니다.

당신이 가져가에 다른 배경 색상을 원하는 경우, W3-호버 색상 클래스 중 하나를 사용하십시오

<nav class="w3-sidenav">
  <a class="w3-hover-black" href="#">Link 1</a>
  <a class="w3-hover-green" href="#">Link 2</a>
  <a class="w3-hover-blue" href="#">Link 3</a>
  <a class="w3-hover-red" href="#">Link 4</a>
</nav>
»그에게 자신을보십시오

당신은 W3-가져가 - 없음 클래스와 기본 호버 효과를 해제 할 수 있습니다. 만 가져가 텍스트 색상 (그리고 배경 색상)을 강조하고자 할 때 자주 사용된다 :

<nav class="w3-sidenav">
  <a class="w3-hover-none w3-hover-text-grey" href="#">Link 1</a>
  <a class="w3-hover-none w3-hover-text-green" href="#">Link 2</a>
  <a class="w3-hover-none w3-hover-text-teal" href="#">Link 3</a>
  <a class="w3-hover-none w3-hover-text-orange" href="#">Link 4</a>
</nav>
»그에게 자신을보십시오

사이드 탐색 크기

증가 글꼴 크기 (W3 대형 등) :

증가 패딩 (W3-패딩 등) :

<nav class="w3-sidenav w3-large">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</nav>
»그에게 자신을보십시오

아이콘과 사이드 탐색

<nav class="w3-sidenav w3-black" style="width:70px">
  <a href="#"><i class="fa fa-home w3-xxlarge"></i></a>
  <a href="#"><i class="fa fa-search w3-xxlarge"></i></a>
  <a href="#"><i class="fa fa-envelope w3-xxlarge"></i></a>
  <a href="#"><i class="fa fa-globe w3-xxlarge"></i></a>
</nav>
»그에게 자신을보십시오

드롭 다운과 측면 탐색

<nav class="w3-sidenav w3-light-grey">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <div class="w3-dropdown-hover">
    <a 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>
  </div>
  <a href="#">Link 3</a>
</nav>
»그에게 자신을보십시오

팁 : 드롭 다운 메뉴는 "오픈"인 경우, 드롭 다운 링크가 활성화되어 있음을 나타 내기 위해 회색 배경 색을 가져옵니다. 이를 무시하려면, 모두 "드롭 다운"<리>와 <A>에 W3-호버 색 클래스를 추가 할 수 있습니다.


아코디언과 사이드 탐색

<nav class="w3-sidenav w3-light-grey w3-card-2" style="width:200px;">
  <a href="#">Link</a>
  <div class="w3-accordion">
    <a onclick="myAccFunc()" href="#">Accordion</a>
    <div id="demoAcc" class="w3-accordion-content w3-white w3-card-4">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
  <div class="w3-dropdown-click">
    <a onclick="myDropFunc()" href="#">Dropdown</a>
    <div id="demoDrop" 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>
  </div>
  <a href="#">Link</a>
  <a href="#">Link</a>
</nav>

»그것을 자신을 시도


애니메이션 Sidenav

, 측면 탐색에서 확대 또는 슬라이드 퇴색 할 W3-animate- 클래스 중 하나를 사용 :

<nav class="w3-sidenav w3-animate-left">
»그에게 자신을보십시오

Sidenav 오버레이

W3 오버레이 클래스는 sidenav을 열 때 오버레이 효과를 생성하는데 사용될 수있다. 이 효과 것 "하이라이트"측면 탐색 - W3 오버레이 클래스는 "페이지 내용"에 50 %의 불투명도와 검은 배경을 추가합니다.

<!-- Sidenav -->
<nav class="w3-sidenav w3-white w3-animate-left" style="display:none;z-index:4">
  <a href="javascript:void(0)" onclick="w3_close()" class="w3-closenav">Close</a>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
</nav>

<!-- Overlay -->
<div class="w3-overlay" onclick="w3_close()" style="cursor:pointer"></div>

<!-- Page content -->
<div class="w3-container">
  <span class="w3-opennav" onclick="w3_open()">☰</span>
</div>

<!-- JS to open and close sidenav with overlay effect -->
<script>
function w3_open() {
  document.getElementsByClassName("w3-sidenav")[0].style.display = "block";
  document.getElementsByClassName("w3-overlay")[0].style.display = "block";
}

function w3_close() {
  document.getElementsByClassName("w3-sidenav")[0].style.display = "none";
  document.getElementsByClassName("w3-overlay")[0].style.display = "none";
}
</script>
»그에게 자신을보십시오

Sidenav 내용

당신은 측면 탐색 내부에 원하는대로 추가

<nav class="w3-sidenav w3-light-grey" style="width:50%">
  <div class="w3-container w3-dark-grey">
    <h4>Menu</h4>
  </div>

  <img src="img_fjords.jpg">

  <a class="w3-red" href="#">Home</a>
  <a href="#">Projects
    <span class="w3-tag w3-red w3-round w3-right">8</span>
  </a>
  <a href="#">About</a>
  <a href="#">Contact</a>

  <div class="w3-container">
    <div class="w3-border w3-round w3-padding w3-blue-grey">
      <span class="w3-closebtn">x</span>
      <p>Lorem ipsum box...</p>
    </div>
  </div>
</nav>
»그에게 자신을보십시오