WebCanta

初心者のための徹底ガイド-Web制作

会員ログイン
UIパーツ

CSSアニメーション 様々なデザインの実装 –メガメニュー– #2

メガメニューの実装方法
はじめに
概要
Webサイトでよく見かけるアニメーションを実装していきます。こちらではサンプルコードを配布しておりますので、ぜひご活用ください。 今回はメガメニューについて実装していきます。メガメニューは、ウェブサイトやアプリケーションのナビゲーションメニューの一種です。通常のドロップダウンメニューとは異なり、より大規模なコンテンツを表示することができます。詳細は以下の動画を参照ください。
※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。
疑問を持つ読者のイラスト読者

CSSアニメーション 様々なデザインの実装 –メガメニュー–は、最初にどこを理解するとよいですか？

著者・木村のプロフィール写真木村

どの要素を基準にするか、どの状態で見た目を変えるか、画面幅が変わっても崩れないかを順番に確認することが大切です。

話を聞く読者のイラスト読者

実際に試すときは、手順だけでなく確認方法も知っておいた方がよいでしょうか？

著者・木村のプロフィール写真木村

はい。この記事では、作業の目的から実装後の確認までを順番に整理します。自分の環境と照らし合わせながら読み進めてください。

 
 

実装内容

実装内容では、CSSアニメーション 様々なデザインの実装 –メガメニュー– #2を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

メニューの「取り扱い保険」をホバーすると、メガメニューが表示され、黒色のガバーで全体が覆われます。この状態では、ロゴとメニュー以外は見えなくなります。 このような実装になります。
 

実装内容で押さえたいポイント

実装内容は、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。

実装内容の確認方法

スマートフォン、タブレット、PCの幅で確認し、横スクロールや文字の重なりがないかを見ます。マウス操作だけでなく、キーボードフォーカスや文字拡大時の見え方も確認してください。

コードの解説

コードの解説では、CSSアニメーション 様々なデザインの実装 –メガメニュー– #2を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

※こちらはサンプルコードの解説になります。ぜひ上記のサンプルコードをダウンロードください。 ポイント解説 ・z-indexを使用して調整する。本件では、高　メニュー/ロゴ → カバー　→ body　小　となる。 ・本件では、メガメニューの表示CSSのホバーアニメーションで実装すると同時に、Javascriptでカバーを表示するイベントを発火している。 具体的なコードを見ていきましょう。

SCSS

// z-indexで調整
.content__cover {
  background-color: $cBlack;
  cursor: pointer;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: 1s;
  visibility: hidden;
  width: 100%;
  z-index: 1;
  /* 重要 */
}

.header__logo {
  z-index: 2;
  /* 重要 */
}

li {
    &.header-menu__list {
      z-index: 2;
      /* 重要 */
      color: $cWhite;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100px;

      &:hover {
        .header-mega {
          transition: 0.5s;
          visibility: visible;
          opacity: 1;
        }
      }
    }
}
カバー・ロゴ・リストそれぞれにz-indexを指定します。 リストにはホバーアニメーションを設定します。

HTML

<nav class="header__nav lg-block">
  <ul class="flex-row">
    <li>
      <a class="menu__a" href="about.html">私たちについて</a>
    </li>

    <!-- メガメニュー -->
    <li class="header-menu__list flex-column">
      取り扱い保険

      <div class="header-mega flex-column absolute">
        <ul class="flex-row">
          <li class="header-mega__img">
            <a href="/"><img src="./images/header/img-1.png" alt="" /></a>

            <div class="flex-row">
              <a class="mega-menu__a" href="/">メニュー </a>
              <span></span>
            </div>
          </li>
          <!-- /.header-mega__img -->
          <li class="header-mega__img">
            <a href="/"><img src="./images/header/img-1.png" alt="" /></a>

            <div class="flex-row">
              <a class="mega-menu__a" href="/">メニュー </a>
              <span></span>
            </div>
          </li>
          <!-- /.header-mega__img -->
          <li class="header-mega__img">
            <a href="/"><img src="./images/header/img-1.png" alt="" /></a>

            <div class="flex-row">
              <a class="mega-menu__a" href="/">メニュー </a>
              <span></span>
            </div>
          </li>
          <!-- /.header-mega__img -->
        </ul>

        <ul class="flex-row">
          <li class="header-mega__img">
            <a href="/"><img src="./images/header/img-1.png" alt="" /></a>

            <div class="flex-row">
              <a class="mega-menu__a" href="/">メニュー </a>
              <span></span>
            </div>
          </li>
          <!-- /.header-mega__img -->
          <li class="header-mega__img">
            <a href="/"><img src="./images/header/img-1.png" alt="" /></a>

            <div class="flex-row">
              <a class="mega-menu__a" href="/">メニュー </a>
              <span></span>
            </div>
          </li>
          <!-- /.header-mega__img -->
          <li class="header-mega__img">
            <a href="/"><img src="./images/header/img-1.png" alt="" /></a>

            <div class="flex-row">
              <a class="mega-menu__a" href="/">メニュー </a>
              <span></span>
            </div>
          </li>
          <!-- /.header-mega__img -->
        </ul>
      </div>
      <!-- /.flex-column -->
    </li>
    <!-- /.header-menu__list -->

    <li><a class="menu__a" href="recruit.html">採用情報</a></li>
    <li><a class="menu__a" href="news.html">お知らせ</a></li>
    <li class="contact">
      <a class="menu__a" href="contact.html">
        <span class="fw-bold">お問い合わせ</span>
      </a>
    </li>
  </ul>
</nav>
<!-- /.header__nav -->
メガメニューは、親子関係を作る必要があります。具体的には、ul要素の中にさらにul要素を設定し、ホバーアニメーションが正しく機能するように設定しています。

Javascript

export class Onclick {
  constructor() {
    this.DOM = {};
    this.DOM.container = document.querySelector("#global-container");
    this._megaMenu();
  }

  // メガメニュー
  _megaMenu() {
    const cover = document.querySelector(".content__cover");
    const list = document.querySelector(".header-menu__list");

    list.addEventListener("mouseover", () => {
      cover.style.opacity = 1;
      cover.style.visibility = "visible";
    });
    list.addEventListener("mouseout", () => {
      cover.style.opacity = 0;
      cover.style.visibility = "hidden";
    });
  }
}
イベントの発火にはmouseoverを使用します。そしてイベントの解除にはmouseoutを使用し、それぞれのstyleを変更します。 イベントが発火しやすくするためには、メニューの高さを十分に確保することも重要です。 以上です。ぜひお試しください。もし実装できずにお困りの場合やご質問があれば、お問い合わせフォームからお問い合わせくださいませ。

まとめ

  • z-indexでホバーしたときの重なり順を調整
  • CSSのホバーアニメーションが機能するよう、メガメニューは親子関係を設定
  • Javascriptのイベント発火にはmouseover、解除にはmouseout

関連する記事

UIパーツ

アコーディオンメニューの実装

一般的なウェブサイトでよく見かけるアコーディオンメニューを制作します。ウェブサイト内のQ&Aセクションなどでよく使用される、情報をアコーディオン形式で表示する仕組みを導入します。

MEMBER COMMENTS

コメント（0件）

会員ログイン後にコメントできます

記事への質問や感想をコメントで共有できます。無料会員登録後もこの記事へ戻れます。

会員ログイン 無料会員登録