jQuery｜3章：メニュー系UI実装

INDEX

前の章に戻る次の章に進む

3章：メニュー系UI実装

この教材の学習時間:105分

サンプルコード
本教材で使用するzipファイルです。ダウンロード済みの方は不要です。
zipファイル

サンプルコードの使い方

materials
- materialsフォルダには、教材内で解説しているサンプルコードが含まれています。
- 例えば、「【2-1】トグルメニューの実装」を学ぶ際は、02-1_toggle-menuフォルダ内のコードを確認しながら進めてください。
- ※ 【1-1】、【1-2】に関してはサンプルコードはありません。
exercises
- exercisesフォルダには、各章末の演習課題に取り組むためのコードが用意されています。
- 演習に取り組む際は、XX_start フォルダ内のコードを使って作業を始めましょう。
- 作業後に答え合わせをする場合は、XX_end フォルダ内の解答例コードを参照してください。

この章では、jQueryを活用したさまざまなメニュー系UIの実装方法を学びます。

具体的には、
===

ドロップダウンメニュー（ホバーやクリックで展開するメニュー）
フローティングメニュー（スクロールに追従するメニュー）
スライドメニュー（スライドイン・アウトするメニュー）
メニューのハイライト（現在のページやスクロールに応じたメニュー表示）

===
を作成し、それぞれのHTML、CSS、jQueryでの実装方法を解説します。

【3-1】ドロップダウンメニューの実装

目安の学習時間:15分

ドロップダウンメニューとは、クリックやホバーで開閉するメニューのことを指します。
今回は、メニュー項目をマウスホバーすると、その下にサブメニューが表示される動きを実装します。

HTML/CSS構造

ナビゲーションメニューのHTMLを作成する

<nav>
    <ul>
        <li class="dropdown">
            <a href="#">メニュー</a>
            <ul class="submenu">
                <li><a href="#">サブメニュー1</a></li>
                <li><a href="#">サブメニュー2</a></li>
            </ul>
        </li>
    </ul>
</nav>

サンプルコード

li要素にdropdownクラス、サブメニューのul要素にsubmenuクラスを付与。

CSSでドロップダウンメニューのスタイルを整える

.submenu {
                display: none;
                position: absolute;
                background: #444;
                top: 100%;
                left: 0;
                width: 150px;
                padding: 0;
}
.submenu li {
                display: block;
                padding: 10px;
                color: white;
}

サンプルコード

.submenuは初期状態で非表示 (display: none;) に設定。

jQueryの実装

jQueryを使用してホバー時にメニューを開閉する機能を実装する

#該当コードのみ記載

 $(document).ready(function() {
            $(".dropdown").hover(
                function() { $(this).find(".submenu").slideDown(); },
                function() { $(this).find(".submenu").slideUp(); }
            );
 });

サンプルコード

処理の流れ

初期状態：ページが読み込まれると、サブメニューはCSSによって非表示になっています (display: none;)。
イベント監視： jQueryは、.dropdownクラスを持つ要素（ドロップダウンメニューの親要素）に対するhoverイベント（マウスが要素に乗ったとき、外れたとき）を監視します。
hoverイベント発生：
- マウスが乗ったとき：.dropdown内で.submenuクラスを持つ要素を検索し、.slideDown()メソッドを使ってスライドダウン表示します。
- マウスが外れたとき：.dropdown内で.submenuクラスを持つ要素を検索し、.slideUp()メソッドを使ってスライドアップ非表示にします。
結果：マウスがドロップダウンメニューに乗るとサブメニューが表示され、外れると非表示になります。

コード	各コードの機能
`$(document).ready(function() {...})`	ページの読み込みが完了したら、スクリプトを実行
`$(".dropdown").hover(function() {...}, function() {...});`	マウスが要素に乗ったとき・外れたときの処理を設定
`$(this).find(".submenu").slideDown();`	マウスが乗ったとき（hover の1つ目の関数）、`.submenu` をスライドダウンで表示
`$(this).find(".submenu").slideUp();`	マウスが外れたとき（hover の2つ目の関数）、`.submenu` をスライドアップで非表示

.find()メソッドについて
.find(selector) は、jQueryオブジェクト（この例では $(this) が指すドロップダウンメニューの要素）の子孫要素の中から、指定されたセレクタに一致する要素を検索します。
サブメニュー（.submenu）を特定し、表示・非表示のアニメーションを適用するために使用されます。

【3-2】フローティングメニューの実装

目安の学習時間:5分

フローティングメニューとは、スクロール時に固定されるメニューのことを指します。

今回は、スクロール時にメニューを上部に固定表示する機能を実装します。

HTML・CSSのみで実装可能です。

HTML/CSS構造

固定されたナビゲーションメニューのHTMLを作成する

<nav>
    <ul>
        <li><a href="#section1" class="menu-item">セクション1</a></li>
        <li><a href="#section2" class="menu-item">セクション2</a></li>
        <li><a href="#section3" class="menu-item">セクション3</a></li>
    </ul>
</nav>

サンプルコード

各メニュー項目にmenu-itemクラスを付与。

nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #333;
    padding: 10px 0;
}
nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}
nav li {
    margin: 0 15px;
}
nav a {
    color: white;
    text-decoration: none;
    font-size: 16px;
}

サンプルコード

navにposition: fixed;を指定し、スクロール時に固定表示されるようにする。
top: 0; left: 0; width: 100%;で画面全体に広がるように設定。

【3-3】ハイライトメニューの実装

目安の学習時間:20分

ハイライトメニューとは、現在のページやスクロール位置に応じてメニューのスタイルを変更することを指します。
【3-2】フローティングメニューに、CSSの装飾とjQueryのコードを加えることで実装できます。

HTML/CSS構造

ハイライトされるナビゲーションメニューのHTMLを作成する

<nav>
    <ul>
        <li><a href="#section1" class="menu-item">セクション1</a></li>
        <li><a href="#section2" class="menu-item">セクション2</a></li>
        <li><a href="#section3" class="menu-item">セクション3</a></li>
    </ul>
</nav>

サンプルコード

各メニュー項目にmenu-itemクラスを付与。
【3-2】と同じコードです。

CSSでアクティブなメニューのスタイルを整える

        .menu-item.active {
            background: #ff0;
            color: black;
            font-weight: bold;
            border-radius: 5px;
        }

サンプルコード

.menu-item.activeで、アクティブなメニュー項目のスタイルを設定。
background: #ff0;で背景色を変更し、視覚的に強調。
font-weight: bold;で文字を太字にする。
これらを【3-2】のCSSに追加します。

jQueryの実装

jQueryを使用してハイライト動作を実装する

$(document).ready(function() {
       $(window).scroll(function() {
            let scrollPos = $(window).scrollTop();
            $(".menu-item").each(function() {
                let sectionOffset = $($(this).attr("href")).offset().top - 60;
                if (scrollPos >= sectionOffset) {
                      $(".menu-item").removeClass("active");
                      $(this).addClass("active");
                 }
             });
        });
 });

サンプルコード

処理の流れ

初期状態
- メニューはHTMLとCSSによって初期位置に配置されます。
- CSSで position: fixed; が指定されているため、スクロールしても画面上の固定位置に留まります。

イベント監視：jQueryは window オブジェクトに対する scroll イベントを監視します。
scrollイベント発生：
- スクロールが発生するたびに、現在のスクロール位置（scrollPos）を取得します。
- 各 .menu-item（メニュー項目）に対して以下の処理を行います。
  - 対応するセクションの offset().top（上端の位置）を計算します。
  - 現在のスクロール位置がそのセクションの上端を超えているかどうかを判定します。
  - 超えている場合、以下の処理を実行：
    - すべての .menu-item から active クラスを削除します。
    - 現在のメニュー項目に active クラスを追加します。
結果：スクロール位置に応じて、現在表示されているセクションに対応するメニュー項目がハイライト表示されます。

コード	各コードの機能
`$(document).ready(function() {...})`	ページの読み込みが完了したらスクリプトを実行
`$(window).scroll(function() {...})`	スクロールイベントを検知して処理を実行
`let scrollPos = $(window).scrollTop();`	現在のスクロール位置を取得
`$(".menu-item").each(function() {...})`	各メニュー項目（`.menu-item`）に対して処理を実行
`let sectionOffset = $($(this).attr("href")).offset().top - 60;`	対象のセクションの位置を取得（60px 分の調整あり）
`if (scrollPos >= sectionOffset) {...}`	現在のスクロール位置が該当セクションを超えたら、アクティブクラスを更新
`$(".menu-item").removeClass("active");`	全てのメニュー項目から `active` クラスを削除
`$(this).addClass("active");`	該当するメニュー項目に `active` クラスを追加

$(window).scroll() について
$(window).scroll(function() { ... }); は、ブラウザウィンドウでスクロールが発生したときに実行される関数を定義します。
Webページがスクロールされた際に特定のアクション（メニューのハイライトなど）を実行するために使用されます。

$(this)について
$(this) は、コンテキストによって参照する対象が変わります。
このセクションの .each() メソッド内で使われる $(this) は、ループ処理中の各.menu-item要素を指します。
$(this) を使用することで、イベントが発生した要素に対して直接操作を行うことができます。

【3-4】スライドメニューの実装

目安の学習時間:15分

スライドメニューとは、横からスライドイン・アウトするメニューのことを指します。

HTML/CSS構造

スライドするメニューのHTMLを作成する

<button id="menu-toggle">メニュー</button>
<div id="slide-menu">
  <button id="menu-close">閉じる</button>
  <ul>
    <li><a href="#">ホーム</a></li>
    <li><a href="#">サービス</a></li>
    <li><a href="#">お問い合わせ</a></li>
  </ul>
</div>

サンプルコード

メニューの開閉ボタン<button>と、スライドするメニュー本体<ul>を作成。

CSSでスライドメニューのスタイルを整える

#slide-menu {
  position: fixed;
  left: -200px;
  top: 0;
  width: 200px;
  height: 100%;
  background: #333;
  color: white;
  transition: left 0.3s;
  padding-top: 50px;
}

サンプルコード

#slide-menuにposition: fixed;に指定し、画面に固定
left: -200px;で初期状態では画面外に配置。
transition: left 0.3s;でスライドのアニメーションを付与。

jQueryの実装

jQueryを使用してスライド動作を実装する

#該当コードのみ記載

$(document).ready(function() {
            $("#menu-toggle").click(function() {
                $("#slide-menu").animate({left: "0px"}, 300);
            });
            $("#menu-close").click(function() {
                $("#slide-menu").animate({left: "-200px"}, 300);
            });
 });

サンプルコード

処理の流れ

初期状態：
- スライドメニューは、CSSによって画面外に配置され、非表示になっています (left: -200px;)
イベント監視：
- jQueryは、#menu-toggle（メニュー開閉ボタン）と#menu-close（メニュー閉じるボタン）のクリックイベントを監視します。
クリックイベント発生：
- メニュー開閉ボタンクリック：#slide-menuをanimate()メソッドを使ってスライドインさせます (left: 0px)。
- メニュー閉じるボタンクリック：#slide-menuをanimate()メソッドを使ってスライドアウトさせます (left: -200px)。
結果：
- メニュー開閉ボタンをクリックするとスライドメニューが表示され、メニュー閉じるボタンをクリックすると非表示になります。

コード	各コードの機能
$(document).ready(function() {...})	ページの読み込みが完了したらスクリプトを実行
$("#menu-toggle").click(function() {...})	#menu-toggle がクリックされたらメニューを表示
$("#slide-menu").animate({left: "0px"}, 300);	#slide-menu を左からスライドイン（left: 0px）
$("#menu-close").click(function() {...})	#menu-close がクリックされたらメニューを閉じる
$("#slide-menu").animate({left: "-200px"}, 300);	#slide-menu を左へスライドアウト（left: -200px）

.animate()メソッドについて
.animate(properties, duration) は、jQueryでアニメーションを実装するためのメソッドです。
CSSプロパティの値を徐々に変化させることで、要素を動かしたり、見た目を変更したりすることができます。

properties: アニメーションさせるCSSプロパティとその目標値をオブジェクト形式で指定します（例：{ left: "0px" }）。
duration: アニメーションの完了にかかる時間をミリ秒単位で指定します（例：300）。

【3-5】演習課題

目安の学習時間:50分

演習課題03：フローティングメニューとドロップダウンメニューの連携

演習課題03

演習課題の詳細

課題概要
- 画面の上部に固定表示されるフローティングメニューをクリックすると、ドロップダウンメニューが開く仕組みを実装します。
- メニューの開閉時にアニメーションを追加し、視認性を高めるようにカスタマイズしてください。
要件（実装する内容）
- フローティングメニューにドロップダウンメニューを組み込む
- フローティングメニューは固定表示（position: fixed;）にする
- ドロップダウンメニューの開閉は.hover()またはクリックイベントで実装
- メニューの開閉アニメーションには.slideDown() / .slideUp()を使用
- スクロール時にスムーズに移動するように.scroll-behavior: smooth;を使用
- セクションごとに視認性を高めるため、.contentに適切な背景色と高さを設定
自由部分（設定自由な内容）
- ドロップダウンメニューのデザインやアニメーション速度、効果のカスタマイズが可能です。
- メニューの位置や表示方法（例えば、メニューの高さや幅）は自由に調整してください。
ヒント
- フローティングメニューはposition: fixed;でスクロールしても画面上部に固定
- ドロップダウンメニューの表示には.hover()イベントを活用
- スクロール位置に応じたスムーズなスクロールはscroll-behavior: smooth;を使う
- .anchorクラスを利用してリンク先のスクロール位置を調整する
- .contentにheight: 500px;と背景色を設定して、視覚的に区切りをつける

途中で躓いたら、教材を振り返りながら進めてみましょう。
解き終わったら、03_endフォルダ内の解答例と見比べて、自分の実装を確認してみましょう。

演習課題04：スライドメニューとハイライトメニューの連携

演習課題04

演習課題の詳細

課題概要
- スクロール位置に応じて、現在閲覧しているセクションを強調するハイライト機能を、横からスライドイン・スライドアウトするメニューに組み込みます。
- メニューの開閉とともに、現在表示中のセクションに対応するメニュー項目にハイライトを適用します。
要件（実装する内容）
- スライドメニューにハイライトメニューを組み込む
- メニューの開閉には.toggleClass()やanimate()を使ってスライドイン・スライドアウトを実装
- スクロール位置に応じて、表示中のセクションをハイライトする
- 現在表示中のセクションに対応するメニュー項目にactiveクラスを適用
- activeクラスが適用されたメニュー項目の背景色を黄色に設定し、視認性を高める
自由部分（設定自由な内容）
- スライドメニューのアニメーションやメニュー項目のデザイン、アクティブ状態のスタイルは自由にカスタマイズできます。
- ハイライトの色や、メニューの表示位置、幅なども自由に調整可能です。
ヒント
- スライドメニューの開閉：toggleClass()またはanimate()を使用して、メニューの左位置を0pxに変更して表示し、-220pxに戻して非表示にする。
- スクロール位置に応じたハイライト適用：.scroll()イベントを使用して、ページのスクロール位置を判定し、.offset().topを使って各セクションの上端の位置を取得。
- アクティブ状態の切り替え：.addClass(), .removeClass()を使って、現在表示中のセクションに対応するメニュー項目にactiveクラスを適用。activeクラスのメニュー項目は背景色を黄色に変更して視認性を向上させる。

途中で躓いたら、教材を振り返りながら進めてみましょう。
解き終わったら、04_endフォルダ内の解答例と見比べて、自分の実装を確認してみましょう。

この章では、さまざまなメニューの実装方法を学びました。
次の章では、より高度なUIコンポーネントの実装に進みます！

前の章に戻る次の章に進む