ホーム >  JavaScript >  折りたためるアコーディオンメニュー


Posted:2015/07/28 9:00:06 AM|Category : JavaScript

折りたためるアコーディオンメニュー

カテゴリーをひとまとめにして、目的の情報を探しやすいアコーディオンメニューを作ります。

完成イメージ

jQ0022

マウスオーバーでメニューの背景が変わります。

jQ0023

各「大メニュー」をクリックすると、「サブメニュー」が表示されます。開いている大メニューをクリックするまで開いた状態のままです。

jQ0024

開いた「大メニュー」をクリックすると、「サブメニュー」が閉じます。

jQ0025

アコーディオンメニューとは?

カテゴリーメニューをクリックすると、縦にスライドします。すると、スライドした内側からサブメニューが表示されます。もう一度クリックするとメニューを折りたたみます。この開閉の動きを作るには、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 Pゴシック", "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

category_bg_over.gif

category_bg_over

item_bg.gif

item_bg

item_bg_over.gif

item_bg_over

解説

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
プロフィール

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

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