パーツ番号 03-14-09 ・ JavaScript使用
アコーディオン階層ツリーサイドナビ
親項目をクリックすると子階層がグリッドアニメーションで滑らかに開閉します。WordPressのサイドバーで多階層のカテゴリツリーを表示する際に便利です。
プレビュー
ソースコード
HTML
<nav class="d03-14-09-tree">
<div class="d03-14-09-node">
<button type="button" class="d03-14-09-top" aria-expanded="false">
<span class="d03-14-09-ic"></span><span>サービス</span>
</button>
<div class="d03-14-09-sub">
<div class="d03-14-09-sub-in">
<a href="#" onclick="return false">Web制作</a>
<a href="#" onclick="return false">SEO対策</a>
<a href="#" onclick="return false">保守運用</a>
</div>
</div>
</div>
<div class="d03-14-09-node">
<button type="button" class="d03-14-09-top" aria-expanded="false">
<span class="d03-14-09-ic"></span><span>実績</span>
</button>
<div class="d03-14-09-sub">
<div class="d03-14-09-sub-in">
<a href="#" onclick="return false">コーポレート</a>
<a href="#" onclick="return false">EC</a>
</div>
</div>
</div>
<a class="d03-14-09-flat" href="#" onclick="return false">会社概要</a>
</nav>CSS
.d03-14-09-tree{display:flex;flex-direction:column;gap:2px;max-width:230px;width:100%}
.d03-14-09-node{border-bottom:1px solid #e5e7eb}
.d03-14-09-top{
width:100%;display:flex;align-items:center;gap:10px;
padding:11px 4px;background:none;border:none;cursor:pointer;
font-size:13px;font-weight:700;color:#1f2937;font-family:inherit;text-align:left;
}
.d03-14-09-ic{position:relative;width:12px;height:12px;flex:none}
.d03-14-09-ic::before,.d03-14-09-ic::after{content:"";position:absolute;background:#2563eb;top:50%;left:50%;transform:translate(-50%,-50%)}
.d03-14-09-ic::before{width:12px;height:2px}
.d03-14-09-ic::after{width:2px;height:12px;transition:transform .3s ease}
.d03-14-09-node.open .d03-14-09-ic::after{transform:translate(-50%,-50%) scaleY(0)}
.d03-14-09-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.d03-14-09-node.open .d03-14-09-sub{grid-template-rows:1fr}
.d03-14-09-sub-in{min-height:0;overflow:hidden}
.d03-14-09-sub-in a{display:block;padding:8px 4px 8px 26px;font-size:12px;color:#475569;text-decoration:none}
.d03-14-09-sub-in a:hover{color:#2563eb}
.d03-14-09-flat{display:block;padding:11px 4px;font-size:13px;font-weight:700;color:#1f2937;text-decoration:none}
.d03-14-09-flat:hover{color:#2563eb}JavaScript
(function(){
var tree=document.querySelector('.d03-14-09-tree');
if(!tree)return;
tree.querySelectorAll('.d03-14-09-node').forEach(function(node){
var btn=node.querySelector('.d03-14-09-top');
btn.addEventListener('click',function(){
var open=node.classList.toggle('open');
btn.setAttribute('aria-expanded',open?'true':'false');
});
});
})();クラス名 .d03-14-09 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。