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

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

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

jQuery

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

  • 大きな二次元のパネルでナビゲーションの選択肢をグループ化できる
  • ナビゲーションの選択対象をレイアウトやアイコンによって構造化できる
  • すべてが一目で見渡せる(スクロールが不要)

表示のタイミング

  1. 0.5秒間は待つ。
  2. ポインタがナビゲーションバーの項目上にまだ停止していれば、メガドロップダウン式メニューを0.1秒以内に表示する
  3. ポインタがナビゲーションバーの項目とドロップダウンメニューの両方の外に0.5秒間外れるまでは、メガドロップダウン式のメニューを表示し続ける。その後は、0.1秒内で表示を消す
キリン

www.kirin.co.jp

クレハ

www.kureha.co.jp

ナイキ

www.nike.com




手順

  1. HTMLの文章構造を構築
  2. CSSを記述
  3. 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()メソッド
each()メソッド
  • $( セレクタ ) . each( func )
  • $( セレクタ )のすべての要素に対して関数を実行します
  • func:実行する関数
  • each()メソッドから起動する関数は、引数を2つ受け取ることができます
  • 第1引数には「インデックス番号」、第2引数には「繰り返し処理中の要素の値」が入ります
$(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