CSS 내비게이션드로워 푸시

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">&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 같이 보기[ | ]