読者です 読者をやめる 読者になる 読者になる

ハロートレーニングWebデザインの勉強 Webデザイン フェリカテクニカルアカデミーWebサイト制作科

アコーディオンメニュー

アコーディオンメニュー

  • 最初からすべての情報を表示するのではなく、次の段階に選択しやすいように見せないようにしておく
  • はじめはコンテンツが見えない(クリックすると内容が見えることを明示するために、一つ目は開けておく)
  • ユーザー自身が積極的に探し、クリックして開くというアクションを起こしやすい
アコーディオンメニューの特徴
  • 見せるコンテンツの隣にナビゲーションリンクがある
HTMLの記述
  1. 定義型リストを利用する
  2. 見出しと段落を利用する
  3. 番号なしリストを利用する


1. 定義型リスト

<dl class="accordion">
<dt>おすすめ</dt>
<dd>ここにおすすめの内容が入ります。</dd>
<dt>イベント</dt>
<dd>ここにイベントの内容が入ります。</dd>
<dt>お知らせ</dt>
<dd>ここにお知らせの内容が入ります。</dd>
</dl>


2. 見出しと段落

<div class="accordion">
<div class="acdBox">
<h4 class="category">おすすめ</h4>
<p>ここにおすすめの内容が入ります。</p>
</div><!-- /.acdBox -->
<div class="acdBox">
<h4 class="category">イベント</h4>
<p>ここにイベントの内容が入ります。</p>
</div><!-- /.acdBox -->
<div class="acdBox">
<h4 class="category">お知らせ</h4>
<p>ここにお知らせの内容が入ります。</p>
</div><!-- /.acdBox -->
</div><!-- /.accordion -->


3. 番号なし箇条書き

<div class="accordion">
<ul class="nav"> 
  <li>
  <div class="category">家具・インテリア</div>
    <ul class="menu"> 
    <li><a href="#">ソファ</a></li> 
    <li><a href="#">ベッド</a></li> 
    <li><a href="#">テーブル</a></li> 
    <li><a href="#">チェア</a></li> 
    </ul> 
  </li>
  <li>
  <div class="category">ステーショナリー</div>
    <ul class="menu"> 
    <li><a href="#">ペン・鉛筆</a></li> 
    <li><a href="#">ノート</a></li> 
    <li><a href="#">ファイル</a></li> 
    <li><a href="#">付箋</a></li> 
    </ul> 
  </li> 
  <li>
  <div class="category">生活雑貨</div>
    <ul class="menu"> 
    <li><a href="#">キッチン用品</a></li> 
    <li><a href="#">掃除・洗濯用品</a></li> 
    <li><a href="#">バス・トイレ用品</a></li> 
    <li><a href="#">その他</a></li> 
    </ul> 
  </li> 
</ul><!-- /.nav -->
</div><!-- /.accordion -->


上の記述を見てわかるように「定義型リスト」で練習することがもっとも効率的です。

html, body, h1, h2, h3, h4, p, dl, dt, dd, ul,li {
  margin:0;
  padding:0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul { list-style: none; }
a { text-decoration: none; }
body {
  background: #FFF;
  font-size: 16px;
}
.accordion {
  width:400px;
  margin:50px auto;
}
.accordion dt{
  background: #7CADB6;
  border-bottom: 1px solid #FFF;
  cursor: pointer;
  padding: 12px 1em 10px 1em;
  color: #FFF;
  font-size: 18px;
  font-weight: bold;
}
.accordion dd{
  border: 1px solid #7CADB6;
  border-top: none;
  height: 160px;
  padding: 1em;
}

jQueryを記述

  • セレクタを読み終わって準備ができたら処理を実行する
$(function(){
  //処理
});
  • コンテンツはすべて隠す
$(function(){
  $( '.accordion>dd' ).hide();
});

f:id:web-design-lesson:20160522005507p:plain

  • クリックされたとき(dtがクリックされたとき)
$(function(){
  $( '.accordion>dd' ).hide();
  $( '.accordion>dt' ).on( 'click', function() {
    //処理
  });
});
  • 処理(押されたdtの隣にあるddが閉じられていたら開く)
  if($($( this ).next()).css( 'display' ) == 'none' ){
    $( this ).next().slideDown();
  }


これだけの記述では開くための命令だけのため、同時に閉じる命令も記述します。

    if($( this ).next().css( 'display' )== 'none' ) {
      $('.accordion>dd' ).slideUp();
      $( this ).next().slideDown();
    }


この場合、開く処理と同時に閉じる処理をするために、すでに開いている隣のdtは、クリックしても何も起こりません。
クリックする度にコンテンツを閉じたい場合には、slideUp()の1行をif文の上に行に移します。

  • 1個めのコンテンツは開いておいて、その他のタブにもコンテンツが隠れていることを明示します(1個め以外は隠す)
  $( '.accordion>dd:not(:first)' ).hide();
  • まとめ
$(function(){
  $( '.accordion>dd:not(:first)' ).hide();
  $( '.accordion>dt' ).on( 'click', function() {
    if($( this ).next().css( 'display' )== 'none' ) {
      $('.accordion>dd' ).slideUp();
      $( this ).next().slideDown();
    }
  });
});

f:id:web-design-lesson:20160522013019p:plain

パネルが開いているカテゴリの色を変える

  • addClass( )メソッド
$(function(){
  $( '.accordion>dd:not(:first)' ).hide();
  $( '.accordion>dt:first' ).addClass( 'open' );
  $( '.accordion>dt' ).on( 'click', function() {
    if($( this ).next().css( 'display' )== 'none' ) {
      $('.accordion>dd' ).slideUp();
      $( this ).next().slideDown();
    }
  });
});

f:id:web-design-lesson:20160523234400j:plain

  • removeClass( )メソッド
$(function(){
  $( '.accordion>dd:not(:first)' ).hide();
  $( '.accordion>dt:first' ).addClass( 'open' );
  $( '.accordion>dt' ).on( 'click', function() {
    if($( this ).next().css( 'display' )== 'none' ) {
      $('.accordion>dd' ).slideUp();
      $( '.accordion>dt' ).removeClass( 'open' );
      $( this ).next().slideDown();
      $( this ).addClass( 'open' );
    }
  });
});

f:id:web-design-lesson:20160523234422j:plain

テキスト例
  • 隣接セレクタで記述
  • ddはdtの下層ではなくdtの兄弟のため隣接セレクタを使う必要があります('this dd'とは記述できない)
$(function(){
$('dd:not(:first-of-type)').css('display','none');
  $('dl dt').click(function(){
    if($('+dd',this).css('display')=='none'){
      $('dd:visible').slideUp('slow');
      $('+dd',this).slideDown('slow');
    }
  });
});
$(this + dd)と記述しない理由
  • thisオブジェクトプラス未定義変数ddという文字列連結になってしまうから
thisとは
  • console.log(this); と記述してthisが取得している値を確認する