【CSS入門】爆速！LPコーディング効率化パーツ–ハンバーガーメニュー

こんなお悩み有りませんか

結論：このコードのコメント部分を書き換えよう

See the Pen hambergar by aimeimm (@aimeimm) on CodePen.

html

           <button class="drawer-icon js-drawer for-drawer" type="button" data-target="for-drawer">
                <span class="drawer-bars">
                    <span class="drawer-bar"></span>
                    <span class="drawer-bar"></span>
                    <span class="drawer-bar"></span>
                </span>
            </button><!-- /drawer-icon -->
            <div class="drawer-content-cover for-drawer">
                <ul>
                    <li><a href="">Card</a></li>
                    <li><a href="">News</a></li>
                    <li><a href="">Price</a></li>
                    <li><a href="">Access</a></li>
                    <li><a href="">Contact</a></li>
                </ul>
            </div><!-- /drawer-content -->

scss

  // ハンバーガーアイコン
  $drawer-bar-space: 4.5px;
  $drawer-bar-width: 27px;
  $drawer-bar-height: 2.25px;
  
  // -----
  // ドロワー
  // -----
  .drawer-icon {
    width: 70px;
    height: 70px;
    position: fixed;
    right: 0px;
    top: -20px;
    z-index: 30;
    text-align: center;
    cursor: pointer;
    transition: all 0.5s ease 0s;
    background: transparent;
    box-shadow: none;
    border: none;
    padding: 0;
  
    @include f.mq('sp') {
        display: block;
  
    }
  }
  
  .drawer-bars {
    display: inline-block;
    width: $drawer-bar-width;
    height: $drawer-bar-height + ($drawer-bar-space + $drawer-bar-height) * 2;
    position: relative;
    vertical-align: bottom;
  
  }
  
  .drawer-bar {
    position: absolute;
    right: 0;
    left: 0;
    display: block;
    background: #023E78;
    width: 100%;
    height: $drawer-bar-height;
    border-radius: 20px;
    transition: all 0.5s linear 0s;
    margin-top: 15px;
  
    &:nth-of-type(1) {
        top: 0;
    }
  
    &:nth-of-type(2) {
        top: $drawer-bar-space + $drawer-bar-height;
    }
  
    &:nth-of-type(3) {
        top: ($drawer-bar-space + $drawer-bar-height) * 2;
    }
  
    .is-checked & {
        &:nth-of-type(1) {
            top: 10px;
            transform: rotate(-45deg);
            background: #fff;
        }
  
        &:nth-of-type(2) {
            background: transparent;
  
        }
  
        &:nth-of-type(3) {
            top: 10px;
            transform: rotate(45deg);
            background: #fff;
        }
    }
  }
  
  .drawer-content-cover {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    transform: translateX(0);
    top: 0;
    right: 0;
    bottom: auto;
    width: 100%;
    height: 100%;
    max-width: 100%;
    transition: all 0.5s linear 0s;
    background: #023e78;
    z-index: 29;
    padding-top: 96px;
  
    &.is-checked {
        visibility: visible;
        opacity: 1;
    }
  
    ul {
        list-style: none;
        margin: 0 auto;
        padding: 0;
        width: 300px;
        max-width: 100%;
  
  
        li {
            a {
                text-align: center;
                font-size: 16px;
                text-decoration: none;
                display: block;
                position: relative;
                padding: 25px;
                color: #fff;
  
            }
  
        }
  
    }
  }
  
  .menu-dorawer-container {
    li {
        &:last-child {
            border: solid 2px #fff;
            background-color: #fff;
  
            margin: 10px 0;
  
            a {
                font-weight: bold;
                color: #002a52;
            }
        }
  
        &:nth-last-child(2) {
            border: solid 1px #fff;
  
            margin: 10px 0 30px 0;
        }
    }
  }
  
  

パーツを楽しく習得していこう

コーディングに自信がつくよう、簡単なコツで解決できる勉強法について発信していきますので、フォロー宜しくお願いします。これはスクロールバーの作り方です。