← 動的パーツギャラリーへ戻る

パーツ番号 03-14-09 ・ JavaScript使用

アコーディオン階層ツリーサイドナビ

親項目をクリックすると子階層がグリッドアニメーションで滑らかに開閉します。WordPressのサイドバーで多階層のカテゴリツリーを表示する際に便利です。

clickjs

プレビュー

ソースコード

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 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。