درس ششم: سیستم ناوبری و هدایت هوشمند
درس ششم: سیستم ناوبری و هدایت هوشمند
در این درس یاد میگیرید که چگونه منوهایی بسازید که در دسکتاپ عریض و در موبایل به صورت دکمه همبرگری (Hamburger Menu) ظاهر شوند.
۱. نوار ناوبری (Navbar): ستون فقرات سایت
نوار ناوبری بوتاسترپ یکی از قدرتمندترین اجزای آن است. این جزء به طور خودکار تشخیص میدهد که چه زمانی باید آیتمهای منو را مخفی کرده و داخل یک دکمه کوچک قرار دهد.
اجزای حیاتی یک Navbar:
- 🏢 Navbar Brand: محل قرارگیری لوگو یا نام سایت.
- 🍔 Navbar Toggler: همان دکمه سه خط (همبرگری) که در موبایل ظاهر میشود.
- 🔗 Navbar Nav: لیست لینکهای منو (خانه، درباره ما و…).
- 🔍 Navbar Text/Forms: محتوای اضافی مثل فرم جستجو یا متن خوشآمدگویی.
کلاسهای کنترلی Navbar:
برای تنظیم رفتار منو، از این کلاسها استفاده میکنیم:
.navbar-expand-lg: تعیین میکند که منو از چه سایزی به بعد (در اینجا Large) از حالت موبایلی خارج شده و باز شود..navbar-lightیا.navbar-dark: تم رنگی متنها را بر اساس پسزمینه تنظیم میکند..fixed-top: منو را به سقف مرورگر میچسباند (حتی هنگام اسکرول).
۲. زیرمنوها (Dropdown Links)
اگر دستهبندیهای زیادی دارید، نباید منو را شلوغ کنید. استفاده از .dropdown بهترین راه برای جای دادن لینکهای فرعی است.
<li class=“nav-item dropdown”>
<a class=“nav-link dropdown-toggle” data-bs-toggle=“dropdown”>خدمات ما</a>
<ul class=“dropdown-menu”>
<li><a class=“dropdown-item”>طراحی سایت</a></li>
</ul>
</li>
۳. صفحهبندی: مدیریت حجم بالای داده
وقتی لیست محصولات یا مقالات شما زیاد میشود، نباید همه را در یک صفحه نشان دهید. کلاس .pagination به شما اجازه میدهد اعداد صفحات را با ظاهری استاندارد نمایش دهید.
وضعیتهای خاص:
.active: برای نشان دادن صفحهای که کاربر در حال حاضر در آن است..disabled: برای غیرفعال کردن دکمههایی مثل “قبلی” وقتی کاربر در صفحه اول است.
⚠️ تلههای ناوبری:
- تعداد زیاد آیتمها: اگر بیش از ۷ آیتم اصلی در منو دارید، حتماً آنها را گروهبندی کنید؛ در غیر این صورت در تبلتها منو دو خطی شده و ظاهر سایت را خراب میکند.
- فراموش کردن آیدی Container: دکمه همبرگری موبایل فقط در صورتی کار میکند که
data-bs-targetآن دقیقاً باidبخشِ لینکها یکی باشد. - لوگوی خیلی بزرگ: لوگو نباید ارتفاع Navbar را بیش از حد زیاد کند. از کلاس
.img-fluidیا محدود کردن ارتفاع (Height) استفاده کنید.
🔬 کارگاه عملی درس ششم: منوی حرفهای فروشگاه
یک سیستم ناوبری کامل بسازید که:
- دارای پسزمینه Dark و متنهای روشن باشد.
- در سمت راست (شروع) لوگوی فروشگاه قرار بگیرد.
- شامل لینکهای: خانه، محصولات (به صورت کشویی)، و تماس با ما باشد.
- در سمت چپ (پایان) یک فرم جستجوی کوچک شامل یک ورودی و یک دکمه Outline-Info داشته باشد.
.ms-auto (Margin Start Auto) در لیست لینکها استفاده کنید.تبریک! شما بخشهای اصلی سایت را یاد گرفتید.
در درس هفتم به سراغ **ابزارهای کمکی و چیدمانهای پیشرفته (Utilities & Flexbox)** میرویم تا جزئیترین تغییرات را در سایت خود اعمال کنید.