無料テンプレート92～96のドロップダウンメニュー

無料テンプレート 92～96 の、ドロップダウンメニューの編集方法です。

上の画像は、画面幅 900px 以上のドロップダウンメニューです。

マウス環境では、hover で表示されます。

タッチ環境では、クリック（タップ）で表示されます。

画面幅 900px 以上のドロップダウンメニュー の HTML コード
<!-- 画面幅 900px 以上のヘッダーメニュー（画像） -->
<nav id="nav_pc">
<ul>
<li><img src="images/menu1-active.png" alt="ホーム"/></li>

<!-- ドロップダウンメニュー -->
<li><img src="images/menu2-1.png" alt="お店紹介" class="nav_hover"/><img src="images/menu2-2.png" alt="お店紹介"/>
<ul class="nav_pc_sub">
<li><a href="store.html">当店のこだわり</a></li>
<li><a href="sub.html">サブメニュー</a></li>
<li><a href="sub.html">サブメニュー</a></li>
<li><a href="sub.html">サブメニュー</a></li>
<li><a href="sub.html">サブメニュー</a></li>
</ul>
</li>

<li><a href="menu.html"><img src="images/menu3-1.png" alt="メニュー" class="nav_hover"/><img src="images/menu3-2.png" alt="メニュー"/></a></li>
<li><a href="faq.html"><img src="images/menu4-1.png" alt="よくある質問" class="nav_hover"/><img src="images/menu4-2.png" alt="よくある質問"/></a></li>
<li><a href="access.html"><img src="images/menu5-1.png" alt="アクセス" class="nav_hover"/><img src="images/menu5-2.png" alt="アクセス"/></a></li>
</ul>
</nav><!-- nav_pc -->

赤字が、ドロップダウンメニューの部分です。

上の画像は、画面幅 900px 未満のドロップダウンメニューです。

クリック（タップ）毎に、開閉します。

画面幅 900px 未満のドロップダウンメニュー の HTML コード
<!-- 画面幅 900px 未満のヘッダーメニュー（テキスト） -->
<nav id="nav_mo">
<ul>
<li><a href="index.html">ホーム</a></li>

<!-- ドロップダウンメニュー -->
<li class="nav_mo_s">こだわり ▼
<ul class="nav_mo_sub">
<li><a href="store.html">当店のこだわり</a></li>
<li><a href="sub.html">サブメニュー</a></li>
<li><a href="sub.html">サブメニュー</a></li>
<li><a href="sub.html">サブメニュー</a></li>
<li><a href="sub.html">サブメニュー</a></li>
</ul>
</li>

<li><a href="menu.html">お料理</a></li>
<li><a href="faq.html">よくある質問</a></li>
<li><a href="access.html">アクセス</a></li>
</ul>
</nav><!-- nav_mo -->

赤字が、ドロップダウンメニューの部分です。

サンプルでは、ドロップダウンメニューは 1つしか設定していませんが、複数設定することもできます。

以下は、編集上の注意点です。

li タグの中に、ドロップダウンメニューの ul タグを配置してください。

ドロップダウンメニューの ul タグを配置した、親の li タグにはリンクは設定しないでください。

class も必要なので、コピー＆ペーストして編集して頂ければ、間違いないかと思います。

上の画像は、iPhone 5s の画面です。

ドロップダウンメニューが画面を超えるほど長いと、画面を超えた部分はタップできません。

ドロップダウンメニューのメニュー数は、あまり多くしないでください。

メニュー数を増やしたい場合は、ドロップダウンメニューを使用する方法もありますが、他の方法もあります。

sub.html には、ドロップダウンメニュー以外の方法を用意しました。

sub.html のように、サブメニュー専用のページを作成することで、メニュー数が多いサイトでもご利用頂けます。

当サイトの無料テンプレートがお役に立ちましたら幸いです。