ドリルダウン式メニュー

<div class="d03-09-06-stage">
          <div class="d03-09-06-track">
            <div class="d03-09-06-panel">
              <p class="d03-09-06-title">メニュー</p>
              <button type="button" class="d03-09-06-item" data-go="1">レディース<span class="d03-09-06-chev"></span></button>
              <button type="button" class="d03-09-06-item" data-go="2">メンズ<span class="d03-09-06-chev"></span></button>
              <a href="#" onclick="return false" class="d03-09-06-item">セール</a>
            </div>
            <div class="d03-09-06-panel">
              <button type="button" class="d03-09-06-back" data-go="0"><span class="d03-09-06-chev back"></span>戻る</button>
              <p class="d03-09-06-title">レディース</p>
              <a href="#" onclick="return false" class="d03-09-06-item">トップス</a>
              <a href="#" onclick="return false" class="d03-09-06-item">ボトムス</a>
              <a href="#" onclick="return false" class="d03-09-06-item">アウター</a>
            </div>
            <div class="d03-09-06-panel">
              <button type="button" class="d03-09-06-back" data-go="0"><span class="d03-09-06-chev back"></span>戻る</button>
              <p class="d03-09-06-title">メンズ</p>
              <a href="#" onclick="return false" class="d03-09-06-item">トップス</a>
              <a href="#" onclick="return false" class="d03-09-06-item">アウター</a>
            </div>
          </div>
        </div>

.prev.d03-09-06{padding:0;display:block}
        .d03-09-06-stage{position:relative;width:100%;height:100%;min-height:260px;overflow:hidden;background:#fff}
        .d03-09-06-track{position:absolute;inset:0;display:flex;width:300%;transition:transform .35s cubic-bezier(.4,0,.2,1)}
        .d03-09-06-panel{width:33.3333%;flex:none;padding:16px;display:flex;flex-direction:column;gap:2px}
        .d03-09-06-title{margin:2px 0 8px;font-size:11px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.06em}
        .d03-09-06-item{display:flex;align-items:center;justify-content:space-between;width:100%;border:none;background:transparent;text-align:left;text-decoration:none;font-family:inherit;font-size:13px;font-weight:600;color:#1f2937;padding:11px 6px;border-bottom:1px solid #f1f5f9;cursor:pointer}
        .d03-09-06-item:hover{color:#2563eb}
        .d03-09-06-chev{width:6px;height:6px;flex:none;border-right:2px solid #cbd5e1;border-bottom:2px solid #cbd5e1;transform:rotate(-45deg)}
        .d03-09-06-back{display:flex;align-items:center;gap:8px;border:none;background:transparent;font-family:inherit;font-size:12px;font-weight:600;color:#2563eb;padding:6px;margin-bottom:6px;cursor:pointer}
        .d03-09-06-chev.back{transform:rotate(135deg);border-color:#2563eb}

(function(){
        var stage=document.querySelector('.d03-09-06-stage');
        if(!stage)return;
        var track=stage.querySelector('.d03-09-06-track');
        function go(level){
          track.style.transform='translateX('+(-level*33.3333)+'%)';
        }
        stage.querySelectorAll('[data-go]').forEach(function(btn){
          btn.addEventListener('click',function(){
            go(parseInt(btn.getAttribute('data-go'),10));
          });
        });
      })();