SCSS Hamburger Menu

HTML

    <header class="header">

      <nav class="gnb">

        <ul class="gnb__list">

          <li>

            <a href="">다날</a>

            <ul class="gnb__list--sub">

              <li><a href="">다날소개</a></li>

              <li><a href="">인사말</a></li>

              <li><a href="">경영이념</a></li>

              <li><a href="">연혁/수상</a></li>

              <li><a href="">계열회사</a></li>

              <li><a href="">오시는길</a></li>

            </ul>

          </li>

          <li>

            <a href="">서비스</a>

            <ul class="gnb__list--sub">

              <li><a href="">휴대폰결제</a></li>

              <li><a href="">신용카드결제</a></li>

              <li><a href="">삼성페이휴대폰결제</a></li>

              <li><a href="">통합결제다모음</a></li>

              <li><a href="">유니온페이선불카드</a></li>

              <li><a href="">페이코인결제</a></li>

            </ul>

          </li>

          <li>

            <a href="">투자</a>

            <ul class="gnb__list--sub">

              <li><a href="">주가정보</a></li>

              <li><a href="">재무정보</a></li>

              <li><a href="">공시정보</a></li>

              <li><a href="">공고</a></li>

            </ul>

          </li>

          <li>

            <a href="">홍보</a>

            <ul class="gnb__list--sub">

              <li>

                <a href="">다날소식</a>

              </li>

              <li>

                <a href="">사회공헌</a>

              </li>

              <li>

                <a href="">CI소개</a>

              </li>

            </ul>

          </li>

          <li>

            <a href="">채용</a>

            <ul class="gnb__list--sub">

              <li><a href="">채용사이트</a></li>

            </ul>

          </li>

          <li>

            <a href="">윤리경영</a>

            <ul class="gnb__list--sub last">

              <li><a href="">윤리규정</a></li>

              <li><a href="">온라인신문고</a></li>

            </ul>

          </li>

        </ul>

      </nav>

      <button class="btn btn--all">

        <span></span>

        <span></span>

        <span></span>

      </button>

    </header>

 

 

SCSS

.header {

  position: fixed;

  width: 100%;

  $h: 60px;

  height: $h;

  background: grey;

  z-index: 99;

  top: 0;

  .btn--all {

    position: absolute;

    top: 0;

    right: 0;

    height: $h;

    width: $h;

    span {

      display: block;

      width: 30px;

      height: 2px;

      background-color: #111;

      position: absolute;

      left: 15px;

      transition: all 0.25s ease;

      &:nth-child(1) {

        top: 19px;

      }

      &:nth-child(2) {

        top: 29px;

      }

      &:nth-child(3) {

        top: 39px;

      }

    }

  }

  &.on {

    .btn--all {

      span {

        &:nth-child(1) {

          top: 29px;

          transform: rotate(45deg);

        }

        &:nth-child(2) {

          opacity: 0;

          transform: translateX(-50px);

        }

        &:nth-child(3) {

          top: 29px;

          transform: rotate(-45deg);

        }

      }

    }

    .gnb {

      left: 0;

    }

  }

  .gnb {

    position: fixed;

    width: 100%;

    height: 100%;

    background-color: white;

    left: 100%;

    transition: all 0.25s ease;

    &__list {

      > li {

        > a {

          height: 50px;

          display: flex;

          align-items: center;

          border-top: 1px solid #ccc;

          font-weight: 700;

          &:before {

            content: "";

            display: block;

            width: 3px;

            height: 3px;

            background-color: blue;

            border-radius: 10px;

            margin: 0 10px 0 20px;

          }

        }

      }

      &--sub {

        background-color: blue;

        color: white;

        display: none;

        transition: all 0.25s ease;

        &.on {

          display: block;

        }

        > li {

          a {

            display: flex;

            align-items: center;

            padding: 15px 0 15px 10px;

            font-size: 14px;

            border-top: 1px solid darken(blue, 10);

            &:before {

              content: "";

              display: block;

              width: 3px;

              height: 3px;

              background-color: white;

              border-radius: 10px;

              margin: 0 10px 0 20px;

            }

          }

        }

      }

    }

  }

}

 

 

JS

const btnAll = document.querySelector(".btn--all");

const header = document.querySelector(".header");

const depth01 = document.querySelectorAll(".gnb .gnb__list > li > a");

const depth02 = document.querySelectorAll(

  ".gnb .gnb__list > li > .gnb__list--sub"

);

const total = depth01.length;

for (let i = 0; i < total; i++) {

  depth01[i].addEventListener("click", function (e) {

    e.preventDefault();

    for (let j = 0; j < total; j++) {

      if (i !== j) {

        depth02[j].classList.remove("on");

      }

    }

    depth02[i].classList.toggle("on");

  });

}

btnAll.addEventListener("click", function () {

  const isContains = header.classList.contains("on");

  if (isContains) {

    header.classList.remove("on");

    setTimeout(function () {

      for (let i = 0; i < total; i++) {

        depth02[i].classList.remove("on");

      }

    }, 250);

  } else {

    header.classList.add("on");

  }

});

 

 

ON BROWSER(Before Click Event)

 

ON BROWSER(After Click Event)