最後にPC用のナビにメガドロップダウンメニューを入れます
最近よく見かけるメガドロップダウンメニュー。特にコーポレートサイトなど情報量が多いサイトでは、リンク先のページに飛んでからさらにそのページの中から目当てのコンテンツを探さなければならない、といった手間がかかります。
メガドロップダウンメニューであれば、リンク先のページの中の目当てのコンテンツにダイレクトに飛べるので、ユーザーの手間が省けるわけです。ユーザビリティの向上のためにも情報量の多いサイトであれば積極的に使っていきましょう。
メガドロップダウンメニューを採用しているサイト例
www.tiffany.co.jp
<nav class="pc-nav"> <ul> <li class="nav1"><a href="#">商品情報</a> <div class="Wrap"> <div class="wrapInner"> </div><!-- /.wrapInner --> </div><!-- /.Wrap --> </li>
メガドロップダウンメニューのCSS
/*メガドロップメニュー*/ .pc-nav ul li .Wrap { position: absolute; top: 116px; left: 0; z-index: 100; overflow: hidden; display: none; width: 100%; height: 100vh; background: rgba(0,0,0,0.6); } .Wrap .wrapInner { margin: 30px auto 0; width: 960px; height: 360px; background: #FFF; border-radius:8px; } .pc-nav ul li:hover:after{ display:block; content: ""; border: 10px solid transparent; border-bottom: 18px solid #fff; position: absolute; top: 120px; margin-left: 5%; z-index: 1000; }
メガドロップダウンメニューのjQuery
$(function(){ $('.pc-nav > ul > li').hover(function(){ Panel = $(this).children('.Wrap'); Panel.each(function(){ Panel.css({display:'block',opacity:'0'}).stop().animate({opacity:'1'},200); }); },function(){ Panel.css({display:'none'}); }); });