В bootsrtap 3 получается, но в 4 нет. как сделать кнопку с тремя полосками?
2 ответа
Добрый день. В 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
Я предпочитаю использовать псевдоэлементы :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>
-
стрёмненькая реализация, зачем вообще
i
и столько анимаций для трёх полосок? 27 мар 2018 в 14:25 -
@Artem Gorlachev о, ну предложи свой вариант, о великий гуру, я с радостью приобщусь к тому, как это делают Профессионалы– Heidel27 мар 2018 в 14:27
-
-