1

В bootsrtap 3 получается, но в 4 нет. как сделать кнопку с тремя полосками?введите сюда описание изображения

2

2 ответа 2

3

Добрый день. В Bootstrap есть такой значок:

<button class="navbar-toggler" type="button"> <span class="navbar-toggler-icon"></span> </button>

http://bootstrap-4.ru/docs/4.0/components/navbar/#supported-content

0

Я предпочитаю использовать псевдоэлементы :before и :after для этой цели.

$(document).ready(function() {
  "use strict";
  $('.btn-menu').on('click', function(e) {
    $(this).toggleClass('is-active');
  });
});
 * {
    margin: 0;
    padding: 0;
 }

.btn-menu {
  position: relative;
  width: 40px;
  height: 24px;
  cursor: pointer;
  margin-top: 10px;
}

.btn-menu i {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 40px;
  height: 4px;
  margin-top: -2px;
  -webkit-transition-timing-function: cubic-bezier(.55, .055, .675, .19);
  transition-timing-function: cubic-bezier(.55, .055, .675, .19);
  -webkit-transition-duration: 75ms;
  transition-duration: 75ms;
  background-color: #26435f;
}

.btn-menu i:before,
.btn-menu i:after {
  position: relative;
  display: block;
  width: 40px;
  height: 4px;
  content: '';
  -webkit-transition: top 75ms ease .12s, opacity 75ms ease;
  transition: top 75ms ease .12s, opacity 75ms ease;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
  -webkit-transition-duration: .15s;
  transition-duration: .15s;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  background-color: #26435f;
}

.btn-menu i:before {
  top: -10px;
}

.btn-menu i:after {
  bottom: -6px;
}

.btn-menu.is-active i {
  -webkit-transition-delay: .12s;
  transition-delay: .12s;
  -webkit-transition-timing-function: cubic-bezier(.215, .61, .355, 1);
  transition-timing-function: cubic-bezier(.215, .61, .355, 1);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.btn-menu.is-active i:before {
  top: 0;
  -webkit-transition: top 75ms ease, opacity 75ms ease .12s;
  transition: top 75ms ease, opacity 75ms ease .12s;
  opacity: 0;
}

.btn-menu.is-active i:after {
  bottom: 4px;
  -webkit-transition: bottom 75ms ease, -webkit-transform 75ms cubic-bezier(.215, .61, .355, 1) .12s;
  transition: bottom 75ms ease, -webkit-transform 75ms cubic-bezier(.215, .61, .355, 1) .12s;
  transition: bottom 75ms ease, transform 75ms cubic-bezier(.215, .61, .355, 1) .12s;
  transition: bottom 75ms ease, transform 75ms cubic-bezier(.215, .61, .355, 1) .12s, -webkit-transform 75ms cubic-bezier(.215, .61, .355, 1) .12s;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-menu"><i></i></div>

4
  • стрёмненькая реализация, зачем вообще i и столько анимаций для трёх полосок? 27 мар 2018 в 14:25
  • @Artem Gorlachev о, ну предложи свой вариант, о великий гуру, я с радостью приобщусь к тому, как это делают Профессионалы
    – Heidel
    27 мар 2018 в 14:27
  • jsfiddle.net/artemfs/jdLsgfsz 27 мар 2018 в 14:52
  • @Heidel так себе ..они работают не очень..
    – Randall
    27 мар 2018 в 14:56

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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