منو های ناوبری در بوت استرپ ( بررسی کامل منوهای ناوبری )

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

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

• منوی ناوبری یک منو ی اصلی است که در بالای هر صفحه از سایت قرار میگیرد و کاربران را به صفحات مختلف سایت هدایت می کند.
• با استفاده از بوت استرپ می توان یک منو ناوبری ساخت که به صورت کاملا ریسپانسیو باشد.
• منوهای ناوبری در بوت استرپ را با کلاس <“nav class=”navbar navbar-default> می توان ایجاد کرد.

به مثال زیر دقت کنید . این مثال نحوه اضافه کردن یک منوی ناوبری به صورت کاملا ریسپانسیو را به بالای وب سایت به شما آموزش می دهد.

<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>

در رزولوشن های پایین تر منو به شکل زیر نمایش داده می شود.و آیتم های منو در زیر هم قرار می گیرند.

: NAVBAR-INVERSE کلاس

طرح و ظاهر منوی ناوبری در بوت استرپ قابل تغییر است. اگر از کلاس پیش فرض خوشتان نمی آید می توانید از کلاس navbar – inverse استفاده کنید و ظاهر منوی ناوبری را تغییر دهید. کافی است کلاس navbar navbar-default را به navbar navbar-inverse تغییر دهید. به مثال زیر دقت کنید.

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>

همان طور که در تصویر بالا میبینید این کلاس رنگ منوی ناوبری را به رنگ مشکی تغییر داده است.

منوهای ناوبری همراه با منوی کشویی درون آنها :

درون منوهای ناوبری می توانید از دکمه های کشویی استفاده کنید.در مثال زیر یک دکمه کشویی درون منوی ناوبری ایجاد شده است.

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>

کلاس NAVBAR-RIGHT :

• کلاس navbar-right برای اضافه کردن دکمه به سمت راست منوهای ناوبری کاربرد دارند.

در مثال زیر با استفاده از این کلاس و گلف آیکون دکمه های ورود و عضویت را در سمت راست منوی ناوبری اضافه کرده ایم.

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</nav>

کلاس NAVBAR-BTN :

برای اضافه کردن دکمه درون منوی ناوبری از کلاس navbar-btn می توانید استفاده کنید.روش کار در زیر آورده شده است .

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<button class="btn btn-danger navbar-btn">Button</button>
</div>
</nav>

کلاس NAVBAR-FORM :

• از کلاس navbar-form می توان برای اضافه کردن عناصر فرم درون منو های ناوبری استفاده کرد.

روش کار در مثال زیر توضیح داده شده است.

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
<form class="navbar-form navbar-left" action="/action_page.php">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</nav>

کلاس INPUT-GROUP :

• از کلاس input-group می توان برای اضافه کردن یک آیکون در فیلد ورودی استفاده کنید.در مثال زیر این موضوع توضیح داده شده است.

<form class="navbar-form navbar-left" action="/action_page.php">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>

کلاس NAVBAR-TEXT :

• از کلاس navbar – text برای قرار دادن کلیه عناصر درون منوی ناوبری به غیر از لینک ها (عناصری که پیوندی ندارند)استفاده کنید.
• در این مثال به وسیله این کلاس متنی که در تگ p نوشتهه شده است در منوی ناوبری قرار داده شده است.
• این کلاس کلیه عناصردرون منوی ناوبری را که لینک مشده اند در یک لاین نمایش می دهد.در واقع چینش متقارن عمودی را برای غیر لینک ایجاد می کند.

<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<p class="navbar-text">Some text</p>
</nav>

کلاس NAVBAR-FIXED-TOP :

• به وسیله این کلاس می توان منوی ناوبری را در بالای صفحه ثابت قرار داد.
• زمانی که از این کلاس استفاده می شود منو در بالای صفحه حتی زمانی که اسکرول خورده می شود هم ثابت نمایش داده می شود.
• در مثال زیر این موضوع نمایش داده شده است.

<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>

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

کلاس NAVBAR-FIXED-BOTTOM :

به وسیله این کلاس می توان منوی ناوبری را در پایین صفحه ثابت قرار داد.

<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>

مخفی کردن منوی ناوبری در بوت استرپ :

همان طور که در مثال های بالا دیدید زمانی که در رزولوشن های کمتر وب سایت نمایش داده می شود منوی ناوبری فضای زیادی را اشغال می کند.اشغال فضا نوعی نقص برای وب سایت می باشد هرچند که از لحاظ ریسپانسیو بودن مشکلی ایجاد نمی کند برای حل این مشکل می توان در رزولوشن های کمتر منویناوبری را حذف کرددر مثال زیرمنوی ناوبری با یک دکمه در گوشه بالا سمت راست جایگزین می شود. تنها زمانی که دکمه کلیک می شود، منوی ناوبری نمایش داده می شود :

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>

در رزولوشن های پایین منوی ناوبری در بوت استرپ به صورت زیر نمایش داده می شود.(یک دکمه در سمت راست)

بعد از کلیک بر روی دکمه , منوی ناوبری در بوت استرپ به کاربر نمایش داده می شود.