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

パーツ番号 03-01-11 ・ JavaScript使用

アコーディオン式モバイルサブメニュー

タップで子メニューが滑らかに開閉するモバイルナビ。WordPressの階層が深いコーポレートサイトでも、ドロワー内をすっきり整理できます。

mobileclickjsoverlay

プレビュー

ソースコード

HTML

<div class="d03-01-11-stage">
          <nav class="d03-01-11-menu">
            <div class="d03-01-11-item">
              <button class="d03-01-11-top" type="button" aria-expanded="false">
                <span>サービス</span><span class="d03-01-11-ic"></span>
              </button>
              <div class="d03-01-11-sub">
                <div class="d03-01-11-sub-inner">
                  <a href="#" onclick="return false">Web制作</a>
                  <a href="#" onclick="return false">SEO対策</a>
                  <a href="#" onclick="return false">保守運用</a>
                </div>
              </div>
            </div>
            <a class="d03-01-11-flat" href="#" onclick="return false">実績</a>
            <a class="d03-01-11-flat" href="#" onclick="return false">会社概要</a>
          </nav>
        </div>

CSS

.prev.d03-01-11{padding:0;display:block}
        .d03-01-11-stage{position:relative;width:100%;height:100%;min-height:260px;overflow:hidden;background:#f8fafc;padding:20px 18px}
        .d03-01-11-menu{display:flex;flex-direction:column;gap:2px;max-width:260px}
        .d03-01-11-item{border-bottom:1px solid #e5e7eb}
        .d03-01-11-top{
          width:100%;display:flex;justify-content:space-between;align-items:center;
          padding:13px 4px;background:none;border:none;cursor:pointer;
          font-size:13.5px;font-weight:700;color:#1f2937;font-family:inherit;
        }
        .d03-01-11-ic{position:relative;width:12px;height:12px;flex:none}
        .d03-01-11-ic::before,.d03-01-11-ic::after{
          content:"";position:absolute;background:#2563eb;top:50%;left:50%;transform:translate(-50%,-50%);
        }
        .d03-01-11-ic::before{width:12px;height:2px}
        .d03-01-11-ic::after{width:2px;height:12px;transition:transform .3s ease}
        .d03-01-11-item.open .d03-01-11-ic::after{transform:translate(-50%,-50%) scaleY(0)}
        .d03-01-11-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
        .d03-01-11-item.open .d03-01-11-sub{grid-template-rows:1fr}
        .d03-01-11-sub-inner{min-height:0;overflow:hidden}
        .d03-01-11-sub-inner a{display:block;padding:9px 4px 9px 14px;font-size:12.5px;color:#475569;text-decoration:none}
        .d03-01-11-sub-inner a:hover{color:#2563eb}
        .d03-01-11-flat{display:block;padding:13px 4px;font-size:13.5px;font-weight:700;color:#1f2937;text-decoration:none;border-bottom:1px solid #e5e7eb}
        .d03-01-11-flat:hover{color:#2563eb}

JavaScript

(function(){
        var item=document.querySelector('.d03-01-11-item');
        if(!item)return;
        var btn=item.querySelector('.d03-01-11-top');
        btn.addEventListener('click',function(){
          var open=item.classList.toggle('open');
          btn.setAttribute('aria-expanded',open?'true':'false');
        });
      })();

クラス名 .d03-01-11 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。