扇状に展開するファンメニュー

<div class="d03-08-09-frame">
          <div class="d03-08-09-bar">
            <span class="d03-08-09-logo">Travel</span>
          </div>
          <div class="d03-08-09-fan">
            <a class="d03-08-09-item" data-i="0" href="#">ツアー</a>
            <a class="d03-08-09-item" data-i="1" href="#">宿泊</a>
            <a class="d03-08-09-item" data-i="2" href="#">レビュー</a>
            <a class="d03-08-09-item" data-i="3" href="#">予約</a>
            <button class="d03-08-09-burger" type="button" aria-label="メニューを開く" aria-expanded="false">
              <span></span><span></span><span></span>
            </button>
          </div>
        </div>

.d03-08-09-frame{position:relative;width:100%;max-width:260px;height:210px;margin:0 auto;background:linear-gradient(160deg,#ecfeff,#f0f9ff);border-radius:16px;overflow:hidden;box-shadow:0 10px 26px rgba(30,41,59,.14);border:1px solid #e5e7eb}
        .d03-08-09-bar{padding:14px 16px}
        .d03-08-09-logo{font-weight:800;font-size:13px;color:#0369a1;letter-spacing:.02em}
        .d03-08-09-fan{position:absolute;right:20px;bottom:20px;width:44px;height:44px}
        .d03-08-09-burger{position:absolute;top:0;left:0;width:44px;height:44px;border:0;border-radius:50%;background:#0284c7;box-shadow:0 8px 18px rgba(2,132,199,.35);cursor:pointer;z-index:5}
        .d03-08-09-burger span{position:absolute;left:12px;width:20px;height:2.4px;background:#fff;border-radius:2px;transition:transform .3s,opacity .3s,top .3s}
        .d03-08-09-burger span:nth-child(1){top:15px}
        .d03-08-09-burger span:nth-child(2){top:21px}
        .d03-08-09-burger span:nth-child(3){top:27px}
        .d03-08-09-fan.open .d03-08-09-burger span:nth-child(1){top:21px;transform:rotate(45deg)}
        .d03-08-09-fan.open .d03-08-09-burger span:nth-child(2){opacity:0}
        .d03-08-09-fan.open .d03-08-09-burger span:nth-child(3){top:21px;transform:rotate(-45deg)}
        .d03-08-09-item{position:absolute;top:0;left:0;width:44px;height:44px;border-radius:50%;background:#fff;border:1.5px solid #bae6fd;color:#0369a1;text-decoration:none;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;text-align:center;opacity:0;transform:translate(0,0) scale(.3);transition:transform .4s cubic-bezier(.34,1.35,.4,1),opacity .3s;z-index:2}
        .d03-08-09-fan.open .d03-08-09-item{opacity:1}
        .d03-08-09-fan.open .d03-08-09-item[data-i="0"]{transform:translate(-52px,-8px) scale(1)}
        .d03-08-09-fan.open .d03-08-09-item[data-i="1"]{transform:translate(-40px,-52px) scale(1)}
        .d03-08-09-fan.open .d03-08-09-item[data-i="2"]{transform:translate(-4px,-84px) scale(1)}
        .d03-08-09-fan.open .d03-08-09-item[data-i="3"]{transform:translate(38px,-96px) scale(1)}
        .d03-08-09-item:hover{background:#0284c7;color:#fff}

(function(){
        var root=document.getElementById('item-03-08-09');
        var burger=root.querySelector('.d03-08-09-burger');
        var fan=root.querySelector('.d03-08-09-fan');
        burger.addEventListener('click',function(){
          var isOpen=fan.classList.toggle('open');
          burger.setAttribute('aria-expanded',isOpen?'true':'false');
        });
      })();