شروع پرقدرت آموزش HTML و CSS [ ورود به دنیای هیجان انگیز وب! ]

30% تخفیف برای مدت محدود!

آشنایی با انواع منو در بوت‌استرپ ۴ + ‌نحوه ساخت آن‌ها


نویسنده:
سه شنبه ۲۷ آبان ۱۳۹۹
منو در بوت استرپ

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

ساخت منو در بوت‌استرپ (منوهای Nav)

برای ساخت منو در HTML، منو اغلب در یک لیست غیر شمارشی (<ul>) تعریف می‌شود. اما برای ساخت یک منوی ساده در بوت استرپ ۴ کافیه تا از کلاس .nav استفاده کنیم. کلاس .nav رو داخل تگ ul قرار دهید. سپس یک لیست با تگ li ایجاد کنید. تگ li باید دارای کلاس .nav-item و تگ a (لینک) باید دارای کلاس .nav-link باشد. برای درک کامل این نمونه مثال زیر را بررسی کنید :


منوی عمودی

همچنین برای اینکه بتوانید منویی عمودی در بوت‌استرپ را در وب‌سایت خود طراحی کنید، کافیست تا کلاس .flex-column را در تگ ul قرار دهید:

منوهای ناوبری

منوهای ناوربری معمولا شامل منو، قسمت جستجو، لوگو و … می‌باشند که در سربرگ یا هدر سایت قرار می‌گیرند. این منو‌ها براساس اندازه صفحه می‌توانند باز یا بسته شوند. بدین‌معنی‌که ریسپانسیو هستند.

طراحی یک نوار ناوبری استاندارد به این صورت هست که با کلاس .navbar ایجاد می‌شود و با یکی از کلاس‌های .navbar-expand-xl ،lg ،md ،sm نوشته می‌شوند.

برای افزودن لینک در داخل منو، می‌توانید از المان <ul> به همراه کلاس .navbar-nav استفاده کنید. سپس از عنصر <li> برای زیر منوها با کلاس .nav-item و در انتها از کلاس .nav-link استفاده کنید. برای درک بهتر موضوع به مثال زیر توجه کنید:

طراحی منوهای سربرگ‌دار ( Tap)

منوهای سربرگ‌دار منوهایی هستند که چندین صفحه‌ی مختلف را در خود جای داده‌اند. با کلیک بر روی هر سربرگ، محتویات آن نمایش داده می‌شود. برای تبدیل منوهای Nav ساده به منوهای Tab از کلاس nav-tabs. استفاده می‌کنیم. سپس با استفاده از کلاس active. سربرگ فعال را مشخص می‌کنیم.

منوهای ناوبری

نوع دیگری منوهای سربرگ‌دار وجود دارند که به منوهای pill معروف هستند. این نوع منو در بوت‌استرپ به جای داشتن سربرگ، دکمه‌های قرص‌مانندی دارد. برای ساخت این منوها باید از کلاس nav-pills. استفاده کنید:

منوهای pill

منوهای آبشاری یا لیستی

برای ساخت یک منوی آبشاری ساده باید از کلاس dropdown. برای عنصر نگهدارنده و کلاس dropdown-menu. برای خود منوی آبشاری استفاده کنید. برای باز کردن منوی آبشاری از یک دکمه یا لینک با کلاس dropdown-toggle. استفاده می‌شود:

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

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *