ساخت منو با بوت استرپ ۴ - نسخه‌ی قابل چاپ

ساخت منو با بوت استرپ ۴ - نسخه‌ی قابل چاپ

+- تالار گفتگوی کیش تک/ kishtech forum (http://forum.kishtech.ir)
+-- انجمن: پردیس فناوری کیش (http://forum.kishtech.ir/forumdisplay.php?fid=1)
+--- انجمن: فناوری اطلاعات و ارتباطات (http://forum.kishtech.ir/forumdisplay.php?fid=6)
+--- موضوع: ساخت منو با بوت استرپ ۴ (/showthread.php?tid=31596)

ساخت منو با بوت استرپ ۴ - elmas - 09-06-2019

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

پیش از آغاز طراحی منو، به شما پیشنهاد می‌کنم چنانچه تا کنون مطالعه‌ای در زمینه فریم ورک بوت استرپ نداشته‌اید، نخست پیش مطالعه‌ای در این زمینه داشته باشید و سپس به سراغ آموزش طراحی منوی وب سایت بیایید.

برای استفاده از بوت استرپ ۴ نیاز است فایل‌های CSS و JS زیر را در کدهای خود قرار دهید.

لینک فایل ‌CSS زیر را در <head> خود قبل از تمام فایل‌های استایل خود قرار دهید:
[code]
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
[/code]
لینک فایل های جاوا اسکریپت زیر را هم در انتهای کدهای خود قبل از تگ </body> بگذارید.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
منوی ریسپانسیو با ویژگی بوت استرپ ۴ درواقع دربرگیرنده‌‌ای ساده برای جایدهی لوگو، منو و دیگر المان‌های ضروری در بخش هدر سایت شماست. به کد زیر دقت کنید:

[code]
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand mr-0 ml-5" href="#">لوگو</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">لینک ۱<span class="sr-only">(current)</span></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>
</nav>
[/code]
تمامی المان‌های منوی خود را داخل تگ <nav> قرار دهید و از کلاس‌های navbar و navbar-expand{-sm|-md-|-lg|-xl}،علاوه بر کلاس‌های مربوط به رنگ منو، استفاده کنید.

برای آنکه در حالت ریسپانسیو و دستگاه‌های موبایل / تبلت ویژگی بسته و باز شدن منو را بتوانید به خوبی ببینید حتماً از المان <button> به همراه کلاس navbar-toggler استفاده کنید، همچنین برای نمایش آیکون مربوط به منوی ریسپانسیوتان از یک تگ span به همراه کلاس navbar-toggler-icon استفاده کنید.

برای تعریف لیستی از آیتم‌های منو از تگ ul به همراه کلاس navbar-nav استفاده کنید.

به ازای هریک از آیتم‌های منو تگ li اضافه کنید.

به ازای هر لینک در منو تگ a بکار ببرید.

منوی ریسپانسیو به همراه خاصیت دراپ داون

شما می‌توانید در طراحی سایت خود، خیلی راحت ویژگی منوی دراپ دان را به آیتم‌های منوی اصلی اضافه کنید. چگونه؟ کافی است تنها کلاس dropdown را در liیی که قرار است ویژگی دراپ داونی بگیرد، بکار بگیرید .

[code]
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand mr-0 ml-5" href="#">لوگو</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">لینک ۱<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">لینک ۲</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
دراپ داون
</a>
<div class="dropdown-menu dropdown-menu-right text-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">لینک ۱</a>
<a class="dropdown-item" href="#">لینک ۲</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">لینک ۳</a>
</div>
</li>
</ul>
</div>
</nav>
[/code]
برای وب سایت های فارسی:

بطور پیش فرض منوهای دراپ داون در محل ۱۰۰٪ از بالا و سمت چپ پدر (Parent) خود قرار گرفته‌اند. اما شما می‌توانید با اضافه کردن کلاس dropdown-menu-right در کنار dropdown-menu منوی دراپ داون خود را در سمت راست قرار دهید.

مشخص کردن منوی جاری:

این حالت را می‌توان با بکارگیری کلاس active به لینک / تگ li آن آیتم منو، به خوبی نمایش داد. همچنین می‌توانید با بکارگیری یک تگ span با کلاس sr-only آیتمی را از دید تمامی دستگاه‌ها بغیر از مفسران صفحه نمایش مخفی کنید.

[code]
<nav class="navbar navbar-expand-lg navbar-light bg-light">

<a class="navbar-brand mr-0 ml-5" href="#">لوگو</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">

<span class="navbar-toggler-icon"></span>

</button>

<div class="collapse navbar-collapse" id="navbarNav">

<ul class="navbar-nav">

<li class="nav-item active">

<a class="nav-link" href="#">لینک ۱<span class="sr-only">(current)</span></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>

</nav>
[/code]
منو به همراه نوار جستجو:

شما می‌توانید در منوی خود از فرم‌هایی نظیر فرم جستجو استفاده کنید. برای این کار بعد از بسته شدن تگ ul، باید یک تگ فرم را باز کنید و به آن کلاس form-inline را اضافه کنید. اگر دقت داشته باشید در کد پایین از کلاس mr-auto برای تگ ul استفاده کردیم تا بتوانیم منو را تا آنجا که مقدور است به سمت راست هدایت کنیم و به تبع آن نوار جستجو را در نهایت سمت چپ صفحه داشته باشیم.

[code]
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand mr-0 ml-5" href="#">لوگو</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">خانه<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">لینک ۱</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
دراپ داون
</a>
<div class="dropdown-menu dropdown-menu-right text-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">لینک ۱</a>
<a class="dropdown-item" href="#">لینک ۲</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">لینک ۳</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="جستجو" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">جستجو</button>
</form>
</div>
</nav>
[/code]

ترازبندی:

شما می‌توانید از کلاس‌های مربوط به ایجاد فاصله‌ها همانند ml-auto و یا ویژگی‌های مربوط به flexbox همانند justify-content-start برای ترازبندی المان‌هایتان در منو استفاده کنید.
[code]
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<a class="navbar-brand mr-0 ml-5" href="#">لوگو</a>

<div class="collapse navbar-collapse justify-content-start" id="nav-content">
<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>
[/code]

کلاس‌های flexbox معمولاً از ترکیب نام آن ویژگی در flexbox بهمراه مقدار آن‌‌ها مشخص می‌شود. این تعریف می‌تواند به شما کمک کند تا بتوانید در مواجه با موقعیت‌های گوناگون نام کلاس flex-box مربوطه را به راحتی حدس بزنید.

از سویی دیگر شما می‌توانید برای تعیین ترازبندی منوی خود از کلاس‌های ریسپانسیو نیز استفاده کنید برای مثال:

کلاس justify-content-lg-start در واقع کلاس حالت ریسپانسیو justify-content Confused

tart می‌باشد که برای دستگاه‌ها و صفحه نمایش‌های بزرگتر از 992 px اعمال خواهد شد.

مدارک و مستندات بوت استرپ شامل لیست کاملی از کلاس‌های flexbox هستند که شما می‌توانید به آن به عنوان یک مرجع کامل مراجعه کنید.

رنگ ها:

جالب است بدانید، بوت استرپ گزینه‌های متنوعی را برای افزودن رنگ به منوهای شما فراهم کرده‌است. به اینصورت که، می‌توانید با کمک کلاس‌های navbar-light و یا navbar-dark تیره و روشن بودن پیش زمینه منوی تان را به راحتی مشخص کنید و در نهایت با کمک همان کلاس‌های بوت استرپ رنگ تکست‌های منو را تعیین کنید. همانند (bg-primary , bg-dark)
در مثال قبل می‌توانید کلاس‌های مربوط به رنگ را که در کد بکار برده شده‌است، مشاهده کنید.

استفاده از رنگ primary و روشن:

برای این کار در ادامه کلاس navbar-light از کلاسbg-primary استفاده کردیم.
[code]
<nav class="navbar navbar-expand-sm navbar-right bg-primary">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<a class="navbar-brand mr-0 ml-5" href="#">لوگو</a>

<div class="collapse navbar-collapse" id="nav-content">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-light" href="#">لینک ۱</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="#">لینک ۲</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="#">لینک ۳</a>
</li>
</ul>
</nav>
[/code]
استفاده از رنگ primary و تیره:

در اینجا ما از کلاس bg-primary در ادامه کلاس navbar-dark استفاده می‌کنیم.
[code]
<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>


<a class="navbar-brand mr-0 ml-5" href="#">لوگو</a>


<div class="collapse navbar-collapse" id="nav-content">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-light" href="#">لینک ۱</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="#">لینک ۲</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="#">لینک ۳</a>
</li>
</ul>
</nav>
[/code]
استفاده از رنگ شخصی و دلخواه:

برای آنکه بتوانید رنگ دلخواه خودتان را اعمال کنید کافی است ابتدا هر کلاسی با مشخصه bg-* را (همانند bg-primary) حذف و سپس رنگ دلخواهتان را با بکارگیری Css اعمال کنید.

[code]
<nav class="navbar navbar-expand-sm navbar-dark" style="background: coral;">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>


<a class="navbar-brand" href="#">Logo</a>


<div class="collapse navbar-collapse" id="nav-content">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
[/code]

منوی ثابت:

بسته به نوع طراحی سایت، شما می‌توانید منوی خود را در بالا و یا در پایین صفحه نمایشی بصورت ثابت نگهدارید. برای این کار می‌توانید از کلاس‌های fixed-top یا fixed-bottom استفاده کنید.

ثابت در بالا:

[code]
<nav class="navbar fixed-top navbar-expand-sm navbar-light bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<a class="navbar-brand mr-0 ml-5 text-white" href="#">لوگو</a>

<div class="collapse navbar-collapse" id="nav-content">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-white" href="#">لینک ۱</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">لینک ۲</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">لینک ۳</a>
</li>
</ul>
</nav>
[/code]
ثابت در پایین:

[code]
<nav class="navbar fixed-bottom navbar-expand-sm navbar-light bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>


<a class="navbar-brand mr-0 ml-5 text-white" href="#">لوگو</a>


<div class="collapse navbar-collapse" id="nav-content">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-white" href="#">لینک ۱</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">لینک ۲</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">لینک ۳</a>
</li>
</ul>
</nav>
[/code]

ترفند

منوی بوت استرپ با خاصیت Hover

در انتهای این مقاله تصمیم گرفتم تا به شما یک ترفند بسیار کاربردی با Jquery آموزش دهم. شما با این ترفند خواهید توانست زیر منوهای خود را به صورت hover مشاهده کنید. برای اینکار کافی است تنها از تکه کد jquery زیر در لابلای کدهای خود استفاده کنید.

[code]
$('ul.navbar-nav li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
[/code]

منبع: طراحی سایت حرفه ای