webサイト制作の勉強|2019年10月クラス用ブログ

ファリカテクニカルアカデミーのwebサイト制作科の授業解説ブログです。フェリカテクニカルアカデミーは池袋にある求職者支援訓練の学校です。

cssで作るメガドロップダウンメニュー

メガドロップダウンメニュー
f:id:yachin29:20160908004023p:plain



最近よく見かけるメガドロップダウンメニュー。特にコーポレートサイトなど情報量が多いサイトでは、リンク先のページに飛んでからさらにそのページの中から目当てのコンテンツを探さなければならない、といった手間がかかります。
メガドロップダウンメニューであれば、リンク先のページの中の目当てのコンテンツにダイレクトに飛べるので、ユーザーの手間が省けるわけです。ユーザビリティの向上のためにも情報量の多いサイトであれば積極的に使っていきましょう。


メガドロップダウンメニューを採用しているサイト例
www.tiffany.co.jp


www.nike.com


www.kureha.co.jp


www.nodai.ac.jp


cssで作成する場合はhtmlの構造がどうなっているか、しっかりと理解する必要があります。

<body>
<header>
<div class="inner">
<h1>ロゴ</h1>
<nav class="g-nav">
<ul>
<li><a href="#">ボタン1</a>
<div class="sub-menu-box">
<p><a href="#">コンテンツ1</a></p>
</div>
</li>
<li><a href="#">ボタン2</a></li>
<li><a href="#">ボタン3</a></li>
<li><a href="#">ボタン4</a></li>
<li><a href="#">ボタン5</a></li>
</ul>
</nav>
</div>
</header>
<div class="main">
<div class="keyvisual">
</div>
</div>
</body>