みかづきブログ その3

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

メニューボタンと閉じるボタンをトグルさせる

DEMO


HTML

<div class="btn">
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
</div>

CSS

body {
  background: #333;
}

.btn {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  margin: auto;
  width: 44px; height: 44px;
  cursor: pointer;
  overflow: hidden;
  
  .line {
    position: absolute;
    left: 50%;
    margin: -1px -13px;
    width: 26px; height: 2px;
    background: #fff;
    transition: transform .5s ease-in-out;
    
    &:nth-child(1) {
      top: 15.5px;
      transform-origin: left top;
      transform: rotate(0deg);
    }

    &:nth-child(2) {
      top: 50%;
      transition: opacity .5s ease-in;
    }

    &:nth-child(3) {
      bottom: 15.5px;
      transform-origin: left center;
      transform: rotate(0deg);
    }
  }
  
  &.on {
    .line {
      &:nth-child(1) {
        transform: rotate(30deg);
      }

      &:nth-child(2) {
        opacity: 0;
        transition: opacity .25s ease-in;
      }

      &:nth-child(3) {
        transform: rotate(-30deg);
      }
    }
  }
}

JavaScript

(function(win, doc) {
  
  "use strict";
  
  doc.querySelector(".btn").addEventListener("click", function() {
    this.classList.toggle("on");
  }, false);
  
})(this, document);

完成度は低いですがまずはここからですね。