1 개요[ | ]
- CSS sidenav push
- CSS 내비게이션 드로워
- CSS 슬라이드 메뉴
- 슬라이드 메뉴가 왼쪽에서 밀려들어옴
- 슬라이드 메뉴 등장시에 원래 페이지도 함께 오른쪽으로 이동
- 숨겨진 checkbox의 checked 상태에 따라 슬라이드 메뉴가 토글됨
html
Copy
<style>
html, body { height: 100%; }
body {
margin: 0;
overflow-x: hidden;
display: flex;
}
#hamburger { display: none; }
#hamburger ~ * {
position: absolute;
transition: transform 0.4s;
}
#hamburger:checked ~ * { transform: translate3d(200px, 0, 0); }
#hamburger ~ label {
font-size: 54px;
top: -16px; left: 8px;
cursor: pointer;
z-index: 1;
}
#hamburger ~ nav {
background: black;
width: 200px;
left: -200px;
height: 100%;
}
#hamburger ~ nav * {
margin: 0; padding: 0;
color: white;
}
#hamburger ~ nav header {
background: teal;
padding: 1em;
}
#hamburger ~ nav a {
display: block;
text-decoration: none;
padding: 1em;
}
#hamburger ~ nav a:hover { background: gray; }
#content {
position: relative;
padding: 2.6em 1em 1em;
width: 100%;
background: silver;
}
</style>
<body>
<input id="hamburger" type="checkbox" /><label for="hamburger">≡</label>
<nav>
<header>메뉴</header>
<ul>
<li><a href="#">한놈</a></li>
<li><a href="#">두시기</a></li>
<li><a href="#">석삼</a></li>
</ul>
</nav>
<div id="content">
<h1>CSS 슬라이드 메뉴 예제</h1>
<p>우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데 이런 이유로 어리석은 백성이 말하고자 하는 바가 있어도 마침내 제 뜻을 능히 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨 새로 스물여덟 자를 만드니 사람마다 하여금 쉽게 익혀 매일 쓰기에 편안하게 하고자 할 따름이다.</p>
</div>
</body>