読者です 読者をやめる 読者になる 読者になる

WEBサイト制作の勉強|フェリカテクニカルアカデミー

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