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

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

アコーディオンメニュー

アコーディオンメニュー

  • アコーディオンメニューの本質は、隠しコンテンツです
  • 何をどこまで消えていることが、必然性があるかを検討します
すべてが開いている状態を作成
  • jQueryの設計から、逆算してマークアップをする必要があります
  • ulを設計する(メニューのみの場合)
  • dlを設計する(コンテンツ内容を見せる場合)※テキスト参照

ulを設計する

  • クリックイベントは、div要素などに対して設定する(ulは、実態が無い li を囲む概念のため)

<div id="container">
<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>
  <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> 
  <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>
</div><!-- /#container -->
@charset "UTF-8";

/* reset
------------------------------------*/
html, body, 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;
}

/* font-size */
html { font-size: 62.5%; }  /* =10px */
body { font-size: 16px; font-size: 1.6rem; }  /* =16px */
ul { font-size: 16px; font-size: 1.6rem; }

/* body
------------------------------------*/
body{
  background:#FFF;
  line-height: 1.5;
  color: #164158;
}

/* layout
------------------------------------*/
#container {
  width:220px;
  margin: 50px auto;
}

/* menu
------------------------------------*/
.category {
  margin-top: 5px;
  height: 40px;
  line-height: 40px;
  text-indent: 3rem;
  background: #CCC;
  cursor: pointer;
}
ul.menu a{
  display:block;
  height: 35px;
  line-height: 35px;
  color: #164158;
}
ul.menu li{
  text-indent: 4.5rem;
}
ul.menu li:hover{
  background: #EEE;
}


別例

  • ulのネスト構造
  • クリックイベントを、spanに設定します
<ul>
<li>
    <p><span>ファッション</span></p>
    <ul>
    <li><a href="#">アウター</a></li>
    <li><a href="#">インナー</a></li>
    <li><a href="#">ボトム</a></li>
    </ul>
</li>
<li>
    <p><span>家具・インテリア</span></p>
    <ul>
    <li><a href="#">収納家具</a></li>
    <li><a href="#">ソファー</a></li>
    <li><a href="#">ベッド</a></li>
    </ul>
</li>
</ul>
すべて閉じる
  • hide()メソッドを設定する
  • 「.category」以外をすべて隠します( ul を display: none にする)
<script>
$(function(){	 
  $( 'ul.menu' ).hide();
});
</script>


クリックイベントにより開く
  • slideDown()メソッドを設定する
  • 条件分岐で判別する
  • クリックされた要素の次に続く「ul」が「 display: none」だった場合に、slideDown()メソッドで下に開くアニメーションを実行する
  • コールバック関数に「this」を指定しないと、どの位置の「.category」されたかが判別できない
<script>
$(function(){
  $( 'ul.menu' ).hide();
  $( '.category' ).on( 'click', function(){
    if( $( '+ul',this).css( 'display' ) == 'none' )  {
      $( '+ul',this).slideDown();
    }
  });
});
</script>



開いていることを明示する

  • CSSで修飾します
  • そのためにクラス名を追加します
  • addClass()メソッドを設定する
.open {
  background: #333;
  color: #FFF;
}
<script>
$(function(){
  $( 'ul.menu' ).hide();
  $( '.category' ).on( 'click', function(){
    if( $( '+ul',this).css( 'display' ) == 'none' ) {
      $( '+ul',this).slideDown();
      $(this).addClass( 'open' );
    }
  });
});
</script>


閉じる設定
  • 条件が「true」以外は閉じる
  • 開いていたら、slideUp()メソッドで上に閉じるアニメーションを実行する
  • クラス名も削除する
<script>
$(function(){
  $( 'ul.menu' ).hide();
  $( '.category' ).on( 'click', function(){
   $( 'ul.menu' ).slideUp();
    $( '.category' ).removeClass( 'open' );
    if( $( '+ul',this).css( 'display' ) == 'none' ) {
      $( '+ul',this).slideDown();
      $(this).addClass( 'open' );
    }
  });
});
</script>
ひとつめのカテゴリのみ開いておく場合
<script>
$(function(){
  $( 'ul.menu:not(:first)' ).hide();
  $('.category:first').addClass( 'open' );
  $( '.category' ).on( 'click', function(){
   $( 'ul.menu' ).slideUp();
    $( '.category' ).removeClass( 'open' );
    if( $( '+ul',this).css( 'display' ) == 'none' ) {
      $( '+ul',this).slideDown();
      $(this).addClass( 'open' );
    }
  });
});
</script>

ポイント

  • toggle()メソッドを設定したように実行されます
  • 実際には、開いているか閉じているかの判別を、クリックイベントがある隣接セレクタに対して行っています

画像のhoverなどを追加する場合には、以下の記述を追加します。

  $( 'ul.menu li' ).on('mouseover', function(){
    $(this).addClass( 'rollover' );
  }).on('mouseout', function(){
    $(this).removeClass(' rollover' );
  });