投稿日： ｜ 最終更新日:
ドロップダウンメニューを作る
jQueryで、ドロップダウンメニューを作成します。サイトのグローバルナビゲーションとしてよく利用されています。
完成イメージ
横並びのメニューです。
↓
メニューをマウスオーバーすると、子メニューが展開します。
ポイント
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
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のライブラリです。以下からダウンロードします。
解説
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が動いていないときだけ」の判定を記述します
- Python 114
- 制作 54
- RaspberryPi 41
- Django 40
- WordPress 40
- Linux 27
- VPS 22
- JavaScript 21
- PHP 20
- HTML・CSS 19
- AWS 16
- 仮想環境 15
- レスポンシブデザイン 13
- マイコン 11
- WEB全般 11
- 動画製作 9
- Webサービス 8
- 統合開発環境 8
- 機械学習 8
- PyCharm 7
- jQuery 7
- AfterEffects 7
- 起業・設立 7
- Django REST framework 6
- C# 6
- デザイン 6
- SEO 6
- pydata 6
- Visual Studio 5
- 数学 5
- 携帯サイト 5
- heroku 5
- Mac 5
- illustrator 5
- node.js 5
- Anaconda 5
- Nginx 4
- Jupyter Notebook 4
- インフラ 4
- Google Colaboratory 4
- symfony 4
- Webスクレイピング 3
- photoshop 3
- Go言語 3
- PC 3
- ツール 3
- Docker 3
- facebook 3
- 作業効率化 3
- データベース 3
- Cloud9 3
- コマンド 2
- micro:bit 2
- Kali Linux 2
- Webサーバー 2
- MariaDB 2
- ドローン 2
- コンテナ 2
- DaVinci Resolve 2
- ネットワーク 2
- Java 2
- movie 2
- PCDJ 2
- 音楽 2
- XSERVER 2
- Ansible 1
- Vue.js 1
- JSON 1
- Bootstrap 1
- バージョン管理システム 1
- SSL 1
- S3 1
- ムームードメイン 1
- ネットワーク 1
- アニメーション 1
- D3.js 1
- Rhino 1
- アニメ 1
- git 1
- windows 1
- アクセス解析 1
- スマートフォン 1
- アフィリエイトノウハウ 1
- 知識 1
- TypeScript 1
- 役立つ本・書籍 1
- データサイエンス 1
- ESP32 1
- AI 1
- ownCloud 1
- ＡＰＩ 1