در خدمت شما هستیم با آموزش Bootstrap 4 جلسه نوزدهم (Navbar)
آموزش Bootstrap 4 جلسه نوزدهم (Navbar) از سری آموزش های تک قسمتی است.
منو ناوبری
منو ناوبری تمامی امکاناتی هست که ما میتوانیم در نوار منو خود جای دهیم این موارد میتواند شامل موارد زیر باشد
- لینک ها و منو ها
- نوشته ساده
- کادر جستجو
- لوگو نوشتاری و عکسی
- نحوه قرار گیری نوار منو در صفحه
- فعال یا غیر فعال بودن گزینه های منو
به کمک این موارد میتوانیم امکانات گوناگونی را به منو های خود اضافه کنیم و دسترسی کاربر به سایت خود را ساده کنیم.
ساخت منو ناوبری ساده
بوت استرپ برای ساخت ناوبری ها نیز فکری کرده است و کلاس هایی را ایجاد کرده است کافیست شما این کلاس ها را در تگ های مناسب قرار دهید تا به امکانات خوبی برسید برای ساخت ناوبری ساده نیاز به تگ nav و ul و li داریم کل محتوا را داخل تگ nav قرار میدهیم و به آن کلاس navbar را میدهیم اگر میخواهیم منو افقی باشد کلاس navbar-expand-sm را نیز اضافه کنید.
حال نوبت به ul میرسد که باید کلاس navbar-nav را به آن بدهیم و به li های داخل آن کلاس nav-item اگر میخواهید داخل li های خود از تگ a استفاده کنید باید از کلاس nav-link برای آنها استفاده کنید.برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:
<nav class="navbar navbar-expand-sm bg-light">
<!-- Links -->
<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>
ساخت منو عمودی
ساخت منو ناوبری عمودی بسیار راحت تر از منو ساده است کافیست شما یک کلاس را حذف کنید تا منو شما از حالت افقی به عمودی تغییر پیدا کند کلاس navbar-expand-sm را از تگ nav خود حذف کنید. به همین راحتی میتوانید منو عمودی بسازید.
ساخت منو ناوبری وسط چین
اگر قصد دارید منو خود را در وسط صفحه قرار دهید به کمک بوت استرپ میتوانید این کار را انجام دهید. کافیست به کلاس های بوت استرپ مراجعه کنید و کلاس justify-content-center را به تگ nav خود اضافه کنید. برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:
<nav class="navbar navbar-expand-sm bg-light justify-content-center"> ... </nav>
منو های رنگی
درست است میتوانید منو های ناوبری رنگارنگ داشته باشید برای این کار کافیست از کلاس های رنگی بوت استرپ استفاده کنید.اگر خاطرتان باشد در آموزش های قبلی گفتیم که با استفاده از bg و کلاس های رنگی میتوان زمینه را رنگی کرد به عنوان مثال bg-success که به ما رنگ سبز را میدهد. کافیست این کلاس را به تگ nav خود بدهید تا منوی شما رنگ بگیرد برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:
<nav class="navbar navbar-expand-sm bg-primary">...</nav>
اضافه کردن برند و لوگو به منو
به ۲ روش لوگو را در منو میتوان جای داد یا نام آن را نوشت و یا تصویر لوگو در این قسمت میخواهیم درباره نوشتن نام لوگو صحبت کنیم.شما میتوانید در ابتدای منو خود نام تجاری خود را قرار دهید و آن را به هرجایی لینک کنید برای این کار کافیست بعد از تگ nav باز یک تگ a با کلاس navbar-brand بسازید و در آن نام برند خود را بنویسید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:
<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <a class="navbar-brand" href="#">Logo</a> ... </nav>
اما اگر بخواهید تصویر لوگو خود را قرار دهید:
برای این کار کافیست در تگ a که در قسمت بالا گفتیم یک تگ img قرار دهید و تصویر برند خود را در آن لود کنید بهتر است یک width با اندازه ۴۰ نیز به تصویر خود بدهید برای واضح شدن موضوع از کد زیر کمک بگیرید:
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">
<img src="bird.jpg" alt="Logo" style="width:40px;">
</a>
...
</nav>
ناوبری رسپانسیو
اگر قصد ساخت منو رسپانسیو را دارید این قسمت از آموزش را با دقت مطالعه کنید . بعد از باز کردن تگ nav یک button تعریف میکنیم و به آن کلاس navbar-toggle میدهیم سپس attribute با نام data-toggle و با مقدار collapse و بعد از آن وقت تعیین هدف است که attribute با نام data-target و مقدار آن را یک نام دلخواه همراه با # قرار میدهیم از این نام استفاده خواهیم کرد.
قبل از بستن تگ button یک span با کلاس navbar-toggler-icon میسازیم این span آیکن منو مارا میسازد حال نوبت منو ها است که ul ها هستند اما قبل ul باید یک div با کلاس collapse و کلاس navbar-collapse بسازیم و id با نامی که به صورت اختیاری در بالا ساختیم ایجاد کنیم این div قبل از تگ nav بسته میشود باقی موارد مشابه قبل است برای واضح شدن موضوع از کد زیر کمک بگیرید:
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-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>
</ul>
</div>
</nav>
navbar با قابلیت زیر منو
به کمک کلاس های بوت استرپ میتوانید برای منو خود زیر منو ایجاد کنید که البته به استفاده از چند تگ نیز نیازمندیم . برای این کار li که قرار است زیر منو داشته باشد را انتخاب میکنیم و در کنار کلاس nav-item کلاس dropdown را نیز قرار میدهیم . سپس به تگ a آن کنار کلاس nav-link کلاس dropdown-toggle را اضافه میکنیم هم چنین باید attribute با نام data-toggle و مقدار dropdown را نیز به آن بدهیم حال تمام زیر منو ها که نیاز داریم را داخل یک div با کلاس dropdown-menu قرار میدهیم این زیر منو ها تگ a هستند که باید کلاس dropdown-item بگیرند برای واضح شدن موضوع از کد زیر کمک بگیرید:
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
<!-- Links -->
<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>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Dropdown link
</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>
</ul>
</nav>
قرار دادن سرچ در navbar
اگر میخواهید در منو خود باکس سرچ داشته باشید کافیست بعد از باز شدن تگ nav یک تگ form ایجاد کنید و به آن کلاس form-inline را بدهید حال در داخل این فرم به ۲ مورد نیاز است :
- باکس جستجو
- دکمه سرچ
یک input با کلاس form-control میسازیم و سپس یک button با کلاس btn و کلاس رنگی مد نظر برای واضح شدن موضوع ز کد زیر کمک بگیرید:
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-success" type="submit">Search</button>
</form>
</nav>
قرار دادن متن در منو
برای نوشتن متن در منو کافیست هر کجا که خواستید یک تگ span با کلاس navbar-text بسازید.
برای واضح شدن موضوع از کد زیر کمک بگیرید:
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Links -->
<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>
</ul>
<!-- Navbar text-->
<span class="navbar-text">
Navbar text
</span>
</nav>
منو ناوبری ثابت
اگر میخواهید منو ثابتی در بالا یا پایین سایت خود داشته باشید کافیست روش زیر را پیگیری کنید:
برای ساخت منو ثابت بالا کلاس fixed-top را به nav خود بدهید و برای منو ثابت پایین کلاس fixed-bottom را به nav بدهید. برای واضح شدن موضوع از کد زیر کمک بگیرید:
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> ... </nav>
منو چسپان (sticky)
و اما در نهایت ساخت منو چسبان !!
برای ساخت منو چسبان کافیست کلاس sticky-top را به nav خود بدهید به همین سادگی
به پایان آموزش navbar رسیدیم امیدوارم برای شما مفید بوده باشد.
برای راحتی شما کدی شامل کل آموزش را آماده کرده ایم:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar bg-light">
<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>
----------------------------------------------------------------------------
<nav class="navbar navbar-expand-sm justify-content-center">
<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>
----------------------------------------------------------------------------
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" 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>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" 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>
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" 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>
<nav class="navbar navbar-expand-sm bg-success navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" 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>
<nav class="navbar navbar-expand-sm bg-info navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" 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>
<nav class="navbar navbar-expand-sm bg-warning navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" 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>
<nav class="navbar navbar-expand-sm bg-danger navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" 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>
<nav class="navbar navbar-expand-sm bg-secondary navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" 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>
----------------------------------------------------------------------------
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand/logo -->
<a class="navbar-brand" href="#">Logo</a>
<!-- Links -->
<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>
----------------------------------------------------------------------------
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand/logo -->
<a class="navbar-brand" href="#">
<img src="bird.jpg" alt="logo" style="width:40px;">
</a>
<!-- Links -->
<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>
----------------------------------------------------------------------------
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-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>
</ul>
</div>
</nav>
----------------------------------------------------------------------------
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
<!-- Links -->
<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>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Dropdown link
</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>
</ul>
</nav>
----------------------------------------------------------------------------
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-success" type="submit">Search</button>
</form>
</nav>
----------------------------------------------------------------------------
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Links -->
<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>
</ul>
<!-- Navbar text-->
<span class="navbar-text">
Navbar text
</span>
</nav>
----------------------------------------------------------------------------
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">Logo</a>
<ul class="navbar-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>
</ul>
</nav>
----------------------------------------------------------------------------
<div style="height:1500px">
<div class="container-fluid">
<br>
<h3>Sticky Navbar</h3>
<p>A sticky navigation bar stays fixed at the top of the page when you scroll past it.</p>
<p>Scroll this page to see the effect. <strong>Note:</strong> sticky-top does not work in IE11 and earlier.</p>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
<a class="navbar-brand" href="#">Logo</a>
<ul class="navbar-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>
</ul>
</nav>
<div class="container-fluid"><br>
<p>Some example text. Some example text. Some example text. Some example text. Some example text.</p>
<p>Some example text. Some example text. Some example text. Some example text. Some example text.</p>
<p>Some example text. Some example text. Some example text. Some example text. Some example text.</p>
<p>Some example text. Some example text. Some example text. Some example text. Some example text.</p>
</div>
</div>
<br>
</body>
</html>
می توانید دیگر قسمت ها را در لینک زیر ببینید:
آموزش Bootstrap 4 جلسه هجدهم (Navs)
آموزش Bootstrap 4 جلسه بیستم (form)
شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید:
همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید.