はじめに

お久しぶりです。 少しブログから遠ざかってました... それよりみなさん体調は大丈夫ですか? 大変な時期ですが、家でゆっくり過ごしてコロナの終息を待ちましょう。 さて、当ポートフォリオサイトにも使用しているスライドメニュー 。 今日は、そのスライドメニューをJavaScriptのみで実装していきます。今回は上からスライドするメニューを作りますが、CSSをちょっと変えるだけで横からのスライドメニューも実装できます。

DEMO

まずはどんな動きになるかデモをご覧ください。 DEMO

実装していく

▼HTML
<header>
  <div class="button-trigger">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <nav>
    <ul>
      <li>
        <a href="#">Home</a>
      </li>
      <li>
        <a href="#">About</a>
      </li>
      <li>
        <a href="#">Works</a>
      </li>
      <li>
        <a href="#">Contact</a>
      </li>
    </ul>
  </nav>
</header>
HTMLはこのような感じです。 ▼SCSS
/*--------------------------------
  header
--------------------------------*/
header {
  background-color: #fff;
  padding: .5rem;
  nav {
    position: absolute;
    overflow-x: hidden;
    text-align: center;
    background-color: #666;
    z-index: 1;
    top: 217px;
    right: 0;
    width: 100%;
    height: 0;
    transition: .5s;
    @include maxw(sm) {
      top: 187px;
    }
    @include maxw(md) {
      top: 196px;
    }
    &.is-opened {
      height: 255px;
    }
    li {
      margin:  {
        top: 32px;
        bottom: 32px;
      }
      a {
        font-weight: bold;
        color: #fff;
        text-decoration: none;
        white-space: nowrap;
      }
    }
  }
}
/*--------------------------------
  button-trigger
--------------------------------*/
.button-trigger {
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  width: 45px;
  height: 45px;
  &.is-active {
    &>span {
      margin: -1.5px;
      &:nth-of-type(1) {
        transform: rotate(-45deg);
      }
      &:nth-of-type(2) {
        transform: scale(0)
      }
      &:nth-of-type(3) {
        transform: rotate(45deg)
      }
    }
  }
  &>span {
    background-color: #222;
    width: 53%;
    height: 3px;
    transition: margin .4s cubic-bezier(.79,.21,.06,.81),
                transform .4s cubic-bezier(.79,.21,.06,.81);
    margin:  {
      top: 3px;
      bottom: 3px;
    }
    &:nth-of-type(2) {
      transform-origin: 50% 50%;
    }
  }
}
SCSSです。 navタグに.is-openedが付与された際の動きを記述。今回はheight: 255px;としています。これだけだとnav要素が急に表示される動きになるので、 transition: .5s;で0.5秒かけてスライドするようにします。 .button-triggerではハンバーガーメニューの動きを決めています。 ▼JavaScript
const btn = document.querySelector('.button-trigger');
const nav = document.querySelector('nav');

btn.addEventListener('click', () => {
  nav.classList.toggle('is-opened')  
});

btn.addEventListener('click', () => {
  btn.classList.toggle('is-active')
});
最後にJavaScriptです。 今回は、</body>タグの直前にscriptタグで囲んで記述しています。別ファイルを用意してHTMLファイルに読み込ませてもOKです。 簡単に説明すると、.button-trigger要素がクリックされたら、navタグに.is-openedを、button-triggerクラスにはis-activeつけたり外したりさせています。 JavaScriptでしていることは、クラスをつけたり外したりしているだけですね。そう考えるとシンプルで分かりやすいです。

さいごに

冒頭にも書いたように、今回は上からのスライドメニューでしたがCSSを少し変えるだけで横からのスライドメニューも簡単に実装できます。気になる方はこちらをチェックしてみてください。 https://www.npmjs.com/package/magic-grid このJavaScriptを覚えるだけで色々な動きを実装できるのでオススメです。

参考ページ

https://www.npmjs.com/package/magic-grid