WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

メガドロップダウンメニューの導入

最後にPC用のナビにメガドロップダウンメニューを入れます

f:id:yachin29:20160908004023p:plain



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


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


www.nike.com


www.kureha.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'});
  });
});