くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[jQuery]縦ナビゲーションでアコーディオンメニュー

jQueryで縦ナビゲーションのアコーディオンメニューを作成しました

 「 jQueryで縦ナビゲーションのアコーディオンメニューの解説」はこちら

 

<メニュー構成> (メインメニュー - サブメニュー)

  • ホーム
  • カフェメニュー
     - フード 
     - ドリンク
  • イベント
     - コンサート
     - ギャラリー
  • カフェについて
     - アクセス
  • お問い合わせ

f:id:pleasure10501:20150417150541p:plain

<ポイント>

初期設定では、カフェメニューのサブメニューまでが表示されています。 サブメニューが最初から表示されている事で、「サブメニューがあるんだな」と認識してもらえます。

また、メニューの領域全体がリンク領域になるようにdisplay: blockにしています。

f:id:pleasure10501:20150417150544p:plain

テキスト例ではサブメニューが1つしかないので、そのスクリプト通りにすると、この場合の2つ目のサブメニュー「ドリンク」「ギャラリー」が表示されなくなります。

そこで、①②を追加して解消しました。

① dd:eq(1) は2番目のdd要素を指す。このセレクタをdisplay: blockにすると、初期設定で表示されるようになる。

② 隣接セレクタ+を使用。++によって、クリックしたセレクタ(thisのこと)隣の更に隣のddを指す。

 

ソース

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>アコーディオンパネル 4/17</title>
<style>
html, body, div, dl, dt, dd, a {
  margin:0;
  padding:0;
  }
a {
  text-decoration: none;
  display:block;  
  }
dt a{
  text-decoration: none;
    color:#FFF;
  }
dd a {
      color:#C36;
  }  
dl{
  width:200px;
  text-align: center;
  line-height: 50px;
  margin: 50px auto;
  }
dl dt{
  color:#FFF;
  background: #C36;
  color: #FFF;
  font-weight:bold;
  line-height: 50px;
  cursor: pointer;
}
dl dd{
  border: 1px solid #C36;
  border-top: none;
  line-height: 50px;
}
</style>
<script src="jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function() {
    $('dd:not(:first)').css('display','none');
    $('dd:eq(1)').css('display','block'); ・・・① 
    $('dl dt').click(function(){
        if ($('+dd',this).css('display')=='none'){
       $('dd:visible').slideUp(1000);
          $('+dd',this).slideDown(1000);
          $('++dd',this).slideDown(1000); ・・・②
            }
        });
});
</script>
</head>
<body>
<div id="conatiner">
<dl>
<dt><a href="#">ホーム</a></dt>
<dt><a href="#">カフェメニュー</a></dt>
   <dd><a href="#">フード</a></dd>
   <dd><a href="#">ドリンク</a></dd>
<dt><a href="#">イベント</a></dt>
   <dd><a href="#">コンサート</a></dd>
   <dd><a href="#">ギャラリー</a></dd>
<dt><a href="#">カフェについて</a></dt>
   <dd><a href="#">アクセス</a></dd>
<dt><a href="#">お問い合わせ</a></dt>
</dl>
</div>
</body>
</html>