無料テンプレート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 のように、サブメニュー専用のページを作成することで、メニュー数が多いサイトでもご利用頂けます。
当サイトの無料テンプレートがお役に立ちましたら幸いです。
スポンサーリンク