フッター部分の制作
PC時のレイアウト
スマホ時のレイアウト
<footer> <div class="inner"> <ul> <li><a href="#">商品情報</a></li> <li><a href="#">○○○○○○</a></li> <li><a href="#">○○○</a></li> <li><a href="#">○○○</a></li> </ul> <ul> <li><a href="#">キャンペーン</a></li> <li><a href="#">○○○○○○○</a></li> <li><a href="#">○○○○○</a></li> </ul> <ul> <li><a href="#">エンタメ・レシピ</a></li> <li><a href="#">○○○○</a></li> <li><a href="#">○○○○○○○</a></li> <li><a href="#">○○○○○○○○</a></li> <li><a href="#">○○○○○○</a></li> <li><a href="#">○○○○○</a></li> <li><a href="#">○○○○</a></li> </ul> <ul> <li><a href="#">CSV活動</a></li> <li><a href="#">○○○○○○○</a></li> <li><a href="#">○○○○○○○</a></li> <li><a href="#">○○○○○○○○</a></li> <li><a href="#">○○○○○○</a></li> <li><a href="#">○○○○○○</a></li> </ul> <ul> <li><a href="#">企業情報</a></li> <li><a href="#">○○○○○○○○</a></li> <li><a href="#">○○○○○○○○</a></li> <li><a href="#">○○○○</a></li> <li><a href="#">○○○○</a></li> </ul> <ul> <li><a href="#">お客様相談室</a></li> <li><a href="#">○○○○○○○</a></li> <li><a href="#">○○○○○○○○○○</a></li> <li><a href="#">○○○○○○○</a></li> <li><a href="#">○○○○○○○</a></li> <li><a href="#">○○○○○○○○</a></li> </ul> </div> </footer>
最後にPC用のナビにメガドロップダウンメニューを入れます
<nav class="pc-nav"> <ul> <li class="nav1"><a href="#">商品情報</a> <div class="Wrap"> <div class="wrapInner"> </div><!-- /.wrapInner --> </div><!-- /.Wrap --> </li>
メガドロップダウンメニューの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'}); }); });