Many times we require the responsive menu button for mobile phones. There are several ways in which you can make this bootstrap navigation bar icon but I will tell you the best and the easiest way to build this button. In this tutorial, we’ll learn how to create animated toggle button of bootstrap navigation using bootstrap, html, css, and javascript.
HTML
[code]
<nav class="navbar white navbar-default">
<div class="logo"></div>
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".mainnav" aria-expanded="false" aria-controls="navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse mainnav">
<ul class="nav navbar-nav">
<li><a class="scroller" href="#proj-head">projects</a></li>
<li><a href="#section3">studio</a></li>
<li><a href="#section4">press</a></li>
<li><a href="#section6">Contact</a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
</ul>
</div><!–/.nav-collapse –>
</div><!–/.container-fluid –>
</nav>
[/code]
CSS
[code]
.navbar-toggle .icon-bar:nth-of-type(3) {
top: 2px;
}
.navbar-toggle .icon-bar {
position: relative;
transition: all 500ms ease-in-out;
}
.navbar-toggle.active .icon-bar:nth-of-type(1) {
top: 6px;
transform: rotate(45deg);
}
.navbar-toggle.active .icon-bar:nth-of-type(2) {
background-color: transparent;
}
.navbar-toggle.active .icon-bar:nth-of-type(3) {
top: -6px;
transform: rotate(-45deg);
}
[/code]
JQUERY
[code]
$(document).ready(function () {
$(".navbar-toggle").on("click", function () {
$(this).toggleClass("active");
});
});
[/code]
You may want to take a look at the following related posts:
- Creative Bootstrap Template With Free Source Code
- Stunning Bootstrap One Page Template Free Project
- JQuery Scroll Effect Tutorial For One Page Website
- Jquery Plugin For Image Zoom On Mouse Hover
Also for more awesome tutorials, please don’t forget to like our facebook page Meul Tech .
Bonus: We also give training on following topics:
1. Angular Training in Mumbai.
2. Bootstrap Training Course in Mumbai.
3. Web Designing Training in Mumbai.
4. UI / UX Training.