بررسی انواع منو در بوت استرپ 4 به همراه نحوه ساخت
یکی از اصلی‌ترین قسمت‌ها در طراحی وب‌سایت استفاده از انواع منوها برای نمایش اطلاعات می‌باشد. بوت‌استرپ به ما کمک می‌کند تا طراحی این نوع منوها برای وب‌سایتتمان به‌راحتی انجام گیرد. در این قسمت از آموزش رایگان بوت‌استرپ به تعریف منو در بوت‌استرپ ونحوه کدنویسی آن‌ها خواهیم پرداخت.
ساخت منو در بوت‌استرپ (منوهای Nav)
فهرست عناوین
برای ساخت منو در HTML، منو اغلب در یک لیست غیر شمارشی (<ul>) تعریف می‌شود. اما برای ساخت یک منوی ساده در بوت استرپ ۴ کافیه تا از کلاس .nav استفاده کنیم. کلاس .nav رو داخل تگ ul قرار دهید. سپس یک لیست با تگ li ایجاد کنید. تگ li باید دارای کلاس .nav-item و تگ a (لینک) باید دارای کلاس .nav-link باشد. برای درک کامل این نمونه مثال زیر را بررسی کنید :
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<br /><br /> <ul class=”nav”><br /><br /> <li class=”nav-item”><br /><br /> <a class=”nav-link” href=”#”> لینک موردنظر </a><br /><br /> </li><br /><br /> <li class=”nav-item”><br /><br /> <a class=”nav-link” href=”#”> لینک موردنظر </a><br /><br /> </li><br /><br /> <li class=”nav-item”><br /><br /> <a class=”nav-link” href=”#”> لینک موردنظر </a><br /><br /> </li><br /><br /> </ul> |
منوی عمودی
همچنین برای اینکه بتوانید منویی عمودی در بوت‌استرپ را در وب‌سایت خود طراحی کنید، کافیست تا کلاس .flex-column را در تگ ul قرار دهید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<ul class=“nav flex-column”> <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> |
منوهای ناوبری
منوهای ناوربری معمولا شامل منو، قسمت جستجو، لوگو و … می‌باشند که در سربرگ یا هدر سایت قرار می‌گیرند. این منوها براساس اندازه صفحه می‌توانند باز یا بسته شوند. بدین‌معنی‌که ریسپانسیو هستند.
طراحی یک نوار ناوبری استاندارد به این صورت هست که با کلاس .navbar ایجاد می‌شود و با یکی از کلاس‌های .navbar-expand-xl ،lg ،md ،sm نوشته می‌شوند.
برای افزودن لینک در داخل منو، می‌توانید از المان <ul> به همراه کلاس .navbar-nav استفاده کنید. سپس از عنصر <li> برای زیر منوها با کلاس .nav-item و در انتها از کلاس .nav-link استفاده کنید. برای درک بهتر موضوع به مثال زیر توجه کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<nav class=“navbar navbar-expand-sm bg-light”> <!– Links –> <ul class=“navbar-nav”> <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> </nav> |
طراحی منوهای سربرگ‌دار ( Tap)
منوهای سربرگ‌دار منوهایی هستند که چندین صفحه‌ی مختلف را در خود جای داده‌اند. با کلیک بر روی هر سربرگ، محتویات آن نمایش داده می‌شود. برای تبدیل منوهای Nav ساده به منوهای Tab از کلاس nav-tabs. استفاده می‌کنیم. سپس با استفاده از کلاس active. سربرگ فعال را مشخص می‌کنیم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<ul class=“nav nav-tabs”> <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 disabled” href=“#”> غیر فعال </a> </li> </ul> |
نوع دیگری منوهای سربرگ‌دار وجود دارند که به منوهای pill معروف هستند. این نوع منو در بوت‌استرپ به جای داشتن سربرگ، دکمه‌های قرص‌مانندی دارد. برای ساخت این منوها باید از کلاس nav-pills. استفاده کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<ul class=“nav nav-pills”> <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 disabled” href=“#”> غیرفعال </a> </li> </ul> |
منوهای آبشاری یا لیستی
برای ساخت یک منوی آبشاری ساده باید از کلاس dropdown. برای عنصر نگهدارنده و کلاس dropdown-menu. برای خود منوی آبشاری استفاده کنید. برای باز کردن منوی آبشاری از یک دکمه یا لینک با کلاس dropdown-toggle. استفاده می‌شود:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<div class=“dropdown”> <button type=“button” class=“btn btn-primary dropdown-toggle” data-toggle=“dropdown”> Dropdown button </button> <div class=“dropdown-menu”> <a class=“dropdown-item” href=“#”> لینک۱ </a> <a class=“dropdown-item” href=“#”> لینک۲ </a> <a class=“dropdown-item” href=“#”> لینک۳ </a> </div> </div> |
بیشتر بخوانیم:
مطالب زیر را حتما مطالعه کنید
آموزش انیمیشن‌سازی با CSS
نحوه اضافه کردن کد PHP در وردپرس
دوره رایگان طراحی فروشگاه اینترنتی!
آموزش ایجاد لیست کشویی وابسته به هم در HTML
ساده و بدون هزینه ترفند های عکاسی حرفه ای با موبایل را یاد بگیرید
دیدگاهتان را بنویسید