FABから扇状に展開するクイックナビ

<div class="d03-09-11-stage">
          <div class="d03-09-11-content">
            <div class="d03-09-11-card"></div>
            <div class="d03-09-11-card"></div>
          </div>
          <div class="d03-09-11-menu">
            <a href="#" onclick="return false" class="d03-09-11-mi" style="--i:3"><i></i>設定</a>
            <a href="#" onclick="return false" class="d03-09-11-mi" style="--i:2"><i></i>お気に入り</a>
            <a href="#" onclick="return false" class="d03-09-11-mi" style="--i:1"><i></i>ホーム</a>
          </div>
          <button type="button" class="d03-09-11-fab" aria-label="クイックメニューを開く"><span></span><span></span></button>
        </div>

.prev.d03-09-11{padding:0;display:block}
        .d03-09-11-stage{position:relative;width:100%;height:100%;min-height:260px;overflow:hidden;background:#f8fafc}
        .d03-09-11-content{position:absolute;inset:0;padding:18px;display:flex;flex-direction:column;gap:10px}
        .d03-09-11-card{height:60px;border-radius:10px;background:linear-gradient(135deg,#e2e8f0,#cbd5e1)}
        .d03-09-11-fab{position:absolute;right:18px;bottom:18px;width:48px;height:48px;border-radius:50%;border:none;background:#2563eb;box-shadow:0 6px 16px rgba(37,99,235,.4);cursor:pointer;z-index:3;display:flex;align-items:center;justify-content:center}
        .d03-09-11-fab span{position:absolute;width:18px;height:2px;background:#fff;border-radius:2px;transition:transform .25s ease}
        .d03-09-11-fab span:nth-child(1){transform:rotate(0deg)}
        .d03-09-11-fab span:nth-child(2){transform:rotate(90deg)}
        .d03-09-11-stage.open .d03-09-11-fab span:nth-child(1){transform:rotate(45deg)}
        .d03-09-11-stage.open .d03-09-11-fab span:nth-child(2){transform:rotate(-45deg)}
        .d03-09-11-menu{position:absolute;right:20px;bottom:74px;display:flex;flex-direction:column;align-items:flex-end;gap:10px;z-index:2}
        .d03-09-11-mi{display:flex;align-items:center;gap:8px;background:#fff;color:#1f2937;text-decoration:none;font-size:12px;font-weight:600;padding:9px 14px;border-radius:99px;box-shadow:0 4px 12px rgba(15,23,42,.12);opacity:0;transform:translateY(10px) scale(.9);transition:opacity .25s ease,transform .25s ease;transition-delay:0s;pointer-events:none}
        .d03-09-11-stage.open .d03-09-11-mi{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;transition-delay:calc(.05s * var(--i))}
        .d03-09-11-mi i{width:8px;height:8px;border-radius:50%;background:#2563eb}

(function(){
        var root=document.getElementById('item-03-09-11');
        if(!root)return;
        var stage=root.querySelector('.d03-09-11-stage');
        if(!stage)return;
        stage.querySelector('.d03-09-11-fab').addEventListener('click',function(){
          stage.classList.toggle('open');
        });
      })();