メガドロップダウン

手順

HTMLの文章構造を構築
CSSを記述
hover時の設定を記述

f:id:webmaster-web:20160607052407p:plain

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

WORKS
PRODUCT
RECRUIT
BLOG
CONTACT

WORKS
DESIGN・HTML/CSS・SYSTEM 制作について紹介します。
DESIGN
＞コンセプトワーク
＞受賞リスト
＞実績紹介
HTML/CSS
＞W3C推奨マークアップ
＞構築手順
＞構築実績
SYSTEM
＞WEBシステム設計
＞データ解析

PRODUCT
プロダクト・サービスについて紹介します。
WEB
＞WEBサイト制作
＞CMS設計
＞制作の流れ
MOBILE & SMART PHONE
＞レスポンシブ制作
＞APP制作
＞使用言語
SERVER
＞サーバ構築＆運営
＞サーバ移行
＞DB設計

RECRUIT
新卒・キャリア採用についてはこちらから。

新卒採用
＞募集職種
＞募集要項
＞応募フォーム
キャリア採用
＞募集職種
＞募集要項
＞応募フォーム


Copyright © メガドロップダウンメニュー

HTMLの文章構造を記述

トップメニューの「li」にドロップダウン展開時に表示するサブメニューの項目を「子要素」として設定します
マウスオーバーで表示・非表示を切り替えます
このとき、ドロップダウンメニューが下に降りてくるアニメーションを設定します

<nav id="mddNav">
<ul>
<li><a href="#">WORKS</a>
<div class="mddWrap">
<div class="mddInner">
　・・・・・・・
</div><!-- /.mddInner -->
</div><!-- /.mddWrap -->
</li>
<li>・・・・</li>
<li>・・・・</li>
</ul>
</nav>

a要素がトップメニューのリンクボタンとなり、その子要素にあたる「.mddWrap」ブロック内に書かれているものが、ドロップダウン展開時に表示されるサブメニューになります

CSSを記述

FlexBoxでナビゲーションを記述する
CSS3グラデーションを記述
「.mddWrap」では、ドロップダウンメニュー展開後に表示する位置を「position: absolute」で絶対配置にしておき、要素全体は「display: none」にして非表示にしておきます
「.mddWrap」の中で指定しているスタイルは、展開後の表示レイアウトを調整します
「.mddInner」は、展開後に表示するエリアをメニューリスト幅と同じにするためのブロック要素にします

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メガドロップダウンメニュー</title>
<link rel="stylesheet" href="css/style.css">
</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>
<span>DESIGN</span>
<ul>
<li><a href="#">コンセプトワーク</a></li>
<li><a href="#">受賞リスト</a></li>
<li><a href="#">実績紹介</a></li>
</ul>
</div>
<div>
<span>HTML/CSS</span>
<ul>
<li><a href="#">W3C推奨マークアップ</a></li>
<li><a href="#">構築手順</a></li>
<li><a href="#">構築実績</a></li>
</ul>
</div>
<div>
<span>SYSTEM</span>
<ul>
<li><a href="#">WEBシステム設計</a></li>
<li><a href="#">データ解析</a></li>
</ul>
</div>
</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>
<small>Copyright &copy; メガドロップダウンメニュー</small>
</footer>
</div><!-- /#container -->
</body>
</html>

/* 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: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;
}

display: flex; で横並びにする

「div」のコンテンツブロックを横並びにするための「囲み」を準備する

<div class="dropContent">
<div>・・・</div>
<div>・・・</div>
<div>・・・</div>
</div><!-- /.dropContent -->

/* mddWrap
------------------------------------- */
#mddNav .mddWrap {
  position: absolute;
  top: 45px;
  left: 0;
  z-index: 100;
  overflow: hidden;
  display: none;
  width: 100%;
  height: 0;
  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: #000 5px solid;
}
#mddNav .mddWrap .mddInner p strong {
  font-size: 1.1em;
  display: block;
}
#mddNav .mddWrap .mddInner .dropContent div span {
  margin-bottom: 5px;
  font-weight: bold;
}
.fa-chevron-right {
  margin-right: 0.5em;
  color: #F00;
}

jQueryの記述

DOMノード
「.mddWrap」を選択する設定をする

f:id:webmaster-web:20160607054830p:plain

A要素に対して何らかの処理を行いたい場合は、引数にAを指定した「children()メソッド」を、親である R を対象に実行します
引数を省略すると、A・B・Cすべての要素が選択されます
children()メソッドで選択されるのは、直下要素のみであり、A1などの子孫要素は対象になりません

children()メソッド

$( セレクタ ) . children( [selector] )
$( セレクタ )の直下にあたる子要素をすべて選択します

each()メソッド

$( セレクタ ) . each( func )
$( セレクタ )のすべての要素に対して関数を実行します
func：実行する関数
each()メソッドから起動する関数は、引数を２つ受け取ることができます
第１引数には「インデックス番号」、第２引数には「繰り返し処理中の要素の値」が入ります

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

f:id:webmaster-web:20160608144128p:plain