[jQuery] 任意の位置＆サイズのアコーディオンナビメニュー
.next()を使わず、デザイン面の汎用性の高そうなアコーディオンナビメニューを作ってみます。
と言ってもやってる事は単純で、jQueryのclick()でメニューから他の要素（リンクの塊）を伸縮させます。
説明
大メニューと小メニューを別要素で作っておいて、大メニューから小メニューのサイズを制御します。
例 [ accordion_nav.html ]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>任意の位置＆サイズのアコーディオンナビメニュー</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="toggle_accordion.js"></script>
<style>
h2 { margin: 8px 16px; line-height: 1.5em; position: relative;}
ul.nav_parent { margin: 0; padding: 0; list-style: none; }
ul.nav_parent li { padding: 0 1rem; display: inline-block;}
li.nav_a {background: #fee; border: 2px solid #faa;}
li.nav_b {background: #efe; border: 2px solid #aea;}
li.nav_c {background: #eef; border: 2px solid #aaf;}
ul.nav_child { margin: 0; padding: 0; display: inline-block; vertical-align: top; list-style: none;}
ul.nav_child li { padding: 0 1rem;}
ul.nav_child_a {background: #fcc; border: 2px solid #e88;}
ul.nav_child_b {background: #cfc; border: 2px solid #ada;}
ul.nav_child_c {background: #ccf; border: 2px solid #aae;}
</style>
</head>
<body>
<h2>大メニュー</h2>
<ul class="nav_parent">
<li class="nav_a">大見出しA</li>
<li class="nav_b">大見出しB</li>
<li class="nav_c">大見出しC</li>
</ul>
<h2>小メニュー</h2>
<ul class="nav_child nav_child_a">
<li><a href="#">子見出し（リンク）1</a></li>
<li><a href="#">子見出し（リンク）2</a></li>
<li><a href="#">子見出し（リンク）3</a></li>
</ul>
<ul class="nav_child nav_child_b">
<li><a href="#">子見出し（リンク）1</a></li>
<li><a href="#">子見出し（リンク）2</a></li>
<li><a href="#">子見出し（リンク）3</a></li>
</ul>
<ul class="nav_child nav_child_c">
<li><a href="#">子見出し（リンク）1</a></li>
<li><a href="#">子見出し（リンク）2</a></li>
<li><a href="#">子見出し（リンク）3</a></li>
</ul>
</body>
</html>
例 [ toggle_accordion.js ]
$(function() {
// 大メニューの各要素にクリックイベントを設定
// 小メニューにanimate()でトグルアクションを設定
// あらかじめ要素を非表示化
//$(".nav_child_a").hide();
$(".nav_child_b").hide();
$(".nav_child_c").hide();
// click()及びanimate()を設定
$('.nav_a').click(function(){
$('.nav_child_a').animate({ width: 'toggle', height: 'toggle' }, 'slow', 'swing' );
})
$('.nav_b').click(function(){
$('.nav_child_b').animate({ width: 'toggle', height: 'toggle' }, 'slow', 'swing' );
})
$('.nav_c').click(function(){
$('.nav_child_c').animate({ width: 'toggle', height: 'toggle' }, 'slow', 'swing' );
})
});
上記サンプル「任意の位置＆サイズのアコーディオンナビメニュー」
参考サイト
- HaradaWeb : animateのwidthとtoggleで横スライドで要素を出現させるjQuery
- jQuery日本語リファレンス : animate(params, [duration], [easing], [callback])
所管
レスポンシブ対応時などでもレイアウトを柔軟に対応出来そうなアコーディオンを、と思い考えてみました。
position: absolute;で要素を浮かせて、フラグ管理して交互に表示したりも出来ると思います。
jQuery使うと手軽に出来て有難いです。
本家 Azure Contrail はこちら
コメントはありません。