読者です 読者をやめる 読者になる 読者になる

みかづきブログ その3

3ヶ月つづけてみました。

CSSのみでドロワーメニューをつくったぞい

f:id:kimizuka:20161208115900j:plain

DEMO

See the Pen Drawer Menu made from CSS only by kimmy (@kimmy) on CodePen.

チェックボックス、隣接セレクタ、checked擬似クラス、target擬似クラスを活用してJavaScript無しでの動作を実現しています。

HTML

<input id="btnMenu" type="checkbox" class="btn"/>
<nav id="menu"><a href="#a" class="btn">MENU_A</a><a href="#b" class="btn">MENU_B</a><a href="#c" class="btn">MENU_C</a><a href="#d" class="btn">MENU_D</a></nav>
<div id="a" class="result">A</div>
<div id="b" class="result">B</div>
<div id="c" class="result">C</div>
<div id="d" class="result">D</div>

SCSS

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // タップしたときの黒ずみをなくす
  -webkit-touch-callout: none; // 長押しでメニューを呼び出さなくする
  -webkit-user-select: none; // テキストを選択不可にする
}

html {
  height: 100%;
  color: #212121;
  font: 10px AvenirNext-Heavy;
}

body {
  height: 100%;
  background: #f8f8f2;
}

[href] {
  color: #212121;
  text-decoration: none;
}

.btn {
  cursor: pointer;
}

.result {
  visibilty: hidden;
  position: fixed;
  top: 50%; left: 50%;
  margin: -100px;
  width: 200px; height: 200px;
  font-size: 20rem;
  line-height: 200px;
  text-align: center;
  opacity: 0;
  // transition: all .2s ease-in-out;
}

#btnMenu {
  $lineMargin: 20px;
  $lineWidth: 28px;
  $lineHeight: 4px;
  $btnSize: $lineWidth + $lineMargin * 2;
  $color: #bdbdbd;

  display: block;
  position: fixed;
  margin: 0;
  border: 0;
  width: $btnSize; height: $btnSize;
  top: 0px; left: 0px;
  z-index: 5;
  transition: background .2s ease-in-out, width 0s .2s ease-in-out, height 0s .2s ease-in-out; // 閉じるときはワンテンポ遅らせる
  -webkit-appearance: none;

  &:focus {
    outline: none;
  }
  
  &:before {
    position: absolute;
    top: $btnSize / 2 - $lineHeight / 2; left: $lineMargin;
    width: $lineWidth; height: $lineHeight;
    background: $color;
    content: "";
    box-shadow: 0 -8px 0 $color, 0 8px 0 $color;
  }

  &:checked { // チェックがはいっているときは薄暗くして大きくする
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, .2);
    transition: background .2s ease-in-out;
  }
}

#menu {
  $width: 200px;

  position: fixed;
  top: 0; bottom: 0;
  left: -$width - 10;
  width: $width;
  background: #fff;
  overflow: hidden;
  z-index: 10;
  box-shadow: 0 0 2px rgba(0, 0, 0, .4);
  transition: left ease-in-out .2s;

  .btn {
    box-sizing: border-box;
    display: block;
    padding-left: 20px;
    width: $width - 10; height: 44px;
    font-size: 1.4rem;
    line-height: 44px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, .2);
  }

  &:before {
    box-sizing: border-box;
    display: block;
    margin-bottom: 10px;
    padding-left: 20px;
    border-bottom: solid 1px #bdbdbd;
    width: 100%; height: 60px;
    color: #bdbdbd;
    font-size: 2rem;
    content: "MENU";
    line-height: 60px;
  }

  &:after {
    box-sizing: border-box;
    display: block;
    position: absolute;
    bottom: 0; left: 0;
    padding-left: 20px;
    border-top: solid 1px #bdbdbd;
    width: 100%; height: 40px;
    color: #bdbdbd;
    font-size: 1rem;
    content: "© COPYRIGHT";
    line-height: 40px;
  }
  
  #btnMenu:checked + & { // チェックがはいっているときはメニューを開く
    left: 0;
  }
}

.result:target {
  visibilty: visible;
  opacity: 1;
}