1

Здраствуйте! Подскажите пожалуста, как можна сделать чтоб при нажатии на кнопку navbar-toggle, ета кнопочка менялась на крестик navbar-toggle-open.?

1 ответ 1

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.