Как поправить бургер?

Question

не по центру крестик ( появляется после клика на бургер) и после клика будто подлагивает он

$(document).ready(function() {

  $('.btn--menu').on('click', function() {
    $('.line-burger').toggleClass('line-active');
    $('.header__list').slideToggle(500);
  });

});

.line-burger {
     display: block;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%);
     width: 20px;
     height: 1px;
     background-color: #717171;
     transition: 0.5s width;
}
 .line-burger:after, .line-burger:before {
     content: '';
     position: absolute;
     width: 20px;
     height: 1px;
     background-color: #717171;
     left: 0;
     transition: 0.5s;
}
 .line-burger:after {
     top: calc(100% + 7px);
}
 .line-burger:before {
     bottom: calc(100% + 7px);
}
 .line-active {
     width: 0;
     left: 0px;
     transform: none;
}
 .line-active:after {
     top: 6px;
     transform: rotate(-45deg);
     transform-origin: 0 0;
}
 .line-active:before {
     bottom: 8px;
     transform: rotate(45deg);
     transform-origin: 0 100%;
}
 .btn--menu {
     display: block;
     position: relative;
     cursor: pointer;
     width: 25px;
     height: 25px;
     background-color: transparent;
     padding: 0px;
}
 * {
     box-sizing: border-box;
}
 *::after, *::before {
     box-sizing: border-box;
}

<button class="btn btn--menu"><span class="line-burger"></span>
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

В стиле .line-active вы поставили left: 0px;, тем самым сказав, что элемент должен быть слева.

Вместо этого, определите значение, которое передвинет крестик в центр: left: 3px;.

Или: left: calc(50% - 7px);

БЛОГ НА HUSL

Как поправить бургер?

Ответы (1 шт):