w3.css
반응형 사이드바
CSS를 사용하여 반응형 측면 탐색 메뉴를 만드는 방법을 알아보자.
반응형 사이드바 만들기
1단계) HTML 추가
<!-- The sidebar --> <div class="sidebar"> <a class="active" href="#home">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> <a href="#about">About</a> </div> <!-- Page content --> <div class="content"> .. </div>
2단계) CSS 추가
/* The side navigation menu */ .sidebar { margin: 0; padding: 0; width: 200px; background-color: #f1f1f1; position: fixed; height: 100%; overflow: auto; } /* Sidebar links */ .sidebar a { display: block; color: black; padding: 16px; text-decoration: none; } /* Active/current link */ .sidebar a.active { background-color: #04AA6D; color: white; } /* Links on mouse-over */ .sidebar a:hover:not(.active) { background-color: #555; color: white; } /* Page content. The value of the margin-left property should match the value of the sidebar's width property */ div.content { margin-left: 200px; padding: 1px 16px; height: 1000px; } /* On screens that are less than 700px wide, make the sidebar into a topbar */ @media screen and (max-width: 700px) { .sidebar { width: 100%; height: auto; position: relative; } .sidebar a {float: left;} div.content {margin-left: 0;} } /* On screens that are less than 400px, display the bar vertically, instead of horizontally */ @media screen and (max-width: 400px) { .sidebar a { text-align: center; float: none; } }
기본 예시
예제 보기참고
W3C School - How TO - Responsive Sidebar