投稿日： ｜ 最終更新日:
折りたためるアコーディオンメニュー
カテゴリーをひとまとめにして、目的の情報を探しやすいアコーディオンメニューを作ります。
完成イメージ
マウスオーバーでメニューの背景が変わります。
各「大メニュー」をクリックすると、「サブメニュー」が表示されます。開いている大メニューをクリックするまで開いた状態のままです。
開いた「大メニュー」をクリックすると、「サブメニュー」が閉じます。
アコーディオンメニューとは？
カテゴリーメニューをクリックすると、縦にスライドします。すると、スライドした内側からサブメニューが表示されます。もう一度クリックするとメニューを折りたたみます。この開閉の動きを作るには、jQueryを使用します。
- slideDown()、slideUp()でスライドアニメーションを設置
- addClass()、removeClass()でcssを切り替える
- addClass()、でクラス属性を追加
- removeClass()、でクラス属性を削除
ファイル構成
ファイルをサイトのフォルダに配置します。サイトフォルダ名を「sample」とします。※wordpress基準ですが、wordpressでなくても作成できます。
- sample/
- index.php
- css/
- base.css
- js/
- vendor/
- jquery.min.js
- img
- category_bg.gif
- category_bg_over.gif
- item_bg.gif
- item_bg_over.gif
コード
index.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>accordionmenu</title>
<!--ページ全体-->
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri() . '/css/base.css' ; ?>" />
</head>
<body>
<div id="wrapper" class="clearfix">
<!--アコーディオンメニュー-->
<div id="navi">
<ul class="menu">
<li>
<div class="category">メニュー1</div>
<ul class="item">
<li><a href="11.html">メニュー1‐1</a></li>
<li><a href="12.html">メニュー1‐2</a></li>
<li><a href="13.html">メニュー1‐3</a></li>
<li><a href="14.html">メニュー1‐4</a></li>
<li><a href="15.html">メニュー1‐5</a></li>
<li><a href="16.html">メニュー1‐6</a></li>
</ul>
</li>
<li>
<div class="category">メニュー2</div>
<ul class="item">
<li><a href="21.html">メニュー2‐1</a></li>
<li><a href="22.html">メニュー2‐2</a></li>
<li><a href="23.html">メニュー2‐3</a></li>
<li><a href="24.html">メニュー2‐4</a></li>
<li><a href="25.html">メニュー2‐5</a></li>
<li><a href="26.html">メニュー2‐6</a></li>
</ul>
</li>
<li>
<div class="category">メニュー3</div>
<ul class="item">
<li><a href="31.html">メニュー3‐1</a></li>
<li><a href="32.html">メニュー3‐2</a></li>
<li><a href="33.html">メニュー3‐3</a></li>
<li><a href="34.html">メニュー3‐4</a></li>
</ul>
</li>
<li>
<div class="category"><a href="41.html">メニュー4</a></div>
</li>
</ul>
<img src="<?php bloginfo('template_url'); ?>/images/chapter03/img/category_bottom.gif" alt="" width="200" height="1" />
</div>
</div>
<!--jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="<?php echo get_stylesheet_directory_uri() . "/js/vendor/jquery-1.8.2.min.js" ; ?> "><\/script>')</script>
<script type="text/javascript">
$(function(){
/* アコーディオンメニュー */
$("ul.item").hide();
$("li div.category").click(function(){
if($("+ul",this).css("display")=="none"){
$("+ul",this).slideDown();
$(this).addClass("open");
}
else{
$("+ul",this).slideUp();
$(this).removeClass("open");
}
}).mouseover(function(){
$(this).addClass("rollover");
}).mouseout(function(){
$(this).removeClass("rollover");
});
});
</script>
</body>
</html>
base.css
@charset "utf-8";
/* ------- Set ------- */
html, body, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, p, img {
margin: 0;
padding: 0;
border: 0;
}
ul, ol {
list-style: none;
}
a {
color: #000;
text-decoration: none;
}
a:hover {
color: #F24026;
text-decoration: none;
}
body {
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size: 12px;
background: #EAE3D7;
}
p {
line-height: 1.5;
margin-top: 1em;
margin-bottom: 1.5em;
}
/* clearFix */
.clearfix:after {
height: 0;
visibility: hidden;
content: ".";
display: block;
clear: both;
}
/* ------- wrapper ------- */
#wrapper {
margin: 20px auto;
width: 930px;
}
#navi {
padding:0 30px 0 0;
float: left;
width: 200px;
}
#contents {
width: 700px;
float: right;
position: relative;
}
/* ------- navi ------- */
ul.menu {
width:200px;
margin-top:3px;
}
ul.menu, ul.item {
margin: 0;
padding: 0;
list-style: none;
}
li div.category {
height: 45px;
line-height: 45px;
text-indent:10px;
background:url("../img/category_bg.gif");
cursor:pointer;
}
li div.category a {
display:block;
}
li div.open {
background:url("../img/category_bg_over.gif");
}
li div.rollover {
background:url("../img/category_bg_over.gif");
font-weight: bold;
color: #F45139;
}
ul.item li a {
display:block;
height: 34px;
line-height: 34px;
font-size: 11px;
text-indent:26px;
background:url("../img/item_bg.gif");
}
ul.item li a:hover{
background:url("../img/item_bg_over.gif");
color: #fff;
}
#spec {
float: right;
width: 340px;
}
#spec h1 {
padding: 5px 0 5px 10px;
background: #5B463E;
color: #FFF;
}
#spec p {
line-height: 2;
}
jquery.min.js
jQueryのライブラリです。以下からダウンロードします。
→jQuery
使用する画像ファイル
カテゴリーにマウスオーバー、マウスアウトしたとき以下の画像が切り替わります。
category_bg.gif
category_bg_over.gif
item_bg.gif
item_bg_over.gif
解説
1.メニュー部分記述
メニュー1～メニュー4までカテゴリーを分けます。ul、li要素を入れ子にして、大メニューの中にサブメニューが入る構造です。
メニュー4のようにサブメニューが無い場合、大メニューをa要素で囲みます。
ナビゲーション全体を囲むul要素のclass属性は「menu」を定義します。メニュー1～メニュー4の大メニューには「category」を定義します。サブメニューには「item」を定義します。
2.スタイルの記述
base.cssに、アコーディオンメニューのスタイルを記述します。
/* ------- navi ------- */
ul.menu {
width:200px;
margin-top:3px;
}
ul.menu, ul.item {
margin: 0;
padding: 0;
list-style: none;
}
li div.category {
height: 45px;
line-height: 45px;
text-indent:10px;
background:url("../img/category_bg.gif");
cursor:pointer;
}
li div.category a {
display:block;
}
li div.open {
background:url("../img/category_bg_over.gif");
}
li div.rollover {
background:url("../img/category_bg_over.gif");
font-weight: bold;
color: #F45139;
}
ul.item li a {
display:block;
height: 34px;
line-height: 34px;
font-size: 11px;
text-indent:26px;
background:url("../img/item_bg.gif");
}
ul.item li a:hover{
background:url("../img/item_bg_over.gif");
color: #fff;
}
幅
「ul.menu」にナビゲーション全体の幅200pxを指定します。
リストのマーク
ul要素、li要素によって表示されるインデントや○マークを消すため「list-style:none」を指定します。
リンクの反応
「li div.category a」と「ul.item li a」がブロック単位でマウスが反応するように「display:block」を設定します。
マウスカーソル
14～20行目の「li div.category」は、「 cursor:pointer;」を指定します。マウスオーバーしたときカーソルの矢印が指マークになります。
サブメニューの背景
14～20行目の「li div.category」は、通常時のメニューの背景を指定します。26～28行目の「li div.open」は、サブメニューが開いた状態のとき、背景に「category_bg_over.gif」を指定します。
3.jQueryスクリプト
index.htmlにjQueryのスクリプトを設置します。
<!--jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="<?php echo get_stylesheet_directory_uri() . "/js/vendor/jquery-1.8.2.min.js" ; ?> "><\/script>')</script>
<script type="text/javascript">
$(function(){
/* アコーディオンメニュー */
$("ul.item").hide();
$("li div.category").click(function(){
if($("+ul",this).css("display")=="none"){
$("+ul",this).slideDown();
$(this).addClass("open");
}
else{
$("+ul",this).slideUp();
$(this).removeClass("open");
}
}).mouseover(function(){
$(this).addClass("rollover");
}).mouseout(function(){
$(this).removeClass("rollover");
});
});
</script>
サブメニューを全て隠す
7行目$(“ul.item”).hide()で最初にサブメニューを全て隠します。
メニュー開閉
8行目のカテゴリーメニューを指すli div.categoryをクリックしたとき、9～21行目を実行します。9行目、14行目の「$(“+ul”,this)」は、クリックしたカテゴリーに隣接するul要素です。大メニューの中のサブメニューを意味します。
サブメニューが表示されていないとき（displayがnoneのとき）サブメニューがslideDownで開きます。show()の代わりです。
それ以外のときはslideUpで閉じます。hide()の代わりです。
マウスオーバーのスタイル
17～18行目は、マウスオーバーしたときクラス属性に「rollover」を追加します。背景が「category_bg_over.gif」になります。
マウスアウトのスタイル
19～20行目は、マウスアウトしたときクラス属性の「rollover」を削除します。背景が元の「category_bg.gif」に戻ります。
トラックバック用のURL
プロフィール
最近の投稿
人気記事
カテゴリー
- 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
広告