آموزش طراحی منوی ریسپانسیو با 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
navbar-expand-lg
یعنی:
- از سایز lg (دسکتاپ) به بالا منو باز باشد
- در موبایل و تبلت منو جمع شود (همبرگری)
می‌توانید به‌جای lg از md یا sm استفاده کنید.
🔹 navbar-toggler (منوی همبرگری)
<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
ریسپانسیو
سازگار با موبایل
دارای منوی همبرگری
قابل توسعه
مناسب سایت‌های حرفه‌ای
