نوار ناوبری شناور پایین صفحه (Floating Bottom Navigation) با انیمیشن مدرن

منوهای شناور پایین صفحه (Floating Bottom Navigation) یکی از استانداردهای اصلی طراحی تجربه کاربری (UX) در اپلیکیشن‌ها و وب‌سایت‌های موبایل مدرن هستند. در این آموزش سورس کد نوار ناوبری شناور همراه با انیمیشن روان تغییر وضعیت و طراحی Glassmorphism را پیاده‌سازی می‌کنیم.

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

• طراحی مدرن و نیمه‌شفاف (Glassmorphism)
• انیمیشن هوشمند نشانگر فعال (Active Indicator)
• طراحی ریسپانسیو و بهینه‌سازی شده برای گوشی‌های همراه
• بدون وابستگی به هیچ کتابخانه جانبی (Pure CSS & JS)
• کد تمیز، سبک و قابل سفارشی‌سازی کامل

کد HTML

<div class="navigation-wrapper">
  <nav class="bottom-nav">
    <ul>
      <li class="list active" data-index="0">
        <a href="#home">
          <span class="icon">🏠</span>
          <span class="text">خانه</span>
        </a>
      </li>
      <li class="list" data-index="1">
        <a href="#search">
          <span class="icon">🔍</span>
          <span class="text">جستجو</span>
        </a>
      </li>
      <li class="list" data-index="2">
        <a href="#bookmarks">
          <span class="icon">🔖</span>
          <span class="text">نشان‌ها</span>
        </a>
      </li>
      <li class="list" data-index="3">
        <a href="#profile">
          <span class="icon">👤</span>
          <span class="text">پروفایل</span>
        </a>
      </li>
      <div class="indicator"></div>
    </ul>
  </nav>
</div>

کد استایل‌ها (CSS)

.navigation-wrapper {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  font-family: 'IRANSans', 'Vazirmatn', sans-serif;
  direction: rtl;
}

.bottom-nav {
  position: relative;
  width: 360px;
  height: 70px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 35px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1),
              0 0 0 1px rgba(255, 255, 255, 0.6) inset;
}

.bottom-nav ul {
  display: flex;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  justify-content: space-around;
}

.bottom-nav ul li {
  position: relative;
  list-style: none;
  width: 70px;
  height: 70px;
  z-index: 1;
}

.bottom-nav ul li a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  text-align: center;
  font-weight: 500;
  text-decoration: none;
}

.bottom-nav ul li a .icon {
  position: relative;
  display: block;
  line-height: 75px;
  font-size: 1.4em;
  text-align: center;
  transition: transform 0.5s;
}

.bottom-nav ul li.active a .icon {
  transform: translateY(-8px);
}

.bottom-nav ul li a .text {
  position: absolute;
  color: #6c5ce7;
  font-size: 0.75em;
  letter-spacing: 0.05em;
  transition: 0.5s;
  opacity: 0;
  transform: translateY(20px);
}

.bottom-nav ul li.active a .text {
  opacity: 1;
  transform: translateY(14px);
}

.indicator {
  position: absolute;
  top: -20px;
  width: 60px;
  height: 60px;
  background: #6c5ce7;
  border-radius: 50%;
  border: 6px solid #f0f2f5;
  transition: 0.5s ease;
  z-index: 0;
  display: none;
}

کد جاوا اسکریپت (JavaScript)

const list = document.querySelectorAll('.bottom-nav .list');

function activeLink() {
  list.forEach((item) => item.classList.remove('active'));
  this.classList.add('active');
}

list.forEach((item) => item.addEventListener('click', activeLink));

نسخهٔ بهبودیافته: نشانگر متحرک آیتم فعال

در کد پایه، دایرهٔ نشانگر (.indicator) با display: none پنهان است و فقط آیکون آیتم فعال جابه‌جا می‌شود. اگر می‌خواهید دایرهٔ رنگی هم با انیمیشن زیر آیتم انتخاب‌شده حرکت کند، دو تغییر کوچک لازم است.

۱. جای تگ نشانگر را اصلاح کنید. تگ <div class="indicator"></div> را از داخل <ul> بیرون بیاورید و درست بعد از </ul> و داخل <nav> قرار دهید. طبق استاندارد HTML، فرزند مستقیم <ul> فقط می‌تواند <li> باشد.

۲. این CSS را به انتهای استایل‌ها اضافه کنید:

.bottom-nav .indicator {
  display: block;
  left: 0;
}

.bottom-nav ul li {
  z-index: 1; /* آیکون‌ها بالای دایرهٔ نشانگر بمانند */
}

۳. کد جاوا اسکریپت را با این نسخه جایگزین کنید:

const list = document.querySelectorAll('.bottom-nav .list');
const indicator = document.querySelector('.bottom-nav .indicator');

function moveIndicator(item) {
  indicator.style.left = (item.offsetLeft + item.offsetWidth / 2 - indicator.offsetWidth / 2) + 'px';
}

function activeLink() {
  list.forEach((item) => item.classList.remove('active'));
  this.classList.add('active');
  moveIndicator(this);
}

list.forEach((item) => item.addEventListener('click', activeLink));

// قرار دادن نشانگر زیر آیتم فعال هنگام بارگذاری صفحه
const current = document.querySelector('.bottom-nav .list.active');
if (current) moveIndicator(current);

تابع moveIndicator مرکز آیتم کلیک‌شده را حساب می‌کند و دایره را دقیقاً زیر آن قرار می‌دهد. چون محاسبه بر اساس موقعیت واقعی آیتم‌هاست، در حالت راست‌چین (RTL) و با هر تعداد آیتم درست کار می‌کند. انیمیشن حرکت هم از همان transition: 0.5s ease موجود در استایل نشانگر می‌آید.

این کد چطور کار می‌کند؟

• ثابت ماندن پایین صفحه: کلاس .navigation-wrapper با position: fixed و bottom: 25px همیشه پایین صفحه می‌ماند و با left: 50% و translateX(-50%) وسط‌چین می‌شود.
• ظاهر شیشه‌ای: پس‌زمینهٔ نیمه‌شفاف همراه با backdrop-filter: blur(15px)، محتوای پشت منو را مات نشان می‌دهد.
• حالت فعال: جاوا اسکریپت با هر کلیک، کلاس active را از همهٔ آیتم‌ها برمی‌دارد و فقط به آیتم کلیک‌شده می‌دهد. CSS بر اساس همین کلاس، آیکون و متن را جابه‌جا و نمایان می‌کند.

نکات بهینه‌سازی و سئو در طراحی رابط کاربری

• دسترسی‌پذیری (Accessibility): برای برچسب‌ها از تگ‌های مفهومی مناسب یا ویژگی‌های aria-label استفاده کنید.
• کارایی (Performance): انیمیشن‌ها از طریق ویژگی‌های transform و opacity با شتاب‌دهنده سخت‌افزاری اجرا می‌شوند.
• واکنش‌گرایی: با استفاده از مدیاکوئری‌ها عرض نوار را در صفحه‌نمایش‌های خیلی کوچک به‌صورت درصدی (مثلا width: 90vw) تغییر دهید.

چطور این منو را به سایت وردپرسی اضافه کنیم؟

1. با المنتور: یک ویجت HTML در قالب هدر یا فوتر (یا صفحهٔ دلخواه) بگذارید و کدهای HTML، CSS (داخل تگ <style>) و جاوا اسکریپت (داخل تگ <script>) را در آن قرار دهید.
2. با افزونهٔ Header Footer Code Manager یا WPCode: کل کد را به‌عنوان یک اسنیپت HTML در بخش فوتر اضافه کنید تا در همهٔ صفحات نمایش داده شود.
3. فقط در موبایل نمایش دهید: این منو برای موبایل طراحی شده. با یک مدیاکوئری مثل @media (min-width: 992px) { .navigation-wrapper { display: none; } } آن را در دسکتاپ پنهان کنید.
4. لینک‌ها را واقعی کنید: به‌جای #home و #profile، آدرس صفحات واقعی سایت (مثل صفحهٔ حساب کاربری یا جستجو) را بگذارید.

جمع‌بندی

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

سورس کدهای مرتبط: سورس کد نوبار انیمیشنی | سورس کد منوی ریسپانسیو