コーポレートサイトなど情報量が多いサイトでは、リンク先のページに飛んでからさらにそのページの中から目当てのコンテンツを探さなければならない、といった手間がかかります。
メガドロップダウンメニューであれば、リンク先のページの中の目当てのコンテンツにダイレクトに飛べるので、ユーザーの手間が省けるわけです。ユーザビリティの向上のためにも情報量の多いサイトであれば積極的に使っていきましょう。
メガドロップダウンメニューを採用しているサイト例
www.tiffany.co.jp
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ドロップダウンメニューの作成</title> <style> html,body,ul,li{ margin:0; padding:0; } ul{ list-style:none; } a{ text-decoration:none; } .g-nav{ width:600px; margin:100px auto 0; } .g-nav>ul{ display:flex; position:relative; } .g-nav>ul>li{ width:200px; height:50px; background:#ED6062; text-align:center; line-height:50px; border-right:1px solid #FFF; cursor:pointer; } .g-nav>ul>li:last-child{ border-right:0; } .g-nav>ul>li>a{ display:block; line-height:50px; color:#222; } .g-nav>ul>li>a:hover{ background:#83AFEB; } .drop-menu { width:100%; height:400px; background:#CCC4C4; position:absolute; top:50px; visibility:hidden; opacity:0; } .g-nav>ul>li:nth-child(1):hover>.drop-menu { visibility:visible; opacity:1; transition:0.6s; } .drop-menu>li>a{ display:block; text-align:left; line-height:50px; color:#222; padding-left:50px; } .drop-menu>li>a:hover{ background:#B1EBAA; } </style> </head> <body> <nav class="g-nav"> <ul> <li>ボタン１ <ul class="drop-menu"> <li><a href="#">ボタン1-1</a></li> <li><a href="#">ボタン1-2</a></li> <li><a href="#">ボタン1-3</a></li> </ul> </li> <li><a href="#">ボタン２</a></li> <li><a href="#">ボタン３</a></li> </ul> </nav> </body> </html>
