本記事では、複数階層に拡がるドロップダウンナビゲーションを簡単に設置する方法を紹介します。この実装はjQueryとJavaScriptを使用し、デスクトップではマウスホバーで階層が現れ、スマホ画面ではトグルボタンでナビゲーションと階層の表示／非表示を切り替えます。
また、前回の記事で紹介したスクロールに応じてヘッダーが消え、上に少しスクロールを戻すとヘッダーが再表示される機能もそのまま残しています。
Webデザインにおけるナビゲーションの最適化やダイナミックなヘッダーの実装に役立つ情報が提供されていますので、ブログのカスタマイズに挑戦したい方にはぜひ、ご一読いただければ幸いです。
デモページ
ライブラリのCDN
以下のscriptタグをheadなどに配置することによって、jQueryライブラリが利用可能になります。先ずはこのコードを、後に紹介するスクリプトコードより手前に設置します。
jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
外部ライブラリのCDN（Content Delivery Network）を配置する場所は、通常は<head>セクション内の<script>要素の直前に配置することが一般的です。これは、ページが読み込まれる前にライブラリが利用可能であることを確保するためです。
ソースコード
このコードは、動くWebデザインアイデア帳さんの以下の記事を参考とさせていただき、アレンジを加えたものとなっています。
HTML -> CSS -> JavaScriptの順に解説していきます。
HTMLの構造
大きく2つのコンテナに分かれます。
- 「div.openbtn1」: ナビの表示／非表示を切り替えるボタン部分（スマホのみ）
- 「header#header」: ナビゲーション部分のコンテナ
<!-- トグルボタン部分（スマホ画面のみ） --> <div class="openbtn1"><span></span><span></span><span></span></div> <!-- ナビゲーション部分 --> <header id="header">Logo <nav> <ul id="g-navi"> <li><a href="#">Top</a></li> <li><a href="#">About</a></li> <li class="has-child"><a href="#">Service</a> <ul> <li><a href="#">Service Top</a></li> <li><a href="#">Service-1</a></li> <li class="has-child"><a href="#">Service-2</a> <ul> <li><a href="#">Service-2 Top</a></li> <li><a href="#">Service-2-1</a></li> <li><a href="#">Service-2-2</a></li> <!-- リストの続き --> </ul> </li> <li><a href="#">Service-3</a></li> </ul> </li> <li class="has-child"><a href="#">Blog</a> <ul> <li><a href="#">Blog Top</a></li> <li><a href="#">Blog-1</a></li> <li><a href="#">Blog-2</a></li> <!-- リストの続き --> </ul> </li> </ul> </nav> </header>
コードの解説
ulタグ（unordered list）でドロップダウンメニューの階層を構成し、最上層以外はデフォルトで非表示にスタイルを設定しています。
<li><a href="#">~</a></li>- 見出しタイトルとページ内リンクを記述します。
- リストを追加したい場合は複製して行に追加します。
リンクの記述方法
<!-- ナビ側 --> <li><a href="#見出し１">ここは何でもいい</a></li> <!-- 見出し側 --> <h2 id="見出し１">同じでなくてもいい</i></h2> <!-- ページ外へのリンクを貼る場合 --> <li><a href="リンク先URL">リンク先のタイトルなど</a></li>
ページ内リンク
- ナビ側で指定する
href=""の"~"の間のテキストと、 - 見出し側の
id=""の"~"の間のテキスト
を一致させ、「href=""」の方には文頭に「#」を付けます。
- ナビ側で指定する
ページ外へのリンク
href=""の"と"の中にリンク先のアドレスを記述します。
CSSスタイル
コードの解説
このCSSコードは、大別すると
- ヘッダー
- ナビゲーション
- スマホ向けスタイル
という構成になっています。
以下、「ヘッダーのスタイル」と「ナビゲーション・スマホ向けスタイル」の2部に分け 、解説します。
ヘッダーのスタイル
ロゴやアイコン画像を配置するのもGood！です(^^♪
解説が開きます
ロゴとヘッダーのスタイル:
h1#Logo {
position: absolute;
top: -10px;
left: 20px;
z-index: 1;
color: #999;
border-bottom: none;
}
header#header {
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
h1#Logo: サイトのロゴに関するスタイル。位置は固定され、上部に微調整されています。
header#header: ヘッダーに関するスタイル。ページ上端に固定。ヘッダーのアニメーション:
#header.UpMove {
animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-100px);
}
}
#header.DownMove {
animation: DownAnime 0.5s forwards;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1;
}
@keyframes DownAnime {
from {
opacity: 0;
transform: translateY(-100px);
}
to {
opacity: 1;
transform: translateY(0);
}
UpAnime, DownAnime: ページをスクロールダウン／アップすると、ヘッダーが表示／非表示されるアニメーション。
ナビゲーション・スマホ向けスタイル
解説が開きます
ナビゲーション全体の設定:
nav {
background: #333;
color: #fff;
text-align: center;
}
nav ul {
position: fixed;
display: flex;
justify-content: center;
list-style: none;
width: 100vw;
top: 0;
left: 0;
margin: 0;
background: rgb(0, 0, 0, .9);
}
nav: ナビゲーション全体のスタイル。nav ul: ナビゲーションの上位リストをdisplay: flexで横並びに配置。position: fixedで位置を固定。ドロップダウンメニューのスタイル:
nav ul li.has-child::before {
content: '';
position: absolute;
left: 15px;
top: 25px;
width: 6px;
height: 6px;
border-top: 2px solid #999;
border-right: 2px solid #999;
transform: rotate(135deg);
}
nav ul li.has-child::before: ナビゲーションに階層（サブメニュー）がある場合、親メニュー項目に矢印を表示するためのスタイル。メディアクエリ (Responsive Design):
@media (max-width: 768px) {
/* スマホ向けのスタイルがここに入ります */
}
@media (max-width: 768px): ウィンドウの幅が768px以下の場合に適用されるスマートフォン向けのスタイル。ハンバーガーメニューやスマートフォン画面用の調整が含まれています。
JavaScript
コードの解説
このJavaScriptコードは「jQueryライブラリ」を利用しており、主に以下の機能を有しています。
メニューの表示・非表示制御（スマホ画面用）: メニューの表示状態は ブラウザ幅を拡げる前のメニュー状態（スライドダウンして表示された状態）を保持します。 スクロールに応じたヘッダーの表示切り替え: スクロールが一定の条件を満たすと、 ドロップダウンメニューの制御: ウィンドウの幅に応じてドロップダウンメニューの挙動が変化します。ウィンドウが狭い場合（768px以下）、 リサイズ時の処理: ウィンドウのリサイズが発生した場合、 初期状態の設定: ドキュメントが読み込まれた際に、初期状態を正しく設定するために これにより、ユーザーがページをスクロールしたりウィンドウのサイズを変更したりすると、適切な表示が行われるようになっています。
解説が開きます
.openbtn1 要素がクリックされたときに、#g-navi メニューをスライドダウンして表示し、再度クリックでスライドアップして非表示にします。prevDisplayState 変数で管理されています。 具体的には、
#header のクラスが切り替わり、ヘッダーの表示が変化します。具体的には、スクロールが上向きの場合は 'UpMove' クラスが、下向きの場合は 'DownMove' クラスが追加されます。.has-child クラスを持つリンクがクリックされた際に、親要素のクラスを切り替えつつ、子要素のリストをスライドトグルで表示・非表示にします。mediaQueriesWin および applyResponsiveStyles 関数が呼ばれ、それぞれウィンドウ幅に合わせたドロップダウンメニューの挙動や、レスポンシブなスタイルの適用が行われます。mediaQueriesWin および applyResponsiveStyles 関数が最初に一度呼ばれます。カスタマイズのポイント
if (scroll == beforePos) {} else if (100 > scroll || 0 > scroll - beforePos) {」
おさらい
コードのまとめ
jQuery CDN:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
HTML:
コードはこちら（GitHubサイトへ）
CSS:
コードはこちら（GitHubサイトへ）
JavaScript:
コードはこちら（GitHubサイトへ）
おわりに
今回の記事では、複数階層にわたるドロップダウンナビゲーションの簡単な設置方法を、jQueryとJavaScriptを使用して解説しました。デスクトップ画面ではマウスホバーで階層が表示され、スマートフォン画面ではトグルボタンでナビゲーションと階層の表示／非表示を切り替える仕組みです。
また、前回の記事で紹介したスクロールに応じてヘッダーが消え、上に少しスクロールを戻すとヘッダーが再表示される機能もそのまま組み込まれています。これにより、ウェブデザインにおけるナビゲーションの最適化やダイナミックなヘッダーの実装に役立つ情報を提供しました。
記事全体を通して、HTML、CSS、JavaScriptの組み合わせにより、見栄えの良いドロップダウンメニューを実現する手法を学びました。これらのコードを参考に、ブログのカスタマイズに挑戦してみてください。
デモページやソースコードの解説が記事内に詳細に記載されているので、ぜひご自身のウェブサイトに適用してみてくださいね♬
