[jQuery]縦ナビゲーションでアコーディオンメニュー
jQueryで縦ナビゲーションのアコーディオンメニューを作成しました
「 jQueryで縦ナビゲーションのアコーディオンメニューの解説」はこちら
<メニュー構成> (メインメニュー - サブメニュー)
- ホーム
- カフェメニュー
- フード
- ドリンク - イベント
- コンサート
- ギャラリー - カフェについて
- アクセス - お問い合わせ
<ポイント>
初期設定では、カフェメニューのサブメニューまでが表示されています。 サブメニューが最初から表示されている事で、「サブメニューがあるんだな」と認識してもらえます。
また、メニューの領域全体がリンク領域になるようにdisplay: blockにしています。
テキスト例ではサブメニューが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>