A Pen by suzuki

Thumbnail
This awesome code was written by JunkiSuzuki, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright JunkiSuzuki ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  suzuki</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <meta name="viewport" content="width=device_width,initial_scale=1.0">
<section class="page_contents">
<input id="drawer-cb" type="checkbox">
<label id="drawer-icon" for="drawer-cb">button</label>
<label id="drawer-background" for="drawer-cb"></label>
  
  <div id="humberger-menu">
    <ul>
        <li>test1</li>
        <li>test2</li>
        <li>test3</li>
    </ul>
  </div> <!-- humberger-menu -->  

  
</section>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/JunkiSuzuki/a-pen-by-suzuki-BRNOOx */
.page_contents {
  width: 1200px;
  max-width: 100%;
  display: block;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
}

#menu-background {
    background-color: #333; /*黒背景*/
    display: block;
    height: 100%;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: all 0.3s linear 0s; /*0.3s はアニメーションにかかる時間*/
    width: 100%;
    z-index: -1;
}

#drawer-icon {
    background-color: #fff; /*アイコン部分背景色*/
    cursor: pointer;
    display: block;
    font-size: 50px; /*アイコン(フォント)サイズ*/
    line-height: 200px; /*縦位置中央化*/
    margin: 0 auto;  
    text-align: center;
    width: 50px; /*アイコン横幅*/
    transition: all 0.3s linear 0s; /*0.3s はアニメーションにかかる時間*/
    z-index: 1;
}

#humberger-menu {
    background-color: #aaa; /*メニュー背景色*/
    box-sizing: border-box;
    height: 100%;
    padding: 10px 40px; /*メニュー内左右上下余白*/
    position: fixed;
    left: -100%; /*メニュー横幅 width と合わせる*/
    top: 0;
    transition: transform 0.5s linear 0s; /*0.3s はアニメーションにかかる時間*/
    width: 100%; /*メニュー横幅*/
    z-index: -1;
}

#drawer-cb:checked ~ #humberger-menu,
#drawer-cb:checked ~ #drawer-icon {
    transform: translate(100%); /*メニュー本体横幅 width と合わせる*/
  z-index: 1;
}

#drawer-cb:checked ~ #drawer-background {
  opacity: 0.5;
  z-index: 1;
}

#drawer-cb:checked ~ #humberger-menu {
 transform: translate(100%);
 z-index: -1;
}



Comments