SCSS 내비게이션드로워 오버레이

1 개요[ | ]

SCSS sidenav overlay
SCSS 내비게이션 드로워 오버레이
SCSS 슬라이드 메뉴 오버레이

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

슬라이드 메뉴 등장시, 원래 페이지는 원위치에서 이동하지 않고 어두워짐

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

2 HTML[ | ]

<body>
  <input id="hamburger" type="checkbox" /><label class="sliding" for="hamburger">&equiv;</label>
  <nav class="sliding">
    <header>메뉴</header>
    <ul>
      <li><a href="#">한놈</a></li>
      <li><a href="#">두시기</a></li>
      <li><a href="#">석삼</a></li>
    </ul>
  </nav>
  <div id="dark-screen"></div>
  <div id="content">
    <h1>SCSS 슬라이드 메뉴 예제</h1>
    <p>우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데 이런 이유로 어리석은 백성이 말하고자 하는 바가 있어도 마침내 제 뜻을 능히 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨 새로 스물여덟 자를 만드니 사람마다 하여금 쉽게 익혀 매일 쓰기에 편안하게 하고자 할 따름이다.</p>
  </div>
</body>

3 SCSS[ | ]

$slide_width: 200px;
html, body { height: 100%; }
body {
  margin: 0;
  overflow-x: hidden;
  display: flex;
}

#dark-screen { display: none; }
#hamburger {
  display: none;
  & ~ * {
    position: absolute;
    transition: transform .4s;
  }
  &:checked ~ .sliding {
    transform: translate3d($slide_width, 0, 0);
  }
  &:checked ~ #dark-screen {
    z-index: 2;
    display: inline;
    background:rgba(0, 0, 0, 0.5);
    position: absolue;
    height: 100%; width: 100%;
  }
  & ~ label {
    font-size: 54px;
    top: -16px; left: 8px;
    cursor: pointer;
    z-index: 3;
  }
  & ~ nav {
    background: black;
    width: $slide_width;
    left: -$slide_width;
    z-index: 4;
    height: 100%;
    * {
      margin: 0; padding: 0;
      color: white;
    }
    header { 
      background: teal;
      padding: 1em;
    }
    a {
      display: block;
      text-decoration: none;
      padding: 1em;
      &:hover { background: gray; }
    }
  }
}

#content {
  position: relative;
  padding: 2.6em 1em 1em;
  width: 100%;
  background: silver;
}

4 실행결과[ | ]

5 같이 보기[ | ]