CSS 내비게이션드로워 푸시

1 개요

CSS 내비게이션 드로워
CSS 슬라이드 메뉴

슬라이드 메뉴가 왼쪽에서 밀려들어옴

슬라이드 메뉴 등장시에 원래 페이지도 함께 오른쪽으로 이동

숨겨진 checkbox의 checked 상태에 따라 슬라이드 메뉴가 토글됨

<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">&equiv;</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>

2 같이 보기