여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. w3.css - 사이드바
w3.css – 사이드바
3개월전 작성
4개월전 수정

w3.css

사이드바

사이드바에는 다음과 같은 몇 가지 옵션이 있다.

  • 항상 페이지 콘텐츠 왼쪽에 사이드바를 표시
  • 접을 수 있는 ‘완전 자동’ 반응형 사이드바 사용
  • 페이지 콘텐츠 왼쪽 부분에 사이드바 열기
  • 모든 페이지 콘텐츠에 대한 사이드바 열기
  • 탐색 창을 열 때 페이지 콘텐츠를 오른쪽으로 슬라이드
  • 왼쪽 대신 오른쪽에 사이드바 표시

항상 사이드바 표시

사이드바는 항상 표시된다.

예제
<div class="w3-sidebar w3-bar-block" style="width:25%">
  <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 style="margin-left:25%">
... page content ...
</div>
기본 예시
예제 보기

콘텐츠 일부에 대한 사이드바 탐색 열기

☰ 기호를 클릭하면 사이드바가 열린다(일부 페이지 콘텐츠가 오버레이됨).

예제
function w3_open() {
  document.getElementById("mySidebar").style.display = "block";
}

function w3_close() {
  document.getElementById("mySidebar").style.display = "none";
}
기본 예시
예제 보기

콘텐츠에 대한 사이드바 탐색 열기

사이드바를 열려면 ☰ 기호를 클릭하자(페이지 콘텐츠 오버레이).

예제
function w3_open() {
  document.getElementById("mySidebar").style.width = "100%";
  document.getElementById("mySidebar").style.display = "block";
}

function w3_close() {
  document.getElementById("mySidebar").style.display = "none";
}
기본 예시
예제 보기

접이식 반응형 사이드바 탐색

이 사이드바는 항상 992px보다 넓은 화면에 표시되며, 작은 화면에서는 숨겨져 있다(클릭 가능한 메뉴 아이콘(☰)으로 대체됨).

예제
<div class="w3-sidebar w3-bar-block w3-collapse w3-card" style="width:200px;" id="mySidebar">
  <button class="w3-bar-item w3-button w3-hide-large"
  onclick="w3_close()">Close ×</button>
  <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-main" style="margin-left:200px">

<div class="w3-teal">
  <button class="w3-button w3-teal w3-xlarge" onclick="w3_open()">☰</button>
  <div class="w3-container">
    <h1>My Page</h1>
  </div>
  </div>
</div>

<script>
function w3_open() {
  document.getElementById("mySidebar").style.display = "block";
}

function w3_close() {
  document.getElementById("mySidebar").style.display = "none";
}
</script>
기본 예시
예제 보기

예제

기본 예시
예제 보기

페이지 내용을 오른쪽으로 슬라이드

☰ 기호를 클릭하면 사이드바가 열립니다(콘텐츠가 오른쪽으로 슬라이드됩니다).

예제
function w3_open() {
  document.getElementById("main").style.marginLeft = "25%";
  document.getElementById("mySidebar").style.width = "25%";
  document.getElementById("mySidebar").style.display = "block";
  document.getElementById("openNav").style.display = 'none';
}

function w3_close() {
  document.getElementById("main").style.marginLeft = "0%";
  document.getElementById("mySidebar").style.display = "none";
  document.getElementById("openNav").style.display = "inline-block";
}
기본 예시
예제 보기

오른쪽 사이드바 탐색

오른쪽 사이드바.

예제
<div class="w3-sidebar w3-bar-block" style="width:25%;right:0">
  <h5 class="w3-bar-item">Menu</h5>
  <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 style="margin-right:25%">
... page content ...
</div>
기본 예시
예제 보기

오른쪽 접이식 사이드바

이 사이드바는 항상 992px보다 넓은 화면에 표시되며, 작은 화면에서는 숨겨져 있다(클릭 가능한 메뉴 아이콘(☰)으로 대체됨).

예제
<div class="w3-sidebar w3-bar-block w3-collapse" style="width:200px;right:0" id="mySidebar">
  <button class="w3-bar-item w3-button w3-hide-large"
  onclick="w3_close()">Close ×</button>
  <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-main" style="margin-right:200px">
<div class="w3-teal">
  <button class="w3-button w3-teal w3-xlarge w3-right w3-hide-large" onclick="w3_open()">☰</button>
  <div class="w3-container">
    <h2>My Page</h2>
  </div>
</div>

</div>

<script>
function w3_open() {
  document.getElementById("mySidebar").style.display = "block";
}

function w3_close() {
  document.getElementById("mySidebar").style.display = "none";
}
</script>
기본 예시
예제 보기

왼쪽 및 오른쪽 사이드바

예제
<div class="w3-sidebar w3-bar-block w3-card w3-animate-left" style="display:none" id="leftMenu">
  <button onclick="closeLeftMenu()" class="w3-bar-item w3-button w3-large">Close ×</button>
  <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-sidebar w3-bar-block w3-card w3-animate-right" style="display:none;right:0;" id="rightMenu">
  <button onclick="closeRightMenu()" class="w3-bar-item w3-button w3-large">Close ×</button>
  <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-teal">
  <button class="w3-button w3-teal w3-xlarge w3-left" onclick="openLeftMenu()">☰</button>
  <button class="w3-button w3-teal w3-xlarge w3-right" onclick="openRightMenu()">☰</button>
  <div class="w3-container">
    <h1>My Page</h1>
  </div>
</div>

<div class="w3-container">
<p>In this example, we demonstrate how to use two side navigations.</p>
<p>We have created two "menu" buttons: one to open the side navigation from the left and one to open it from the right.</p>
</div>
     
<script>
function openLeftMenu() {
  document.getElementById("leftMenu").style.display = "block";
}

function closeLeftMenu() {
  document.getElementById("leftMenu").style.display = "none";
}

function openRightMenu() {
  document.getElementById("rightMenu").style.display = "block";
}

function closeRightMenu() {
  document.getElementById("rightMenu").style.display = "none";
}
</script>
기본 예시
예제 보기

사이드바 탐색 스타일 지정

배경색을 변경하려면 w3-sidebar에 w3-color 클래스를 추가한다.
활성/현재 링크를 원하는 경우 사용자에게 자신이 현재 있는 페이지를 알려주려면 링크 중 하나에 w3-color 클래스를 추가하자.

예제
<div class="w3-sidebar w3-red">
기본 예시
예제 보기

테두리가 있는 사이드바 탐색

사이드바 탐색 주위에 테두리를 추가하려면 w3-border 클래스를 사용한다.

예제
<div class="w3-sidebar w3-border">
기본 예시
예제 보기

 

링크 구분선을 생성하려면 링크에 w3-border-bottom 클래스를 추가한다.

예제
<div class="w3-sidebar w3-bar-block">
  <a href="#" class="w3-bar-item w3-button w3-border-bottom">Link 1</a>
  <a href="#" class="w3-bar-item w3-button w3-border-bottom">Link 2</a>
  <a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
기본 예시
예제 보기

 

사이드바 탐색을 카드로 표시하려면 w3-card 클래스를 사용한다.

예제
<nav class="w3-sidebar w3-card">
기본 예시
예제 보기

호버링 가능한 링크

막대 블록 내부의 링크 위에 마우스를 올리면 배경색이 회색으로 변경된다.

마우스 오버 시 다른 배경색을 원하면 w3-hover-color 클래스 중 하나를 사용한다.

예제
<div class="w3-sidebar w3-bar-block">
  <a href="#" class="w3-bar-item w3-button w3-hover-black">Link 1</a>
  <a href="#" class="w3-bar-item w3-button w3-hover-green">Link 2</a>
  <a href="#" class="w3-bar-item w3-button w3-hover-blue">Link 3</a>
</div>
기본 예시
예제 보기

 

w3-hover-none 클래스를 사용하여 기본 호버 효과를 끌 수 있다.
이는 마우스 오버 시 배경색이 아닌 텍스트 색상만 강조 표시하려는 경우에 자주 사용된다.

예제
<div class="w3-sidebar w3-bar-block">
  <a href="#" class="w3-bar-item w3-button w3-hover-none w3-hover-text-grey">Link 1</a>
  <a href="#" class="w3-bar-item w3-button w3-hover-none w3-hover-text-green">Link 2</a>
  <a href="#" class="w3-bar-item w3-button w3-hover-none w3-hover-text-teal">Link 3</a>
</div>
기본 예시
예제 보기

사이드바 탐색 크기

커진 폰트 크기(w3-large 등):

 

패딩 증가(w3-padding 등):

예제
<div class="w3-sidebar w3-bar-block w3-large">
  <a href="#" class="w3-bar-item w3-button">Link</a>
  <a href="#" class="w3-bar-item w3-button">Link</a>
  <a href="#" class="w3-bar-item w3-button">Link</a>
</div>
기본 예시
예제 보기

아이콘이 있는 측면 탐색

예제
<div class="w3-sidebar w3-bar-block w3-black" style="width:70px">
  <a href="#" class="w3-bar-item w3-button"><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>
</div>
기본 예시
예제 보기

드롭다운이 포함된 사이드바

예제
<div class="w3-sidebar w3-bar-block">
  <a href="#" class="w3-bar-item w3-button">Link 1</a>
  <a href="#" class="w3-bar-item w3-button">Link 2</a>
  <div class="w3-dropdown-hover">
    <button class="w3-button">Dropdown <i class="fa fa-caret-down"></i></button>
    <div class="w3-dropdown-content w3-bar-block">
      <a href="#" class="w3-bar-item w3-button">Link</a>
      <a href="#" class="w3-bar-item w3-button">Link</a>
    </div>
  </div>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
기본 예시
예제 보기

⭐ 드롭다운 메뉴가 “열림”이면 드롭다운 링크의 배경색이 회색으로 표시되어 활성화되었음을 나타낸다. 이를 재정의하려면 “드롭다운” <div> 및 <a> 모두에 w3-hover-color 클래스를 추가한다.

아코디언이 포함된 사이드바

예제
<div class="w3-sidebar w3-light-grey w3-card" style="width:200px">
  <a href="#" class="w3-bar-item w3-button">Link 1</a>
  <button class="w3-button w3-block w3-left-align" onclick="myAccFunc()">Accordion</button>
  <div id="demoAcc" class="w3-bar-block w3-hide w3-white w3-card-4">
    <a href="#" class="w3-bar-item w3-button">Link</a>
    <a href="#" class="w3-bar-item w3-button">Link</a>
  </div>
  <div class="w3-dropdown-click">
    <button class="w3-button" onclick="myDropFunc()">Dropdown</button>
    <div id="demoDrop" class="w3-dropdown-content w3-bar-block w3-white w3-card-4">
      <a href="#" class="w3-bar-item w3-button">Link</a>
      <a href="#" class="w3-bar-item w3-button">Link</a>
    </div>
  </div>
  <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-sidebar w3-animate-left">
기본 예시
예제 보기

사이드바 오버레이

w3-overlay 클래스를 사용하면 사이드바를 열 때 오버레이 효과를 만들 수 있다.
w3-overlay 클래스는 “페이지 콘텐츠”에 50% 불투명도의 검정색 배경을 추가한다.
이 효과는 사이드바 탐색을 “강조 표시”한다.

예제
<!-- Sidebar -->
<div class="w3-sidebar w3-bar-block" style="display:none;z-index:5" id="mySidebar">
  <button class="w3-bar-item w3-button" onclick="w3_close()">Close</button>
  <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>

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

<!-- Page content -->
<button class="w3-button w3-xxlarge" onclick="w3_open()">☰</button>
<div class="w3-container">
  <h1>Sidebar Overlay</h1>
  <p>Click on the "hamburger" icon to slide in the side navigation.</p>
</div>

<!-- JS to open and close sidebar with overlay effect -->
<script>
function w3_open() {
  document.getElementById("mySidebar").style.display = "block";
  document.getElementById("myOverlay").style.display = "block";
}

function w3_close() {
  document.getElementById("mySidebar").style.display = "none";
  document.getElementById("myOverlay").style.display = "none";
}
</script>
기본 예시
예제 보기

사이드바 콘텐츠

사이드바 탐색 내부에 원하는 것을 추가하자.

예제
<div class="w3-sidebar w3-bar-block w3-light-grey" style="width:50%">
  <div class="w3-container w3-dark-grey">
    <h4>Menu</h4>
  </div>

  <img src="img_snowtops.jpg">

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

  <div class="w3-panel w3-blue-grey w3-display-container">
    <span class="w3-button w3-display-topright">X</span>
    <p>Lorem ipsum box...</p>
  </div>
 </div>
기본 예시
예제 보기
참고
Mingg`s Diary
밍구
공부 목적 블로그