فهرست مطالب

این مقاله شامل موضوعات مختلفی در مورد طراحی سایت فروشگاهی است که در بخشهای مختلف توضیح داده شده است.

منوی دایره‌ای موبایل برای سایت با HTML و CSS | آموزش کامل | رایگان

اگر به‌دنبال ساخت یک منوی متفاوت، مدرن و چشم‌گیر برای وب‌سایت خود هستید، Magic Indicator Menu یکی از بهترین انتخاب‌هاست. در این مقاله به‌صورت کامل این منوی دایره‌ای را بررسی می‌کنیم، تأثیر آن روی تجربه کاربری را تحلیل می‌کنیم و تمام بخش‌های قابل شخصی‌سازی آن را به‌صورت عملی آموزش می‌دهیم. اگر می‌خواهید رابط کاربری سایت‌تان حرفه‌ای‌تر دیده شود، این آموزش را از دست ندهید.

نتیجه نهایی که بدست می آورید:

Magic Indicator Menu

معرفی منو جادویی دایره ای

منوی دایره‌ای جادویی یک روش مدرن و جذاب برای نمایش لینک‌ها و امکانات سایت است. این منو با استفاده از HTML، CSS و JS ساخته شده و از آیکون‌های SVG برای هر گزینه استفاده می‌کند، بنابراین می‌توانید به راحتی ظاهر و محتوا را شخصی‌سازی کنید.

این منو ویژگی‌های کلیدی زیر را دارد:

حالت بسته: دکمه شناور گوشه صفحه، کم‌حجم و مینیمال
حالت باز: منو وسط صفحه ظاهر شده و صفحه پشت آن تاریک می‌شود، آیکون‌ها به صورت دایره‌ای پخش می‌شوند
انیمیشن نرم و جذاب: هنگام باز و بسته شدن، حرکت آیکون‌ها و دکمه مرکزی کاملاً نرم و روان است
مناسب موبایل: سایز و فاصله‌ها برای صفحه نمایش کوچک بهینه شده است

html

				
					<div class="backdrop"></div>

<div class="menu">
  <div class="toggle">
    <!-- دکمه مرکزی -->
    <img decoding="async" src="https://barangads.com/wp-content/uploads/2025/12/capture_5973426.png" alt="toggle" width="40">
  </div>

  <!-- هر آیکون یک SVG لینک می‌گیرد -->
  <li style="--i:0;">
    <a href="#"><img decoding="async" src="https://barangads.com/wp-content/uploads/2025/12/home_5973606.png" alt="home"></a>
  </li>
  <li style="--i:1;">
    <a href="#"><img decoding="async" src="https://barangads.com/wp-content/uploads/2025/12/user_5974196.png" alt="user"></a>
  </li>
  <li style="--i:2;">
    <a href="#"><img decoding="async" src="https://barangads.com/wp-content/uploads/2025/12/adjust_5974150.png" alt="settings"></a>
  </li>
  <li style="--i:3;">
    <a href="#"><img decoding="async" src="https://barangads.com/wp-content/uploads/2025/12/message_5973741.png" alt="mail"></a>
  </li>
  <li style="--i:4;">
    <a href="#"><img decoding="async" src="https://barangads.com/wp-content/uploads/2025/12/cam_5973405.png" alt="video"></a>
  </li>
  <li style="--i:5;">
    <a href="#"><img decoding="async" src="https://barangads.com/wp-content/uploads/2025/12/camera_5973412.png" alt="camera"></a>
  </li>
  <li style="--i:6;">
    <a href="#"><img decoding="async" src="https://barangads.com/wp-content/uploads/2025/12/joystick_5973641.png" alt="game"></a>
  </li>
  <li style="--i:7;">
    <a href="#"><img decoding="async" src="https://barangads.com/wp-content/uploads/2025/12/key_5973648.png" alt="key"></a>
  </li>

  <div class="indicator"></div>
</div>

css

				
					* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

/* بک‌دراپ */
.backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  opacity: 0;
  pointer-events: none;
  transition: 0.3s;
  z-index: 500;
}

.backdrop.active {
  opacity: 1;
  pointer-events: all;
}

/* منو */
.menu {
  position: fixed;
  bottom: -50px;
  right: -50px;
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s;
  z-index: 1000;
}

.menu.active {
  bottom: 50%;
  right: 50%;
  transform: translate(50%, 50%);
}

.menu .toggle {
  position: absolute;
  width: 75px;
  height: 75px;
  background: #fff;
  color: #262433;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3em;
  cursor: pointer;
  transition: 0.5s;
  z-index: 1000;
}

.menu .toggle.active {
  transform: rotate(315deg);
  box-shadow: 0 0 66px #fff;
  background: #262433;
  color: #fff;
}

/* آیکون‌ها */
.menu li {
  position: absolute;
  list-style: none;
  top: 50%;
  left: 50%;
  transform-origin: 0 0;
  transition: 0.5s;
  transition-delay: calc(0.05s * var(--i));
  transform: rotate(0deg) translate(0px);
  opacity: 0;
  padding: 0px;
}

.menu.active li {
  transform: rotate(calc(360deg / 8 * var(--i))) translate(120px);
  opacity: 1;
}

.menu li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  background: #fff;
  color: #262433;
  border-radius: 50%;
  font-size: 1.5em;
  transform: rotate(calc(360deg / -8 * var(--i)));
  padding: 10px;
}

/* Indicator وسط دکمه */
.indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #1eff45;
  transform: translate(-50%, -50%);
  transition: 0.5s;
  z-index: -1;
}

/* موبایل */
@media (max-width: 600px) {
  .menu {
    width: 200px;
    height: 200px;
  }

  .menu li a {
    width: 60px;
    height: 60px;
    padding: 15px;
  }
  .indicator {
    width: 45px;
    height: 45px;
  }

  .menu.active li {
    transform: rotate(calc(360deg / 8 * var(--i))) translate(90px);
  }

  .menu .toggle {
    width: 60px;
    height: 60px;
    font-size: 2.5em;
  }
}

js

				
					const toggle = document.querySelector('.toggle');
const menu = document.querySelector('.menu');
const backdrop = document.querySelector('.backdrop');
const toggleIcon = toggle.querySelector('img'); // گرفتن تصویر داخل toggle

// لینک آیکون‌ها
const iconClosed = "https://barangads.com/wp-content/uploads/2025/12/capture_5973426.png"; // مثلا +
const iconOpened = "https://barangads.com/wp-content/uploads/2025/12/cancel_59734191.png"; // مثلا ×

toggle.onclick = function () {
  menu.classList.toggle('active');
  toggle.classList.toggle('active');
  backdrop.classList.toggle('active');

  // تغییر تصویر
  if(menu.classList.contains('active')){
    toggleIcon.src = iconOpened;
  } else {
    toggleIcon.src = iconClosed;
  }
}

// بستن منو با کلیک روی بک‌دراپ
backdrop.onclick = function() {
  menu.classList.remove('active');
  toggle.classList.remove('active');
  backdrop.classList.remove('active');
  toggleIcon.src = iconClosed;
}

Magic Indicator Menu چیست؟

Magic Indicator Menu یک منوی دایره‌ای (Circular Menu) است که آیتم‌های آن به‌صورت شعاعی اطراف یک دکمه مرکزی قرار می‌گیرند. با کلیک روی دکمه وسط، آیتم‌ها به‌صورت انیمیشنی باز و بسته می‌شوند و یک نشانگر (Indicator) موقعیت انتخاب‌شده را نمایش می‌دهد.

این نوع منو معمولاً در موارد زیر استفاده می‌شود:

داشبوردها
وب‌اپلیکیشن‌ها
سایت‌های خلاقانه و شخصی
صفحات معرفی (Landing Page)

تأثیر Magic Indicator Menu روی تجربه کاربری (UX)

استفاده از این منو می‌تواند تأثیرات مثبتی روی کاربر داشته باشد:

افزایش جذابیت بصری

به‌جای نمایش تمام گزینه‌ها به‌صورت خطی، همه آیتم‌ها در حالت بسته مخفی هستند و فقط در زمان نیاز نمایش داده می‌شوند.

کاهش شلوغی رابط کاربری

حرکت چرخشی آیتم‌ها و انیمیشن نرم، توجه کاربر را به‌سرعت جلب می‌کند.

ایجاد حس تعامل

کاربر احساس می‌کند با یک رابط زنده و پویا کار می‌کند، نه یک منوی ساده و ایستا.

نکته مهم:
این نوع منو بیشتر برای تعداد آیتم محدود (۶ تا ۸ گزینه) مناسب است و برای منوهای بسیار بزرگ توصیه نمی‌شود.

بررسی ساختار کلی کد

کد این منو از سه بخش اصلی تشکیل شده است:

HTML – ساختار منو و آیتم‌ها
CSS – طراحی ظاهری، انیمیشن‌ها و چرخش‌ها
JavaScript – مدیریت باز و بسته شدن منو

سادگی این ساختار باعث می‌شود بتوانید آن را به‌راحتی در هر پروژه‌ای استفاده یا شخصی‌سازی کنید.

آموزش بخش HTML

HTML این منو، ساختار اصلی و اسکلت منو را ایجاد می‌کند.

بخش <div class="backdrop">: صفحه تاریک پشت منو که هنگام باز شدن فعال می‌شود و با کلیک روی آن منو بسته می‌شود.
بخش <div class="menu">: محفظه اصلی منو که شامل دکمه مرکزی، آیکون‌ها و Indicator است.
دکمه مرکزی (<div class="toggle">): کنترل باز و بسته شدن منو است و داخل آن تصویر دکمه (<img>) قرار دارد.
آیکون‌های منو (<li> ها): هر گزینه یک <li> دارد که شامل یک <a> و <img> برای آیکون است.
قابلیت شخصی‌سازی:
اضافه یا حذف کردن گزینه‌ها با افزودن/حذف <li>
تغییر لینک هر آیکون و تصویر SVG آن
تغییر دکمه مرکزی با تصویر دلخواه

آموزش بخش CSS (قلب اصلی منو)

CSS مسئول ظاهر، موقعیت و انیمیشن‌ها است.

.menu موقعیت دکمه و منو را در حالت بسته و باز مشخص می‌کند.
.menu.active موقعیت وسط صفحه و انیمیشن باز شدن را کنترل می‌کند.
.menu li و .menu.active li تعیین می‌کنند که آیکون‌ها چه مسیر دایره‌ای طی کنند و با چه فاصله‌ای ظاهر شوند.
بخش @media (max-width: 600px)، منو را برای موبایل بهینه می‌کند.
قابلیت شخصی‌سازی:
تغییر رنگ و اندازه دکمه‌ها، آیکون‌ها و Indicator
تغییر شعاع دایره‌ای که آیکون‌ها پخش می‌شوند
تغییر موقعیت دکمه در حالت بسته (bottom, left, right, top)
تغییر سرعت و تأخیر انیمیشن‌ها

دکمه مرکزی (Toggle)

دکمه مرکزی نقش کنترل اصلی منو را دارد: باز و بسته کردن منو.

<img> داخل toggle می‌تواند یک تصویر دلخواه باشد (مثلاً + و ×)
با اضافه شدن کلاس active، تصویر تغییر می‌کند و انیمیشن چرخش رخ می‌دهد.
قابلیت شخصی‌سازی:
تغییر تصویر toggle برای حالت باز و بسته
تغییر اندازه، رنگ و سایه دکمه
تغییر سرعت چرخش یا انیمیشن هنگام کلیک

آیتم‌های منو

هر آیتم منو یک <li> دارد که شامل <a> و <img> است.

آیکون‌ها در حالت بسته روی هم و مخفی هستند و با باز شدن منو، به شکل دایره‌ای پخش می‌شوند.
قابلیت شخصی‌سازی:
تغییر آیکون‌ها به SVG یا PNG دلخواه
اضافه یا حذف آیتم‌ها و تغییر ترتیب آنها
تغییر رنگ پس‌زمینه و اندازه آیکون‌ها
تغییر فاصله از مرکز دکمه با تنظیم translate در CSS

Indicator (نشانگر جادویی)

Indicator یک دایره سبز پشت دکمه مرکزی است که جلوه بصری جذابی ایجاد می‌کند.

همیشه پشت دکمه مرکزی قرار دارد و با transform: translate(-50%, -50%) در وسط دکمه است.
قابلیت شخصی‌سازی:
تغییر رنگ و اندازه دایره
تغییر موقعیت نسبت به دکمه
می‌توان انیمیشن حرکت یا هاور اضافه کرد تا هنگام انتخاب آیتم، Indicator حرکت کند

بخش‌های قابل شخصی‌سازی (خلاصه سریع)

در این منو تقریبا همه چیز قابل شخصی‌سازی است:

دکمه مرکزی: تصویر، اندازه، رنگ، انیمیشن چرخش
آیکون‌ها: تصویر، لینک، ترتیب، تعداد، اندازه و رنگ پس‌زمینه
Indicator: رنگ، اندازه و موقعیت
موقعیت منو در حالت بسته: با CSS (bottom, right, left, top)
انیمیشن‌ها: سرعت، تأخیر و شعاع چرخش آیکون‌ها
ریسپانسیو: تغییر اندازه منو و آیکون‌ها برای موبایل

این منو طوری طراحی شده که بتوانید آن را بدون دانش پیشرفته HTML/CSS/JS کاملاً شخصی‌سازی کنید و ظاهر و عملکرد آن را با سلیقه خودتان هماهنگ کنید.

این منو برای چه پروژه‌هایی مناسب است؟

سایت‌های شخصی و نمونه‌کار
پنل‌های مدیریتی کوچک
وب‌اپلیکیشن‌های خلاقانه
صفحات معرفی محصول

جمع‌بندی

Magic Indicator Menu یک انتخاب عالی برای زمانی است که می‌خواهید سایت شما متفاوت، مدرن و تعاملی به‌نظر برسد. ساختار ساده، قابلیت شخصی‌سازی بالا و جلوه بصری جذاب، این منو را به گزینه‌ای کاربردی برای پروژه‌های امروزی تبدیل کرده است.

اگر به طراحی UI علاقه‌مند هستید، پیاده‌سازی و توسعه چنین کامپوننت‌هایی می‌تواند ارزش پروژه‌های شما را چندین برابر کند.

Post Views: 7