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