سورس کد منو ریسپانسیو موبایل با HTML، CSS و JavaScript (رایگان)

<!-- آیکون‌ها: Boxicons -->
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">

<header class="header">
  <nav class="nav container">
    <a href="/" class="nav__logo">TavoosWeb</a>

    <div class="nav__menu" id="nav-menu">
      <ul class="nav__list">
        <li><a href="#" class="nav__link">خانه</a></li>
        <li><a href="#" class="nav__link">مقالات</a></li>
        <li><a href="#" class="nav__link">خدمات</a></li>
        <li><a href="#" class="nav__link">تماس با ما</a></li>
      </ul>

      <button class="nav__close" id="nav-close" aria-label="بستن منو">
        <i class="bx bx-x"></i>
      </button>
    </div>

    <button class="nav__toggle" id="nav-toggle" aria-label="باز کردن منو"
            aria-controls="nav-menu" aria-expanded="false">
      <i class="bx bx-grid-alt"></i>
    </button>
  </nav>
</header>

:root {
  --header-height: 3.5rem;
  --first-color: #5f01af;
  --text-color: #1b1b1b;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
ul { list-style: none; }
a { text-decoration: none; }
button { background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }

.header {
  position: fixed; top: 0; left: 0; width: 100%;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
  z-index: 100;
}
.nav {
  height: var(--header-height);
  max-width: 1024px; margin-inline: auto; padding-inline: 1.5rem;
  display: flex; justify-content: space-between; align-items: center;
}
.nav__logo { font-weight: 700; color: var(--text-color); }
.nav__toggle, .nav__close { font-size: 1.5rem; display: inline-flex; }

/* موبایل: منو بالای صفحه و بیرون از دید است */
.nav__menu {
  position: fixed; left: 0; top: -100%; width: 100%;
  padding: 5rem 0 3rem;
  background: var(--first-color);
  border-radius: 0 0 1.5rem 1.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
  transition: top .4s ease;
}
.nav__list { display: flex; flex-direction: column; align-items: center; row-gap: 2rem; }
.nav__link { color: #fff; font-weight: 500; }
.nav__close { position: absolute; top: 1rem; right: 1.5rem; color: #fff; }

/* کلاسی که جاوااسکریپت اضافه می‌کند */
.show-menu { top: 0; }

/* دسکتاپ: منوی افقی معمولی */
@media (min-width: 1024px) {
  .nav__toggle, .nav__close { display: none; }
  .nav__menu { position: static; padding: 0; background: none; box-shadow: none; border-radius: 0; }
  .nav__list { flex-direction: row; column-gap: 2.5rem; }
  .nav__link { color: var(--text-color); }
  .nav__link:hover { color: var(--first-color); }
}

/* احترام به کاربرانی که انیمیشن کمتر می‌خواهند */
@media (prefers-reduced-motion: reduce) {
  .nav__menu { transition: none; }
}

const navMenu   = document.getElementById('nav-menu'),
      navToggle = document.getElementById('nav-toggle'),
      navClose  = document.getElementById('nav-close');

function openMenu() {
  navMenu.classList.add('show-menu');
  navToggle.setAttribute('aria-expanded', 'true');
}
function closeMenu() {
  navMenu.classList.remove('show-menu');
  navToggle.setAttribute('aria-expanded', 'false');
}

navToggle?.addEventListener('click', openMenu);
navClose?.addEventListener('click', closeMenu);

// بستن منو بعد از کلیک روی هر لینک
document.querySelectorAll('.nav__link').forEach(link =>
  link.addEventListener('click', closeMenu)
);

// بستن منو با کلید Escape
document.addEventListener('keydown', e => {
  if (e.key === 'Escape') closeMenu();
});