jQuery：flexbox：メガドロップダウンメニュー - Webデザインのこと、いろいろ

メガドロップダウンメニュー：完成版にリンク
※WORKSのみ実装しています

メガドロップダウン - Webデザインの勉強ちょっとだけプログラムの勉強：参考サイト

f:id:sankoblog:20160718155058p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メガドロップダウンメニュー</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"><!--AwesomeFont-->
<link rel="stylesheet" href="style.css">
<script src="js/jquery-2.2.4.min.js"></script>
<script>
$(function(){
  $('#mddNav > ul > li').hover(function(){
    childPanel = $(this).children('.mddWrap');
    childPanel.each(function(){
		
  childPanel.css({height:'0',display:'block',opacity:'0'}).stop().animate({height:'250px',opacity:'1'},500,'swing');
    });
  },function(){
    childPanel.css({display:'none'});
  });
});
</script>
</head>

<body>
<div id="container">
<header>
<h1>メガドロップダウンメニュー</h1>
</header>

<div id="wrapper">
<nav id="mddNav">
<ul>
<li><a href="#">WORKS</a>
<div class="mddWrap">
<div class="mddInner">
<p><strong>WORKS</strong>DESIGN・HTML/CSS・SYSTEM 制作について紹介します。</p>

<div class="dropContent">
<div>
<span>DESIGN</span>
<ul>
<li><i class="fa fa-chevron-right" aria-hidden="true"></i><a href="#">コンセプトワーク</a></li>
<li><i class="fa fa-chevron-right" aria-hidden="true"></i><a href="#">受賞リスト</a></li>
<li><i class="fa fa-chevron-right" aria-hidden="true"></i><a href="#">実績紹介</a></li>
</ul>
</div>

<div>
<span>HTML/CSS</span>
<ul>
<li><i class="fa fa-chevron-right" aria-hidden="true"></i><a href="#">W3C推奨マークアップ</a></li>
<li><i class="fa fa-chevron-right" aria-hidden="true"></i><a href="#">構築手順</a></li>
<li><i class="fa fa-chevron-right" aria-hidden="true"></i><a href="#">構築実績</a></li>
</ul>
</div>

<div>
<span>SYSTEM</span>
<ul>
<li><i class="fa fa-chevron-right" aria-hidden="true"></i><a href="#">WEBシステム設計</a></li>
<li><i class="fa fa-chevron-right" aria-hidden="true"></i><a href="#">データ解析</a></li>
</ul>
</div>

</div><!--.dropContent-->
</div><!-- /.mddInner -->
</div><!-- /.mddWrap -->
</li>
<li><a href="#">PRODUCT</a></li>
<li><a href="#">RECRUIT</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav><!-- /#mddNav -->


<div id="content">
</div><!-- /#content -->
</div><!-- /#wrapper -->
<footer>
<p><small>Copyright &copy; メガドロップダウンメニュー</small></p>
</footer>
</div><!-- /#container -->
</body>
</html>

@charset "UTF-8";
/* CSS Document */

/* reset */
html, body, div, h1, p, blockquote, pre, 
ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
  box-sizing: border-box;
}
ul, ol {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}

/*body {
	overflow-y: scroll;
}*/


/*------------------------------------- */
header {
	height: 100px;
	background: #000;
}
h1 {
	width: 800px;
	margin: 0 auto;
	padding: 40px 0 0 8px;
	font-size: 28px;
	color: #FFF;
}
/* mddNav（ドロップダウンメニュー全体とナビボタン）
------------------------------------- */
#mddNav {
  position: relative;
  z-index: 100;
  width: 100%;
  height: 45px;
  background: #ebebeb;
  background: linear-gradient(to bottom,  #ebebeb 45%,#d8d8d8 55%);
  border-top: #aaa 1px solid;
  border-bottom: #aaa 1px solid;
}
#mddNav > ul {
  display: flex; /*グローバルナビゲーションを横並びに*/
  margin: 0 auto;
  width: 800px;
  height: 45px;
  text-align: center;
}
#mddNav > ul > li {
  width: 160px;
  height: 45px;
  border-left: #aaa 1px solid;
  box-sizing: border-box;
}
#mddNav > ul > li a {
  color: #666666;
}
#mddNav > ul > li:last-child {
  border-right: #aaa 1px solid;
}
#mddNav > ul > li > a {
  display: block;
  height: 45px;
  font-weight: bold;
  line-height: 45px;
  text-align: center;
  border: #fff 1px solid;
  transition: all 0.2s linear;
}
#mddNav > ul > li:hover > a {
  background: #FFF;
}
/* mddWrap
------------------------------------- */
#mddNav .mddWrap {
  position: absolute;
  top: 45px;
  left: 0;
  z-index: 100;
  overflow: hidden;
  /*display: none;*/
  width: 100%;
  height: 250px;
  text-align: center;
  background: #fff;
  background: linear-gradient(to bottom,  #fff 0%,#efefef 100%);
  border-bottom: #aaa 1px solid;
  box-shadow: 0 2px 2px #eee;
}
#mddNav .mddWrap .mddInner {
  margin: 0 auto;
  padding-top: 30px;
  width: 800px;
  height: 200px;
  line-height: 1.5em;
  text-align: left;
}
#mddNav .mddWrap .mddInner > .dropContent {
  display: flex;
}
#mddNav .mddWrap .mddInner > .dropContent > div {
  margin-right: 20px;
  width: 250px;
/*  float: left;*/
  border-right: #aaa 1px solid;
}
#mddNav .mddWrap .mddInner > .dropContent > div:last-child {
  margin-right: 0;
  border-right: none;
}
#mddNav .mddWrap .mddInner > .dropContent > div > ul > li {
  line-height: 1.8em;
}
#mddNav .mddWrap .mddInner > .dropContent > div > ul > li i {
  margin-right: 0.5em;
}
#mddNav .mddWrap .mddInner > .dropContent > div > ul > li a:link {
  text-decoration: underline;
}
#mddNav .mddWrap .mddInner > .dropContent > div > ul > li a:hover {
  text-decoration: none;
}
#mddNav .mddWrap .mddInner p {
  margin-bottom: 20px;
  padding-left: 10px;
  line-height: 1.6em;
  border-left: #3571AA 5px solid;
}
#mddNav .mddWrap .mddInner p strong {
  font-size: 1.1em;
  display: block;
}
#mddNav .mddWrap .mddInner > div span {
  margin-bottom: 5px;
  font-weight: bold;
}
/*------------------------------------- */
.fa-chevron-right {
  color: #F00;
}
/*------------------------------------- */
footer {
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	background: #000;
}
footer p {
	color: #FFF;
	padding: 30px 0;
	text-align: center;
}