ホーム >  JavaScript >  ドロップダウンメニューを作る


Posted:2015/02/17 9:00:02 AM|Category : JavaScript

ドロップダウンメニューを作る

jQueryで、ドロップダウンメニューを作成します。サイトのグローバルナビゲーションとしてよく利用されています。

完成イメージ
横並びのメニューです。
jQ0011

メニューをマウスオーバーすると、子メニューが展開します。
jQ0012

ポイント

ul要素を基本に、jQueryの「slideDown」「slideUp」を組み込みます。
ポイントは以下の通りです。

  • HTMLソースはul要素を入れ子にする。
  • 子メニューをマウスオーバーで展開する。
  • 子メニュー展開は、jQueryで行う。
  • 子メニューのスタイルはCSSで行う。

ファイル構成

ファイルをサイトのフォルダに配置します。サイトフォルダ名を「sample」とします。

※wordpress基準ですが、wordpressでなくても作成できます。

  • sample/
  • index.php
  • style.css
  • css/
  • sample.css
  • js/
  • common.js
  • vendor/
  • jquery.min.js
  • img/
  • m_child.png

コード

index.php

<!DOCTYPE HTML>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>タイトル</title>
  <link href="<?php echo get_stylesheet_directory_uri() . '/css/sample.css' ; ?>" rel="stylesheet" type="text/css" />
  <script src="<?php echo get_template_directory_uri() . '/js/jquery.min.js' ; ?>"></script>
  <script type="text/javascript" src="<?php echo get_template_directory_uri() . '/js/common.js' ; ?>"></script>
<?php wp_head(); ?>
</head>
<body>
<div id="mainnavi">
  <div class="wrapper">
    <header>
      <div class="wrapper">
        <!-- ドロップダウンメニュー -->
        <nav>
          <ul>
            <li><a href="#">nav1</a></li>
            <li><a href="#">nav2</a>
              <ul>
                <li><a href="#">nav2-1</a></li>
                <li><a href="#">nav2-2</a></li>
                <li><a href="#">nav2-3</a></li>
                <li><a href="#">nav2-4</a></li>
                <li><a href="#">nav2-5</a></li>
              </ul>
            </li>
            <li><a href="#">nav3</a></li>
            <li><a href="#">nav4</a></li>
            <li><a href="#">nav5</a></li>
          </ul>
        </nav>
        <!-- ドロップダウンメニューここまで -->
      </div><!-- wrapper end -->
    </header>
  </div><!-- wrapper end -->
</div><!-- mainnavi end -->
<?php wp_footer(); ?>
</body>
</html>

sample.css

@charset "UTF-8";
 
* {
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
 
li {
    list-style: none;
}
 
a img {
    border: none;
}
 
 
html {
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: #000;
    line-height: 120%;
    height: 100%;
}
 
body {
    padding: 0;
    margin: 0 auto;
    width: 1000px;
    position: relative;
    min-height: 100%;
    background: #FFF;
}

/*下層ページ共通ページフォーマット
-----------------------------------------*/
div[id|="page"] > div.wrapper {
	border-top: 1px solid #FFF;
	background: #FFF;
	position: relative;
	padding-top: 100px;
	padding-bottom: 20px;
}

div[id|="page"] > div.wrapper:after {
	content: "";
	display: block;
	clear: both;
}

/*下層ページ共通ナビゲーション
-----------------------------------------*/
div[id|="page"] > div.wrapper header {

}

div[id|="page"] > div.wrapper header div.wrapper {
	border-bottom: 1px solid #CCC;
	padding-bottom: 1px;
	margin: 0px 10px 10px;
	position: relative;
}

/*下層ページ共通ドロップダウン
-----------------------------------------*/
div[id|="page"] nav {
	position: absolute;
	bottom: 6px;
	left: 0;
	z-index: 1000;
	line-height: 1;
}

div[id|="page"] nav > ul > li {
	float: left;
	border-bottom: 8px solid #949494;
	width: 130px;
	margin: 0 0 0 2px;
	position: relative;
}

div[id|="page"] nav > ul > li:hover {
	background: #52BADC;
}

div[id|="page"] nav > ul > li > a {
	display: block;
	text-align: center;
	padding: 15px 0 10px 0;
}

div[id|="page"] nav > ul > li ul {
	position: absolute;
	border-top: 1px solid #FFF;
}

div[id|="page"] nav > ul > li ul a {
	display: block;
	width: 130px;
	padding: 15px 5px;
	background: url(img/m_child.png);
	border-bottom: 1px solid #FFF;
	color: #FFF;
}

div[id|="page"] nav > ul > li ul a:hover {
	background: #2698BD;
	text-decoration: none;
}

m_child.png

m_child

common.js

//ドロップダウンメニュー
jQuery(function(){

  $("nav ul ul").hide();

  $("nav li").hover(function(){
    $("ul:not(:animated)",this).slideDown("fast");
  },

  function(){
    $("ul",this).slideUp("fast");
  });
});

jquery.min.js

jQueryのライブラリです。以下からダウンロードします。

jQuery

解説

jsファイルとcssファイル呼び出し

index.php
  <link href="<?php echo get_stylesheet_directory_uri() . '/css/sample.css' ; ?>" rel="stylesheet" type="text/css" />
  <script src="<?php echo get_template_directory_uri() . '/js/vendor/jquery.min.js' ; ?>"></script>
  <script src="<?php echo get_template_directory_uri() . '/js/common.js' ; ?>"></script>

以下の外部ファイルを呼び出します。

  • sample.css
  • common.js
  • jquery.min.js

外部ファイルの役割は以下の通りです。

sample.css → ページ全体、ドロップダウンメニューのスタイルを記述。
common.js → ドロップダウンメニューの仕組みを記述。
jquery.min.js → jQueryのライブラリ。

「get_stylesheet_directory_uri()」は現在のテーマのスタイルシートがあるディレクトリのURLを返します。「get_template_directory_uri()」は現在のテンプレートのパス名(URI)を返します。

※wordpressであるため、style.cssは自動的にスタイルシートとして適用されます。

属性セレクタで共通スタイルを作る

sample.css
div[id|="page"] > div.wrapper {
div[id|="page"] > div.wrapper:after {

どのページにも共通するパーツには、「div[id|=”page”]」でcssを設定します。index.phpページ専用パーツには「div#page-index」を利用します。

E[foo|="fumo2"]

上記を指定すると、E要素のfoo属性でハイフン(|)区切りの先頭の単語が一致するものを指定できます。たとえば<div="page-index">○○</div>にヒットさせたい場合は、「div[id=|"page"]」を記述します。

※複数のページに共通して存在するグローバルメニューのスタイルに使用すると便利です。

メニューのスタイル

メニューをドロップダウンしたときの位置を設定
/*下層ページ共通ドロップダウン
-----------------------------------------*/
div[id|="page"] nav {
    position: absolute;
    bottom: 6px;
    left: 0;
    z-index: 1000;
    line-height: 1;
}

z-index: 1000;
ドロップダウンメニューは、その他のコンテンツの上部に重なります。コンテンツの重なり順(z-index)に高い数値を設定します。

1階層目のメニュー
div[id|="page"] nav > ul > li {
	float: left;
	border-bottom: 8px solid #949494;
	width: 130px;
	margin: 0 0 0 2px;
	position: relative;
}

width: 130px;
position: relative;

1階層目のメニューを作成します。li要素に幅(width)を指定し、「position: relative」をつけます。widthを指定すれば、その内側のa要素はpadding設定するとき幅を気にせずに指定できます。「position: relative」は、子メニューを設定するために使用します。

子メニューのスタイル
div[id|="page"] nav > ul > li ul {
	position: absolute;
	border-top: 1px solid #FFF;
}

div[id|="page"] nav > ul > li ul a {
	display: block;
	width: 130px;
	padding: 15px 5px;
	background: url(img/m_child.png);
	border-bottom: 1px solid #FFF;
	color: #FFF;
}

div[id|="page"] nav > ul > li ul a:hover {
	background: #2698BD;
	text-decoration: none;
}

子メニューのスタイルを指定します。

「position: absolute」で、位置を絶対指定します。

「m_child.png」は子メニューの背景で、半透明の黒です。

jQueryでドロップダウンを設定する前は、常に子メニューが表示されている状態です。

マウスオーバー時のメニューを表示する仕組み

マウスが乗っている時の動作
jQuery(function(){

  $("nav ul ul").hide();

  $("nav li").hover(function(){
    $("ul:not(:animated)",this).slideDown("fast");
  },

  function(){
    $("ul",this).slideUp("fast");
  });
});

jQueryを利用します。

マウスアウト時は子メニューを非表示にします。

マウスオーバー時には子メニューを表示します。

マウスが離れたときは、元の非表示にします。

「slideDown」は、徐々に子メニューを表示します。「sideUp」は、下から徐々に子メニューを非表示にします。

マウスが乗っていないとき動作を抑える
  $("nav li").hover(function(){
    $("ul:not(:animated)",this).slideDown("fast");
  },

「slideDown」だけでは、マウスの動作が判定されるだけのアニメーションになってしまいます。「slideDownが動いていないときだけ」の判定を記述します


トラックバック用のURL
プロフィール

名前:イワサキ ユウタ 職業:システムエンジニア、ウェブマスター 誕生:1986年生まれ 出身:静岡県 特技:ウッドベース 略歴 2008年04月 金融機関系I

最近の投稿
人気記事
カテゴリー
広告