開閉式メニューの作成>

メニューの項目が多い場合、項目を折り畳んでシンプルに表示し、必要な場合のみサブメニューとして開きます。
ここでは、jQueryを使用してシンプルは開閉メニューを作成します。
×

仕様－作成する仕掛けの概要

下記のような仕様で開閉式メニューを作成。
右図がその動作イメージ

仕様
  • メニューとサブメニューに分割
    　右図②の枠線部がメニュー、枠線が無い部分がサブメニュー
  • サブメニューは既定で非表示
  • メニュー項目（枠線内）をクリックすると、そのサブメニューが開く
  • 再度、メニュー項目をクリックするとサブメニューを閉じる
  • 開閉状態を分かり易くする為に画像を末尾に表示（三角矢印）
    　閉じている状態　開いている状態
  • 最上部の「全て展開」をクリックするとサブメニューを全て展開する。右下図③
    　この時、文言を「折り畳む」に変更
  • 同じく「折り畳む」をクリックするとサブメニューを全て折り畳み、
    表示文言を既定状態の「全て展開」に変更する。
その他の仕様
  • メニュー上でマウスポインタも形状を変える（CSS疑似クラス）
  • 同じく、背景色を薄い緑に変える（CSS疑似クラス）
  • サブメニューはゆっくり下方に開いていく（jQueryの機能）



まずは簡素な構成から順に・・・・
①：既定（初期）状態


②：一部のメニューを開いた状態


③：全て展開した状態

１．単純サブメニューの開閉

メニュー項目をクリックするとサブメニューが開き、再度のクリックでサブメニューを折り畳みます。
このとき、畳まれている上体では(+)、開いている状態では(-)の文字を、メニュー項目の右端に追加します。

実装方法

下記.は、そのスクリプトを使用した場合のHTML例　　動作デモ　サンプルのダウンロード
<!DOCTYPE HTML>

<HTML lang="ja" dir="ltr">
<HEAD>

<meta charset="UTF-8">
<SCRIPT src="jquery.min.js"></SCRIPT>
<SCRIPT>
$(function(){
   $("#acMenu div").on("click", function() {
      $(this).next().slideToggle();
      $(this).toggleClass("active");
   });
});
</SCRIPT>

<STYLE type="text/css">
<!--

#main{
   width:600px;
   margin:50px auto;
}
#acMenu div{
   display:block;
   cursor:pointer;
}
#acMenu div +ul{
   display:none;
}
#acMenu div:after{
   content: '(+)';
}
#acMenu div.active:after{
   content: '(-)';
}
-->
</STYLE>

<TITLE>開閉式メニュー</TITLE> 

</HEAD> 

<BODY>
 
<DIV id="main">
   <DIV id="acMenu">
      <DIV>メニュー１</DIV>
      <UL>
         <LI>MENU 1</LI>
      </UL>
      <DIV>メニュー２</DIV>
      <UL>
         <LI>MENU a</LI>
         <LI>MENU b</LI>
      </UL>
      <DIV>メニュー３</DIV>
      <UL>
         <LI>MENU x</LI>
         <LI>MENU y</LI>
         <LI>MENU z</LI>
      </UL>
  </DIV>
</DIV>

</BODY>

</HTML>

①：既定（初期）状態



②：一部のメニューを開く



③：全て展開した状態

動作原理

ID名「acMenu」の子要素「DIV」をクリックされた場合（上右図②：“メニュー２”）、
そのDIVの次の要素「UL」（“MENU 1”）を表示／非表示に切り替えます。 

   $("#acMenu div").on("click", function() {
      $(this).next().slideToggle();
      $(this).toggleClass("active");
   });

ID名「acMenu」の子要素「DIV」は、行目　$("#acMenu div")　で表現
その次のタグは、１１行目jQueryの関数.next()で表現。
よって、該当メニューがクリックされた時の処理は下記の様に表せます。
　　　（this はクリックされた要素）
$(this).next().slideToggle();

これだけでサブメニューの展開、折り畳みは実現できますが、
展開状態を分かり易くするための工夫が下記。

メニュー文字列の後に、該当メニューが
折り畳まれている場合：(+)を付加
展開されている場合：(-)を付加
します。

そのためには、現在の状態を識別する為の何かが必要となり、ここでは、クラス「active」を、その識別とします。
すなわち、クリックされたメニューが
展開されている場合：クラス「active」を定義
折り畳まれている場合：定義されていない
とします。

IF文、および
　hasClaaa(className)：クラスが定義されているかを調べる関数
　addClass(className)：クラスを追加する
　removeClass（className）：クラスを削除する
を使って、トグル動作を実現できますが、ここでは、もう少し簡単に、toggleClass()関数を使用します。

関数仕様　toggleClass(className)：
該当要素にclassNameがあればclassNameを削除し、無ければ追加

これで、指定のクラスが定義されていない場合には、(+)を、
定義されていない場合には、(-)をメニュー項目に付加できます。

その部分が、スタイルシートの３１～３６行目の部分。
疑似クラスを利用して書式を定義しています。
#acMenu div:after{
   content: '(+)';
}
#acMenu div.active:after{
   content: '(-)';
}

疑似クラスを用いた文字の追加


:before擬似クラスと:after擬似クラスの書式

要素名:before {
　　プロパティ: 値;
}

要素名:after {
　　プロパティ: 値;
}
※注：IE6,IE7では未サポート。

文字列を前後に付加する場合、contentプロパティを使用して、下記のように記述
p:before { /* 前に付加 */
　　content: "[追加する文字列]";
}
p:after { /* 後ろに付加 */
　　content: "[追加する文字列]";
}

同じく、下記のように画像も追加可
p:after {
　　content: url("img/sample.png");
}


ブロックレベルの要素（DIV等）に:beforeや:afterの擬似要素を使った場合、ブロックレベルに対して追加されます。

２．全てを展開／折り畳む

全てを展開、または折り畳めるようにします。 　　動作デモ 　サンプルのダウンロード

全てを展開／折り畳むには、前項の tggle を使用することはできません。
全体をトグル動作させると、一部が展開されている場合、展開されているものは畳まれ、畳まれているものは展開、
という、奇妙な動作が起きてしまいます。

よって、現在の状態を記憶しておき、「全てを展開」をクリックされ場合、現在の状態が
・畳まれている状態→サブメニューを全て表示（display:block;）
・全て展開されている状態→サブメニューを全て非表示（display:none;）
とします。ソースの１６～２９行目

現在の状態は、「全てを展開」」の要素（ID="expandAll"）にクラス（Active）が定義されているか否かで判定。

定義されているかの判定は、hasClaaa(className)関数（戻り値：true/false）

クラスの追加／削除は、 　addClass(className)、removeClass（className）関数を使用。
　　（toggleClass(ClassName)を使用しても可）
<!DOCTYPE HTML>

<HTML lang="ja" dir="ltr">
<HEAD>
<meta charset="UTF-8">

<SCRIPT src="jquery.min.js"></SCRIPT>
<SCRIPT>
$(function(){
   $("#acMenu div").on("click", function() {
      $(this).next().slideToggle();
      $(this).toggleClass("active");
   });
});

function foldItem(menu,subMenu){
/*
   全て展開⇔折り畳む　をトグル実行
*/
   if($(menu).hasClass("active")){
      $(subMenu).next().slideUp('normal');        /* 全て畳む   */
      $(menu).add(subMenu).removeClass('active'); /* active削除 */
      $(menu).text('全て展開');
   }else{
      $(subMenu).next().slideDown('normal');      /* 全て展開   */
      $(menu).add(subMenu).addClass('active');    /* active追加 */
      $(menu).text('折り畳む');
   }
}

</SCRIPT>

<STYLE type="text/css">
<!--

#main{
   width:600px;
   margin:50px auto;
}
#acMenu div,#expandMenu{
   display:block;
   cursor:pointer;
}
#acMenu div +ul{
   display:none;
}
#acMenu div:after,#expandMenu:after{
   content: '(+)';
}
#acMenu div.active:after,#expandMenu.active:after{
   content: '(-)';
}
-->
</STYLE>

<TITLE>開閉式メニュー</TITLE> 

</HEAD> 

<BODY>
 
<DIV id="main">
   <DIV><SPAN>メニュー</SPAN><SPAN id="expandMenu" onclick='foldItem(this,"#acMenu>div")'>全て展開</SPAN></DIV>
   <BR>
   <DIV id="acMenu">
      <DIV>メニュー１</DIV>
      <UL>
         <LI>MENU 1</LI>
      </UL>
      <DIV>メニュー２</DIV>
      <UL>
         <LI>MENU 1</LI>
         <LI>MENU 2</LI>
      </UL>
      <DIV>メニュー３</DIV>
      <UL>
         <LI>MENU 1</LI>
         <LI>MENU 2</LI>
         <LI>MENU 3</LI>
      </UL>
  </DIV>
</DIV>

</BODY>

</HTML>

①：既定（初期）状態



②：全て展開した状態

３．開閉状態を画像で表示

少し、装飾を施して実践的にしたもの　　動作デモ　サンプルのダウンロード



<!DOCTYPE HTML>

<HTML lang="ja">
<HEAD>

<meta charset="UTF-8">
<meta name="GENERATOR" content="JustSystems Homepage Builder Version 18.0.0.1 Trial for Windows">
<SCRIPT src="jquery.min.js"></SCRIPT>

<script>

$(function(){
   $('#acMenu div').on('click', function() {
      $(this).next().slideToggle();
      $(this).toggleClass("active");
   });
});

function foldItem(menu,subMenu){
/*
   全て展開⇔折り畳む　をトグル実行
*/
   if($(menu).hasClass("active")){
      $(subMenu).next().slideUp('normal');        /* 全て畳む   */
      $(menu).add(subMenu).removeClass('active'); /* active削除 */
      $(menu).text('全て展開');
   }else{
      $(subMenu).next().slideDown('normal');      /* 全て展開   */
      $(menu).add(subMenu).addClass('active');    /* active追加 */
      $(menu).text('折り畳む');
   }
}

</script>

<STYLE type="text/css">
<!--
#main{
/* 全体　中央揃え */
   width:600px;
   margin:20px auto;
}
#acMenu,#expandMenu{
   color:green;
}
#acMenuTitle{
/* リストメニュータイトル */
   width:300px;
   margin-bottom:5px;
}
#acMenu{
/* リストメニュー */
   margin-top:0;
   font-size:x-large;
}
#acMenu div{
/* リスト項目の形状 */
   display:block;
   width:300px;
   border-width : 1px;border-style : solid; /* 枠線付き */
}
#acMenu div:hover,#expandMenu:hover{
   background-color:#ddffdd;
   cursor:pointer;            /* マウスポインタ形状 */
}
#acMenu div +ul{
   display:none;	/* メニュー項目は既定で非表示 */
}
#acMenu div ul,li{
   padding:0; margin:0;	/* リスト、サブ項目の余白無し */
}
#acMenu div:after,#expandMenu:after{
 /* 直後に下向き矢印追加 */
   padding-left:5px;
   content:url(btn_expand.gif);
}
#acMenu div.active:after,.active#expandMenu:after{
/* 直後に上向き矢印追加 */
   padding-left:5px;
   content:url(btn_fold.gif);
}
-->
</STYLE>

<TITLE>開閉式メニュー</TITLE> 

</HEAD> 

<BODY>

<DIV id="main">

   <DIV>
      <SPAN id="acMenuTitle">メニュー</SPAN>
      <span id="expandMenu" onclick='foldItem(this,"#acMenu>div")'>全て展開</SPAN>
   </DIV>

   <DIV id="acMenu">

      <DIV>便利ツール</DIV>
      <ul>
          <li><a href="https://mt-soft.sakura.ne.jp/web_dl/petit_tool/mrecorder/" target="_blank">マウスレコーダー</a></li>
          <li><a href="https://mt-soft.sakura.ne.jp/web_dl/petit_tool/fRename/" target="_blank">ファイル名一括変更</a></li>
          <li><a href="https://mt-soft.sakura.ne.jp/web_dl/petit_tool/clickcapture/" target="_blank">クリックキャプチャー</a></li>
          <li><a href="https://mt-soft.sakura.ne.jp/web_dl/petit_tool/get_string/" target="_blank">ポイント位置の文字列取得</a></li>
      </ul>

      <DIV>おもしろページ</DIV>
      <ul>
          <li><a href="https://mt-soft.sakura.ne.jp/link/tool/index_route.html" target="_blank">無料WEB地図</a></li>
          <li><a href="https://mt-soft.sakura.ne.jp/link/igo/index_2.html" target="_blank">独習WEB詰碁</a></li>
          <li><a href="https://mt-soft.sakura.ne.jp/kyozai/" target="_blank">独習エクセル教材</a></li>
          <li><a href="https://mt-soft.sakura.ne.jp/link/cat/" target="_blank">おもしろ可愛い猫GIF</a></li>
      </ul>

      <DIV>シフト表自動作成ツール</DIV>
      <ul>
         <li><a href="https://mt-soft.sakura.ne.jp/web_dl/common/shift_hikaku/" target="_blank">機能比較表</a></li>
         <li><a href="https://mt-soft.sakura.ne.jp/web_dl/free_shift/" target="_blank">ふりーシフト君</a></li>
         <li><a href="https://mt-soft.sakura.ne.jp/web_dl/shift_kun/" target="_blank">シフト君</a></li>
         <li><a href="https://mt-soft.sakura.ne.jp/web_dl/shift_auto/" target="_blank">勤務シフトスケジューラー</a></li>
         <li><a href="https://mt-soft.sakura.ne.jp/web_dl/excel_shift/help_excel/" target="_blank">エクセル勤務シフト</a></li>
      </ul>

   </DIV>

</DIV> 

</BODY>

</HTML>

①：既定（初期）状態


②：一部のメニューを開く


③：全て展開した状態

４．関連ページ