【JavaScript】グローバルナビゲーションに滑るような選択アイコンを表示

2023年12月19日

WEBサイト制作

#HTML
#css
#JavaScript
#tips

こんにちは！
上毛印刷WEB制作担当のソーヤです。

今回は変わったギミックを紹介します。

実装例

こういうギミックとか動きって、ディレクターやデザイナーから指示がない場合が結構あるので、
コーダーのセンスで実装することってありますよね。

HTML例

<nav class="gnav">
  <div class="gnav__inner">
    <ul class="gnav__list">
      <li class="gnav__list__item current-item">
        <a href="javascript:void(0);">TOP</a>
      </li>
      <li class="gnav__list__item">
        <a href="javascript:void(0);">会社概要</a>
      </li>
      <li class="gnav__list__item">
        <a href="javascript:void(0);">環境保全活動について</a>
      </li>
      <li class="gnav__list__item">
        <a href="javascript:void(0);">開催スケジュール</a>
      </li>
      <li class="gnav__list__item">
        <a href="javascript:void(0);">お問い合わせ</a>
      </li>
    </ul>
    <span class="menu__bar"></span>
  </div>
</nav>

CSS例

.gnav {
  width: 100%;
  height: 50px;
  background: #333;
  box-sizing: content-box;
}
.gnav__inner {
  position: relative;
  box-sizing: content-box;
}
.gnav__list {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  box-sizing: content-box;
  list-style: none;
  justify-content: center;
}
.menu__bar {
  content: '';
  bottom: 0px;
  left: 0;
  position: absolute;
  width: 20%;
  height: 8px;
  background: #ccc;
  -webkit-transition: .4s ease;
  -o-transition: .4s ease;
  transition: .4s ease;
  pointer-events: none;
}
.gnav__list__item {
  width: 20%;
  height: 50px;
  text-align: center;
  box-sizing: content-box;
}
.gnav__list__item a {
  box-sizing: content-box;
  display: block;
  display: flex;
  height: 50px;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #fff;
}

JavaScript例

document.addEventListener('DOMContentLoaded', function() {
    let currentItem = document.querySelector('.current-item');
    let gnavListItems = document.querySelectorAll(".gnav__list__item");
    let menuBar = document.querySelector('.menu__bar');

    gnavListItems.forEach(function(item) {
    item.addEventListener("mouseover", function() {
      menuBar.style.width = item.offsetWidth + "px";
      menuBar.style.left = item.offsetLeft + "px";
    });

    item.addEventListener("mouseout", function() {
      if (currentItem) {
        menuBar.style.width = currentItem.offsetWidth + "px";
        menuBar.style.left = currentItem.offsetLeft + "px";
      } else {
        menuBar.style.width = "0";
      }
    });
  });
});