トップ > Webデザイン > ドロップダウン メニューの設計と実装：写真を駆使したユーザーフレンドリーなナビゲーション
最終更新日

ドロップダウン メニューの設計と実装：写真を駆使したユーザーフレンドリーなナビゲーション

Webデザイン ユーザーエクスペリエンス ナビゲーション ドロップダウンメニュー 写真付きメニュー

Web Design

この記事では、ウェブサイトのナビゲーションを魅力的にする方法を紹介します。

画面左側のナビゲーションに、イメージ画像を組み合わせたドロップダウン メニューのデザインと、実装方法を詳しく解説し、ユーザーエクスペリエンスを向上させるためのヒントを提供します。

ウェブデザインにおける新たなアイデアを見つけたい方におすすめの一読です。

ソースコード

「動くWebデザインアイディア帳」様の記事を参考にさせていただきました。

ドロップダウンメニュー（写真付 左ナビ） | 動くWebデザインアイディア帳

ドロップダウンメニュー（写真付 左ナビ） | 動くWebデザインアイディア帳

undefined

coco-factory.jp

以下に、コードと解説を組み合わせて説明します。

HTML部分:

このナビゲーションメニューのコードは、ウェブページのヘッダー部分で構築しています。
HTML、JavaScript、CSSの順に各部分の解説を示します。
先ずはHTMLから。

<div id="container">
    <header id="header">
        <div class="separator" style="clear: both;">
            <a href="ロゴ画像をクリックしたときのリンク先（TOPなど）" style="display: block; padding: 1em 0; text-align: center;">
                <img alt="画像が表示されなかったときの代りの文"  src="貼りたいロゴ画像ＵＲＬ" height="50"/>
            </a>
        </div>
        <nav>
            <ul class="image-mannaka">
                <!-- ナビゲーション項目をここに追加 -->
                <li><a href="リンク先のＵＲＬ">メインメニュー名１</a></li>
                <li class="has-child"><a href="#">メインメニュー名２</a>
                    <ul>
                        <!-- サブメニュー項目をここに追加 -->
                        <li><a href="リンク先のＵＲＬ">
                            <dl>
                                <dt><img src="貼りたいイメージ画像ＵＲＬ" alt=""></dt>
                                <dd>サブメニュー名１（中）</dd>
                            </dl>
                        </a></li>
                        <!-- 他のサブメニュー項目も同様に追加 -->
                    </ul>
                </li>
                <!-- 他のメニュー項目も同様に追加 -->
                <li><a href="リンク先のＵＲＬ">メインメニュー名２</a></li>
            </ul>
        </nav>
    </header>
</div>

<!-- JQuery呼び出し（これを貼ることで、JQueryコードが利用できる -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="  crossorigin="anonymous"></script>

解説:

  1. コンテナ (<div id="container">):

    • ページ全体を包むコンテナ要素。

  2. ヘッダー (<header id="header">):

    • ウェブページのヘッダーセクション。
    • ヘッダー内には、クリック可能なロゴイメージが含まれています。

  3. ナビゲーション (<nav>):

    • ナビゲーションメニューが配置されるセクション。
    • <ul>は無順序リストを表し、各メニューアイテムは<li>で表現されています。

  4. ナビゲーションメニュー (<ul class="image-mannaka">):

    • メニューアイテム「Top」、「他の記事を見てみる」、「Contact」が含まれています。
    • 「他の記事を見てみる」にはサブメニューがあり、それも <ul> と <li> で構成されています。

  5. サブメニュー (<ul> の中の <ul>):

    • 「他の記事を見てみる」のサブメニューには、記事一覧へのリンクが含まれています。

  6. jQueryの読み込み:

    • jQueryライブラリを読み込んでいます。これにより、JavaScriptコード内でjQueryを使用できます。


JavaScript部分:

次にJavaScriptコードです。

// ドロップダウンの設定を関数でまとめる
function mediaQueriesWin() {
    // ウィンドウの幅を取得
    var width = $(window).width();

    if (width <= 768) {
        // 横幅が768px以下の場合

        // has-childクラスがついたaタグのclickイベントを一旦解除して、再登録
        $(".has-child>a").off('click');
        $(".has-child>a").on('click', function () {
            // クリックされたaタグの親要素の<li>を取得
            var parentElem = $(this).parent();

            // 矢印方向を変えるためのクラス名を付与または削除
            $(parentElem).toggleClass('active');

            // liの子要素のulを500ミリ秒でスライドさせる
            $(parentElem).children('ul').stop().slideToggle(500);

            // リンクの無効化
            return false;
        });
    } else {
        // 横幅が768px以上の場合

        // has-childクラスがついたaタグのclickイベントを解除
        $(".has-child>a").off('click');

        // activeクラスを削除
        $(".has-child").removeClass('active');

        // スライドトグルで動作したdisplayも無効化
        $('.has-child').children('ul').css("display", "");
    }
}

// ページがリサイズされたら動かしたい場合の記述
$(window).resize(function () {
    mediaQueriesWin(); /* ドロップダウンの関数を呼ぶ */
});

// ページが読み込まれたらすぐに動かしたい場合の記述
$(window).on('load', function () {
    mediaQueriesWin(); /* ドロップダウンの関数を呼ぶ */
});

解説：

  1. mediaQueriesWin 関数:

    • ウィンドウの幅に基づいて、特定の条件でドロップダウンメニューの動作を設定する関数です。

  2. $(window).resize イベント:

    • ウィンドウがリサイズされたときに発火するイベントです。このイベントが発生すると、mediaQueriesWin 関数が呼び出されます。

  3. $(window).on('load' イベント:

    • ページが完全に読み込まれたときに発火するイベントです。このイベントが発生すると、同様に mediaQueriesWin 関数が呼び出されます。

  4. 条件分岐:

    • ウィンドウの幅が768px以下の場合は、ドロップダウンメニューを有効にするためのイベントが設定されます。
    • ウィンドウの幅が768px以上の場合は、ドロップダウンメニューのイベントが無効化され、表示状態も初期化されます。

  5. return false;:

    • クリックされたリンクのデフォルトの挙動を無効化するために使われます。この場合、ページの遷移を防ぎます。

このJava Scriptのコードは、ウェブページ上でのユーザーインタラクション *1 を改善し、特に小さい画面のデバイスにおいて、ナビゲーションメニューを操作しやすくすることを目的としています。以下にその詳細をまとめます。

目的:

  1. ドロップダウンメニューの最適化:

    • ウィンドウの幅が768px以下の場合、has-child クラスが付いたナビゲーションメニュー項目に対して、クリック時にサブメニューの表示/非表示を切り替えるドロップダウンメニューの最適化を行います。

  2. リサイズとロード時の適応:

    • ウィンドウのリサイズやページの読み込み時に、画面幅に基づいてドロップダウンメニューの挙動を調整し、最適な表示状態に保つことを目指します。

具体的な動作:

  1. 小画面でのドロップダウン:

    • ウィンドウの幅が768px以下の場合（スマホなど）、has-child クラスが付いたナビゲーションメニュー項目をクリックすると、サブメニューがスライドして表示/非表示が切り替わります。また、クリックした要素に active クラスが追加され、矢印方向も変更されます。

  2. 大画面での挙動:

    • ウィンドウの幅が768px以上の場合（主にＰＣ）、has-child クラスが付いたナビゲーションメニュー項目のクリックイベントが無効化され、関連するクラスとスタイルが初期化されます。

  3. リサイズとロード時の適応:

    • ウィンドウのリサイズやページの読み込み時に、上記の条件に基づいて適切なドロップダウンメニューの設定が再評価されます。

総じて、このJava Scriptコードはレスポンシブなデザインの一環として、小さい画面でのユーザーエクスペリエンスを向上させ、ナビゲーションメニューの使いやすさを確保することを目指しています。


コードの最後はCSS。以下詳細な解説です。

ドロップダウンのためのCSS

ナビゲーション全体の設定:

nav ul {
    list-style: none;
    text-align: center;
}

nav ul li a {
    position: relative;
    display: block;
    text-decoration: none;
    color: #000;
    padding: 20px 15px;
    transition: all 0.3s;
}

nav ul li a:hover {
    color: #666;
}

nav ul li li a {
    padding: 15px;
}
  • nav ul: ナビゲーション全体のスタイリング。リストスタイルを無効にし、テキストを中央揃えに設定します。
  • nav ul li a: ナビゲーションリンクの基本スタイル。リンクの位置、デザイン、ホバー時の色変化を指定します。
  • nav ul li li a: 2階層目のリンクスタイル。

矢印の設定:

nav ul li.has-child > a::before {
    content: '';
    position: absolute;
    right: 20px;
    top: 28px;
    width: 6px;
    height: 6px;
    border-top: 2px solid #999;
    border-right: 2px solid #999;
    transform: rotate(45deg);
}
  • .has-child クラスが付いたメニューアイテムのリンクの前に矢印を表示させます。

画像の設定:

nav ul li.has-child img {
    max-width: 100%;
    transition: all 0.5s;
    vertical-align: bottom;
    object-fit: cover;
}

nav ul li.has-child img:hover {
    transform: scale(1.2);
}
  • .has-child クラスが付いたメニューアイテムの画像に対するスタイル。画像の最大幅を100%にし、ホバー時（マウスカーソルが画像の上に来たとき）に画像に拡大効果を加えます。

ナビゲーションのサブメニューの設定:

nav li.has-child ul {
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 4;
    width: 100%;
    background: #888;
    display: none;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s;
}

nav li.has-child:hover > ul {
    display: block;
    visibility: visible;
    opacity: 1;
}
  • .has-child クラスが付いたメニューアイテムのサブメニューのスタイル。初めは非表示で、ホバー時に表示されるように設定します。

レスポンシブデザイン:

@media screen and (max-width: 768px) {
    /* 768px以下の場合のスタイル */
    /* ... */
}
  • 768px以下の画面幅（主にスマホ）の場合に適用されるスタイル。ナビゲーションの表示形式や矢印の向き、ヘッダーやメインエリアのレイアウトなどが変更されます。

レイアウトのためのCSS

#container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#header {
    width: 17%;
    background: #f3f3f3;
    position: relative;
    color: snow;
}

#main-area {
    width: 78%;
}

@media screen and (max-width: 768px) {
    #header,
    #main-area {
        width: 100%;
    }
}

.section {
    padding: 30px;
}

.image-mannaka img {
    width: 100%;
    height: 15vh;
    transition: all 0.5s;
    vertical-align: middle;
}
  • #container: ページ全体のコンテナのスタイル。要素を横並びに配置します。
  • #header と #main-area: ヘッダーとメインエリアのスタイル。#header の背景色やテキストカラーを指定します。
  • @media screen and (max-width: 768px): 768px以下の画面幅の場合のスタイル。ナビゲーションや画像のスタイル、横幅の変更が行われます。

以上、CSSコードの要素について詳しく解説しました。

こんどは、このメニューに画像を貼る方法と、メニューの行き先となるリンクを貼る方法について、簡単に解説します。以下に、HTMLコードとCSSコードが含まれています。

画像・リンクを貼る方法:

<li class="has-child"><a href="#">メインメニュー名２</a>
  <ul>
  <!-- サブメニュー項目をここに追加 -->
    <li><a href="リンク先のＵＲＬ">
      <dl>
        <dt><img src="貼りたいイメージ画像ＵＲＬ" alt=""></dt>
        <dd>サブメニュー名１（中）</dd>
      </dl>
    </a></li>
    <!-- 他のサブメニュー項目も同様に追加 -->
  </ul>
</li>

先ほどのHTMLコードの一部です。この中の、以下の部分にリンク先と画像ＵＲＬを指定します。つまり、画像はあらかじめ「はてなフォトライフ」などにアップロードして、画像のリンク先アドレスを取得しておく必要があります。

<!-- 画像を貼りたい場所に以下のコードを追加 -->
<a href="https://リンク先のＵＲＬ">
    <img src="https://貼りたいイメージ画像ＵＲＬ.jpg" alt="代替テキスト">
</a>
  • <a> タグ: リンクを作成するためのタグです。
  • href="https://example.com": リンク先のURLを指定します。
  • <img> タグ: 画像を表示するためのタグです。
  • src="https://example.com/image.jpg": 画像のURLを指定します。
  • alt="代替テキスト": 画像が表示できない場合やスクリーンリーダーのユーザーに対して代替テキストを提供します。

コードの適用例:

HTML
<!-- ナビゲーション項目に画像を追加 -->
<li>
    <a href="#">
        <img src="https://example.com/icon.png" alt="アイコン">
        Top
    </a>
</li>

<!-- サブメニュー項目に画像を追加 -->
<li class="has-child">
    <a href="#">
        他の記事を見てみる
        <img src="https://example.com/arrow.png" alt="矢印">
    </a>
    <ul>
        <li>
            <a href="https://rubirubi.hateblo.jp/entry/all-category-article-list">
                <dl>
                    <dt>
                        <img src="https://example.com/category.png" alt="カテゴリアイコン">
                    </dt>
                    <dd>記事一覧（カテゴリ別）</dd>
                </dl>
            </a>
        </li>
    </ul>
</li>
  • <img> タグを使用して、各リンクやメニューアイテムに画像を追加できます。
  • alt 属性は画像の代替テキストで、画像が読み込まれない場合に表示されます。

CSS
nav ul li a {
    position: relative;
    display: block;
    text-decoration: none;
    color: #000;
    padding: 20px 15px;
    transition: all 0.3s;
}

nav ul li.has-child img {
    max-width: 100%;
    transition: all 0.5s;
    vertical-align: bottom;
    object-fit: cover;
}

nav ul li.has-child img:hover {
    transform: scale(1.2);
}
  • nav ul li a: ナビゲーションリンクのスタイル。ここで画像を含むリンクのデザインを指定しています。
  • nav ul li.has-child img: .has-child クラスが付いたメニューアイテムの画像スタイル。
  • :hover 擬似クラスを使用して、ホバー時に画像が拡大されるように設定しています。


このような手順により、HTMLで画像をリンクに追加し、CSSでスタイルを設定できます。


おわりに。

ウェブデザインの奥深さを追求しました。この記事では、魅力的なナビゲーションメニューのデザインと実装に焦点を当て、写真を駆使してユーザーフレンドリーなエクスペリエンスを提供する方法をご紹介しました。

コードの中には「動くWebデザインアイディア帳」様の素晴らしいアイディアが取り入れられています。これをベースに、より洗練されたウェブサイトを構築する一助となることを願っています。

そしてこの記事が、ユーザーインタラクションの向上を通じて新しいウェブデザインのアイデアを発見し、採用したい方にお勧めの一読となっていれば、幸いです。

これからもクリエイティブなウェブデザインの冒険を一緒に楽しんでいけたら嬉しいです。新たなアイデアの芽が花開くことを願って、Happy Coding!

Today's BGM

Way Back Into Love - ラブソングができるまで ( Music and Lyrics )
　「Way Back Into Love」は、2007年のアメリカ映画「ラブソングができるまで」（原題: Music and Lyrics）の主題歌です。ヒュー・グラントとヘイリー・ベネットが歌っています。
　　「ラブソングができるまで」は、2007年2月14日に全米公開されました。ヒュー・グラントとドリュー・バリモアが主演し、マーク・ローレンスが監督・脚本を務めました。

*1:ユーザーインタラクション（User Interaction）とは、ユーザーがウェブサイトやアプリケーションで行う行動のことです。具体的には、ページの閲覧、リンクのクリック、フォームの記入、動画の再生、スクロールなどが挙げられます。 ユーザーインタラクションはSEO（検索エンジン最適化）にとって重要な指標となります。