Animated X Bootstrap Menu
HTML
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
<span class="sr-only">Nawigacja</span>
<span class="icon-bar icon-bar-one"></span>
<span class="icon-bar icon-bar-two"></span>
<span class="icon-bar icon-bar-three"></span>
</button>
<a class="navbar-brand" href="#">
<img src="images/favicon.png" alt="favIcon">
</a>
</div>
<div class="navbar-collapse" id="collapse">
<ul class="nav navbar-nav">
<li role="presentation"><a href="#">Home</a></li>
<li role="presentation" class="active"><a href="#">Option1</a></li>
<li role="presentation" class="disabled"><a href="#">Option2</a></li>
<li role="presentation"><a href="#">Option3</a></li>
<li role="presentation"><a href="#">Option4</a></li>
</ul>
</div>
</nav>
CSS
.navbar-toggle{
padding: 0;
margin: 0;
height: 50px;
width: 50px;
border: none;
border-radius: 5px;
}
.navbar-toggle:focus {outline: none;}
.navbar-toggle .icon-bar {
display:block;
position:absolute;
opacity:1;
width:30px;
height: 2px;
right:10px;
transition:.2s ease-in-out;
}
.navbar-toggle .icon-bar-one {
top:14px;
left: 9px;
}
.navbar-toggle .icon-bar-two {
top:23px;
left: 9px;
}
.navbar-toggle .icon-bar-three {
top:32px;
left: 9px;
}
.navbar-toggle.open .icon-bar-one {
top:25px;
-webkit-transform:rotate(135deg);
-moz-transform:rotate(135deg);
-o-transform:rotate(135deg);
transform:rotate(135deg);
}
.navbar-toggle.open .icon-bar-two {
opacity:0;
width:0;
}
.navbar-toggle.open .icon-bar-three {
top:25px;
-webkit-transform:rotate(-135deg);
-moz-transform:rotate(-135deg);
-o-transform:rotate(-135deg);
transform: rotate(-135deg);
}
.navbar-toggle .icon-bar + .icon-bar{
margin: 0;
}
JAVASCRIPT
$('.navbar-toggle').click(function(){
$(this).toggleClass('open');
});
$(document).click(function (event) {
var clickover = $(event.target);
var _opened = $(".navbar-collapse").hasClass("in");
if (_opened === true && !clickover.hasClass("clickVisible")) {
$(".navbar-collapse").collapse('hide');
$('.navbar-toggle').toggleClass('open');
}
});
