یکی از اصلیترین قسمت هایی که خیلی در طراحی های سایت استفاده میشه طراحی انواع منو هست ، منوها قسمت های مهمی از سایت رو تشکیل میدن که بوت استرپ اون رو هم پوشش داده و کار مارو برای طراحی منو ساده تر کرده.
خب پیشنهاد میشه اگه قسمت های قبلی دوره ی بوت استرپ رو مطالعه نکردید مطالعه کنید ، اگر هم وقت اینکار رو ندارید اصلا نگران نباشید تا حد ممکن داخل همین پست اشاره میکنیم به موارد گذشته.
ساخت منو
برای ساخت یک منوی ساده در بوت استرپ 4 کافیه تا از کلاس .nav استفاده کنیم. کلاس .nav رو داخل تگ ul قرار بدیم و یه لیست درست کنیم و با تگ li دونه دونه زیر مجموعه های منومون رو بسازیم ، تگ li باید دارای کلاس .nav-item و تگ a که برای لینک باید دارای کلاس .nav-link باشه ، برای درک کامل این نمونه مثال زیر را بررسی کنید :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<ul class="nav"> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> |
چینش منو
پیشنهاد میشود برای اینکه منوهاتون در حالت وسط چین قرار بگیرن از کلاس .justify-content-center و برای چینش منوهاتون در سمت راست .justify-content-end استفاده کنید.
به مثال زیر توجه کنید:
|
1 2 3 4 5 |
<!-- Centered nav --> <ul class="nav justify-content-center"> <!-- Right-aligned nav --> <ul class="nav justify-content-end"> |
در قسمت های پیشین دوره ی اموزشی بوت استرپ به این نکته اشاره کردیم که cdn راست چین را میتوانید برای بوت استرپ دانلود کنید که حالت پیش فرض بوت استرپ شما روی راست چین باشد.
منوی عمودی
برای ساخت منوی عمودی کافیه تا کلاس .flex-column را در تگ ul قرار دهیم ، به مثال زیر توجه کنید :
|
1 |
<ul class="nav flex-column"> |
استفاده از تب در منو
برای استفاده از تب در منو کافیه تا کلاس .nav-tabs رو به تگ ul استفاده کنیم ، برای حالتی هم که منو درحالت انتخاب کافیه کلاس .active رو اضافه کنیم ، به مثال زیر توجه کنید :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> |
طراحی منو به روش قرص توپی
برای ساخت این نوع منو کافیه تا کلاس .nav-pills رو استفاده کنیم :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> |
با استفاده از کلاس .nav-justified در طراحی منوهای تب و منوهای قرصی معجزه کنید!
|
1 2 |
<ul class="nav nav-pills nav-justified">..</ul> <ul class="nav nav-tabs nav-justified">..</ul> |
منوی بازشونده در منوی قرصی
قبلا راجب اینکه لیست های بازشونده و منوهای بازشونده چطوری طراحی میشن صحبت کردیم ، اما استفاده کردن از منوها در حالت منوی قرصی به شکل زیر :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> |
تب ها با لیست بازشونده
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> |
منوهای پویا
یکی از ویژه ترین کارها استفاده از منوهای پویاست ، منوهایی که بدون لود صفحه ، مطالب نمایش دهنده را عوض کند.
برای ساخت این منوها کافی است ویژگی data-toggle=”tab” را به هر لینک اضافه کنیم ، کافیه کلاس .tab-pane رو با یک id شاخص در یک المان تگ قرار بدیم و کلاس .tab-content رو هم بذاریم.
این نکته رو هم به یاد داشته باشید برای نمایش حالت فعال کلاس .active و حالت غیرفعال .fade را قرار دهیم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!-- Nav tabs --> <ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane container active" id="home">...</div> <div class="tab-pane container fade" id="menu1">...</div> <div class="tab-pane container fade" id="menu2">...</div> </div> |
برای حالت منوی قرص از ویژگی data-toggle=”pill” کافیه تا استفاده کنیم ، به مثال زیر توجه کنید :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!-- Nav pills --> <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" data-toggle="pill" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="pill" href="#menu1">Menu 1</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="pill" href="#menu2">Menu 2</a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane container active" id="home">...</div> <div class="tab-pane container fade" id="menu1">...</div> <div class="tab-pane container fade" id="menu2">...</div> </div> |
ویدیوی قسمت نوزدهم
پیشنهاد میشود برای مطالعه موارد بیشتر به سایت getbootstrap مراجعه فرمایید.
موفق باشید.
