سورس کد منو سایت متحرک با اندیکاتور لغزنده (HTML، CSS و JS)

<nav class="menu" aria-label="منوی اصلی">
  <span class="indicator" aria-hidden="true"></span>
  <a href="/" class="active" aria-current="page">
    <svg><!-- آیکون خانه --></svg><span>خانه</span>
  </a>
  <a href="/services/"><svg><!-- آیکون --></svg><span>خدمات</span></a>
  <a href="/blog/"><svg><!-- آیکون --></svg><span>مقالات</span></a>
  <a href="/contact/"><svg><!-- آیکون --></svg><span>تماس</span></a>
</nav>

.menu {
  position: relative;
  display: flex; gap: 4px;
  padding: 6px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(95,1,175,.08);
}
.menu a {
  position: relative; z-index: 1;   /* بالای نشانگر */
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 8px;
  border-radius: 14px;
  color: #6d5d86; font-weight: 700; text-decoration: none;
  transition: color .25s;
}
.menu a.active, .menu a:hover { color: #fff; }
.menu a:focus-visible { outline: 3px solid #C9A3F5; outline-offset: 2px; }

.indicator {
  position: absolute; top: 6px; bottom: 6px; left: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #8224E3, #5F01AF);
  transition: transform .3s cubic-bezier(.3,.8,.3,1),
              width .3s cubic-bezier(.3,.8,.3,1);
}

/* موبایل: فقط آیکون */
@media (max-width: 560px) {
  .menu a span { display: none; }
}

const menu = document.querySelector('.menu');
const indicator = menu.querySelector('.indicator');
const links = menu.querySelectorAll('a');

function move(link) {
  indicator.style.width = link.offsetWidth + 'px';
  indicator.style.transform = `translateX(${link.offsetLeft}px)`;
}
const active = () => menu.querySelector('a.active');

links.forEach((link) => {
  link.addEventListener('mouseenter', () => move(link));
  link.addEventListener('focus', () => move(link));
});

// با خروج ماوس، نشانگر به گزینهٔ فعال برمی‌گردد
menu.addEventListener('mouseleave', () => move(active()));

// با تغییر اندازهٔ پنجره، دوباره محاسبه شود
addEventListener('resize', () => move(active()));

move(active());