0

Мне нужно центрировать центральную линию. Как я могу это сделать не сместив при этом нижнюю и верхнюю линии?

const menuBtn = document.querySelector('.menu-button');
let menuOpen = false;
menuBtn.addEventListener('click', () => {
  if(!menuOpen) {
    menuBtn.classList.add('open');
    menuOpen = true;
  } else {
    menuBtn.classList.remove('open');
    menuOpen = false;
  }
});
body {
    padding: 0;
    margin: 0;
    background-color: rgb(255, 213, 162);
    transition: all .5s ease-in-out;
}

.menu-button {
    width: 1.5625rem;
    height: 1.5625rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.menu-button__line{
    background: #1D1D1D;
    width: 0.75rem;
    height: 0.125rem;
    border-radius: 5px;
    transition: all .5s ease-in-out;
}

.menu-button__line::before,
.menu-button__line::after {
    content: '';
    position: absolute;
    background: #1D1D1D;
    width: 1.125rem;
    height: 0.125rem;
    border-radius: 5px;
    transition: all .5s ease-in-out;
}

.menu-button__line::before {
    transform: translateY(-0.4375rem);
}

.menu-button__line::after {
    transform: translateY(0.4375rem);
}

.menu-button.open .menu-button__line {
    transform: translateX(-0.4375rem);
    background: transparent;
}

.menu-button.open .menu-button__line::before {
    transform: rotate(45deg);
}

.menu-button.open .menu-button__line::after {
    transform: rotate(-45deg);
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="styles.css">
    <title>Button</title>
</head>
<body>
    <div class="menu-button">
        <div class="menu-button__line"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

Ожидаемый результат

Ожидаю такую картину

3
  • 1
    Можно добавить отрицательный margin-left к before/after, а к самому элементу, положительный. Но на мой взгляд, сложным путём вы идете. Посмотрите этот вариант, может на этой базе проще будет сделать, изменив длину средней линии. 6 июл 2022 в 11:40
  • Больно уж лень переписывать структуру кнопки, способ с отрицательным margin идеально подошел и решил все проблемы. До это пробовал сдвинуть линии с помощью left, но это приводило к визуальному багу при обратной анимации кнопки. Большое спасибо!
    – dhelfy
    6 июл 2022 в 12:01
  • Если Вы просто переместите Ваши псевдоэлементы на уровень выше и выровняете по колонке, то вся проблема решиться и без всяких грубых (отрицательных/положительных) отступов. Так же не использовал свойство position, оно тут тоже лишнее. Решение выглядит более изящно, отцентрованно автоматически. Решение можете посмотреть в ответе
    – SLideR11
    8 июл 2022 в 5:19

1 ответ 1

0

Выкинул ненужные стили, перенёс псевдоэлемены на один уровень вверх, выровнял по колонке и отцентровал. Данное решение считаю более правильным, так как не имеет каких-то отступов, position: absolute;, что даст правильное отображение при любых размеров экрана

const menuBtn = document.querySelector('.menu-button');
let menuOpen = false;
menuBtn.addEventListener('click', () => {
  if (!menuOpen) {
    menuBtn.classList.add('open');
    menuOpen = true;
  } else {
    menuBtn.classList.remove('open');
    menuOpen = false;
  }
});
body {
  padding: 0;
  margin: 0;
  background-color: rgb(255, 213, 162);
  transition: all .5s ease-in-out;
}

.menu-button {
  width: 1.5625rem;
  height: 1.5625rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  cursor: pointer;
}

.menu-button::before,
.menu-button::after {
  content: '';
  background: #1D1D1D;
  width: 1.125rem;
  height: 0.125rem;
  border-radius: 5px;
  transition: all .5s ease-in-out;
}

.menu-button__line {
  background: #1D1D1D;
  width: 0.75rem;
  height: 0.125rem;
  border-radius: 5px;
  transition: all .5s ease-in-out;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="styles.css">
  <title>Button</title>
</head>

<body>
  <div class="menu-button">
    <div class="menu-button__line"></div>
  </div>
  <script src="script.js"></script>
</body>

</html>

Ваш ответ

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

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