Здраствуйте! Подскажите пожалуста, как можна сделать чтоб при нажатии на кнопку navbar-toggle, ета кнопочка менялась на крестик navbar-toggle-open.?
1 ответ
Можно использовать готовый плагин, коих тьма уже развилась, на любой вкус. А можно в бургере скрыть линию по середине, а верхнюю и нижнюю повернуть под углом.
$(document).ready(function () {
$(".navbar-toggle").on("click", function () {
$(this).toggleClass("active");
});
});
.navbar-toggle .icon-bar:nth-of-type(2) {
top: 1px;
}
.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);
}
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Бургер с анимацией</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">Кнопка домой</a>
</li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>