چهارشنبه ۲۰ آبان ۱۴۰۵
تازه‌ها
css

آموزش طراحی منوی ریسپانسیو با Bootstrap

نویسندهسمیرا خانی
  • به‌روزرسانی:
  • ۳ دقیقه مطالعه
  • ۵۶۹ بازدید
  • ۰ دیدگاه
آموزش طراحی منوی ریسپانسیو با Bootstrap

آموزش طراحی منوی ریسپانسیو با Bootstrap

منوی ریسپانسیو با Bootstrap: منوی ریسپانسیو یکی از مهم‌ترین بخش‌های هر وب‌سایت مدرن است. Bootstrap با کامپوننت Navbar این کار را بسیار ساده، استاندارد و سازگار با موبایل و دسکتاپ کرده است.

در این آموزش از Bootstrap 5 استفاده می‌کنیم (نسخه پیشنهادی و جدید).

۱️⃣ Bootstrap چیست و چرا برای منو مناسب است؟

Bootstrap یک فریم‌ورک CSS و JavaScript است که:

  • ریسپانسیو (Responsive) است
  • برای موبایل اول (Mobile First) طراحی شده
  • کامپوننت‌های آماده مثل Navbar دارد
  • نیاز به کدنویسی زیاد را کم می‌کند

منوی Bootstrap به‌صورت خودکار:

  • در دسکتاپ افقی نمایش داده می‌شود
  • در موبایل به منوی همبرگری تبدیل می‌شود

۲️⃣ اضافه کردن Bootstrap به پروژه

روش CDN (ساده‌ترین راه)

کد زیر را داخل <head> قرار دهید:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

و قبل از بسته شدن </body>:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

3️⃣ ساختار اصلی منوی ریسپانسیو Bootstrap

کد پایه Navbar به شکل زیر است:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    
    <a class="navbar-brand" href="#">MySite</a>

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainMenu">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="mainMenu">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a class="nav-link active" href="#">خانه</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">درباره ما</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">خدمات</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">تماس با ما</a>
        </li>
      </ul>
    </div>

  </div>
</nav>

4️⃣ توضیح بخش‌های مهم کد

navbar-expand-lg

یعنی:

  • از سایز lg (دسکتاپ) به بالا منو باز باشد
  • در موبایل و تبلت منو جمع شود (همبرگری)

می‌توانید به‌جای lg از md یا sm استفاده کنید.

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainMenu">

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

🔹 collapse navbar-collapse

<div class="collapse navbar-collapse" id="mainMenu">

بخشی که لینک‌ها داخل آن هستند و در موبایل مخفی می‌شود.

🔹 ms-auto (چپ‌چین یا راست‌چین)

<ul class="navbar-nav ms-auto">
  • ms-auto → منو سمت راست
  • me-auto → منو سمت چپ

۵️⃣ تغییر رنگ منو

منوی تیره

navbar-dark bg-dark

منوی روشن

navbar-light bg-light

رنگ دلخواه

bg-primary
bg-success
bg-danger
bg-warning

6️⃣ افزودن منوی کشویی (Dropdown)

HTML منوی کشویی

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
    خدمات
  </a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">طراحی سایت</a></li>
    <li><a class="dropdown-item" href="#">سئو</a></li>
    <li><a class="dropdown-item" href="#">دیجیتال مارکتینگ</a></li>
  </ul>
</li>

📌 این منو در موبایل و دسکتاپ به‌درستی کار می‌کند.

۷️⃣ منوی ریسپانسیو راست‌به‌چپ (RTL)

برای سایت فارسی:

اضافه کردن RTL Bootstrap

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.rtl.min.css" rel="stylesheet">

و به <html> اضافه کنید:

<html lang="fa" dir="rtl">

8️⃣ ثابت کردن منو در بالای صفحه

<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">

یا:

<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">

9️⃣ زیباتر کردن منو با CSS (اختیاری)

<style>
.navbar-nav .nav-link {
  font-size: 16px;
  margin-left: 10px;
}

.navbar-nav .nav-link:hover {
  color: #ffc107;
}
</style>

🔟 نتیجه نهایی منوی Bootstrap

ریسپانسیو
سازگار با موبایل
دارای منوی همبرگری
قابل توسعه
مناسب سایت‌های حرفه‌ای

مطالب مرتبط

دیدگاه خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.