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>
기본 예시
예제 보기참고
W3C School - W3.CSS Sidebar
공부 목적 블로그