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

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

ミニマイズ可能サイドバー

トグルボタンでラベル付きのフルサイズ表示とアイコンのみのミニ表示を切り替えられます。WordPressの管理画面風レイアウトや会員マイページのメニューに便利です。

js

プレビュー

ソースコード

HTML

<div class="d03-09-02-stage">
          <aside class="d03-09-02-side">
            <button class="d03-09-02-toggle" type="button" aria-label="サイドバーを折りたたむ"><span></span><span></span></button>
            <nav>
              <a href="#" onclick="return false" class="active"><i class="d03-09-02-ico"></i><b>ダッシュボード</b></a>
              <a href="#" onclick="return false"><i class="d03-09-02-ico"></i><b>注文管理</b></a>
              <a href="#" onclick="return false"><i class="d03-09-02-ico"></i><b>顧客一覧</b></a>
              <a href="#" onclick="return false"><i class="d03-09-02-ico"></i><b>設定</b></a>
            </nav>
          </aside>
          <main class="d03-09-02-main"><p>トグルボタンで<br>サイドバー幅が切替</p></main>
        </div>

CSS

.prev.d03-09-02{padding:0;display:block}
        .d03-09-02-stage{position:relative;display:flex;width:100%;height:100%;min-height:260px;overflow:hidden;background:#fff}
        .d03-09-02-side{position:relative;width:176px;flex:none;background:#0f172a;padding:14px 10px;transition:width .3s ease;display:flex;flex-direction:column;gap:10px;overflow:hidden}
        .d03-09-02-stage.mini .d03-09-02-side{width:56px}
        .d03-09-02-toggle{align-self:flex-end;width:28px;height:28px;flex:none;border:none;border-radius:6px;background:rgba(255,255,255,.1);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
        .d03-09-02-toggle span{display:block;width:14px;height:2px;background:#cbd5e1;border-radius:2px}
        .d03-09-02-side nav{display:flex;flex-direction:column;gap:4px}
        .d03-09-02-side a{display:flex;align-items:center;gap:10px;text-decoration:none;padding:9px 8px;border-radius:8px;color:#cbd5e1;white-space:nowrap}
        .d03-09-02-side a:hover{background:rgba(255,255,255,.08);color:#fff}
        .d03-09-02-side a.active{background:#2563eb;color:#fff}
        .d03-09-02-ico{flex:none;width:9px;height:9px;border-radius:3px;background:currentColor;opacity:.85}
        .d03-09-02-side b{font-size:12px;font-weight:600;opacity:1;transition:opacity .2s ease}
        .d03-09-02-stage.mini .d03-09-02-side b{opacity:0}
        .d03-09-02-main{flex:1;display:flex;align-items:center;justify-content:center;padding:16px;background:#f8fafc}
        .d03-09-02-main p{margin:0;font-size:12px;color:#94a3b8;text-align:center;line-height:1.6}

JavaScript

(function(){
        var stage=document.querySelector('.d03-09-02-stage');
        if(!stage)return;
        stage.querySelector('.d03-09-02-toggle').addEventListener('click',function(){
          stage.classList.toggle('mini');
        });
      })();

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