Как зафиксировать меню бургер HTML&CSS&JS?

Question

[Exxyss]

Всем доброй ночи, а то и вечера. Я на протяжении 3 месяцев, изучаю HTML&CSS. Темп у меня неспешный. Со вчерашнего дня, решил дополнительно подключать JS, а так-же постараться его понять. Сделал своё первое БУРГЕР меню, которое для меня (лично), вышло не скажу, чтобы хорошим, на первый раз сойдет. Но... У меня возникла такая проблема:
При приближении, или же сжатии страницы, это самое "Боковое меню", начинает автоматически вылезать (плавать/съезжать) со своего установленного ранее места. Как решить данную проблему? Мне необходимо, чтобы оно вылезало только и только тогда, когда пользователь кликает на кнопку.

<header class="header">
        <div class="header__container container">
            <button class="header__burger__btn" id="burger">
                <span></span>
                <span></span>
                <span></span>
            </button>
            <a href="#" class="header__logo">
                <span>Ran</span><span>Devu</span>
            </a>
            <nav class="header_navbar">
                <ul class="navbar__menu-list">
                    <li class="menu__item"><a href="mount.html" class="menu__link">Home</a></li>
                    <li class="menu__item"><a href="Index.html" class="menu__link">More</a></li>
                    <li class="menu__item"><a href="aesthet.html" class="menu__link">Menus</a></li>
                    <li class="menu__item"><a href="astana.html" class="menu__link">About Us</a></li>
                    <li class="menu__item"><a href="Index.html" class="menu__link">Contacts</a></li>
                    <li class="menu__item"><a href="Index.html" class="menu__link">Entertainments</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <main class="main__page">
        <div class="main__container">
        </div>
    </main>

.header {
    width: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
    z-index: 999999;
}

.container {
    max-width: 1200px;
    margin: 0% auto;
    padding: 0px 20px;
}

.header__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 20px;
    min-height: 120px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.5);
}

/*----------------------------HEADER__BUTTON--------------------------*/

.header__burger__btn {
    display:  block;
    position: relative;
    width: 50px;
    height: 50px;
    border: none;
    background-color: transparent;
    z-index: 2;
}

.header__burger__btn span {
    position: absolute;
    width: 30px;
    height: 3px;
    background: white;
    left: 10px;
    transition: transform 1s, opacity 1s, background-color 1s;
}

.header__burger__btn span:nth-child(1) {
    transform: translateY(-10px);
}

.header__burger__btn span:nth-child(3) {
    transform: translateY(10px);
}

.header.open .header__burger__btn span:nth-child(1) {
    transform: translateY(0px) rotate(45deg);
}

.header.open .header__burger__btn span:nth-child(2) {
    opacity: 0;
}

.header.open .header__burger__btn span:nth-child(3) {
    transform: translateY(0) rotate(-45deg);
}

.header .header__burger__btn span {
    background-color: white;
}

/*----------------------------HEADER__LOGO--------------------------*/

.header__logo {
    display: block;
    font-size: 40px;
    font-weight: 700;
    position: relative;
}

.header__logo span:nth-child(1) {
    color: white;
}

.header__logo span:nth-child(2) {
    color: chocolate;
}

/*----------------------------HEADER__NAVBAR--------------------------*/

.header_navbar {
    position: absolute;
    left: -50%;
    top: 0%;
    width: 910px;
    height: 100vh;
    display: flex;
    justify-content: center;
    letter-spacing: 5px;
    align-items: center;
    backdrop-filter: blur(50px);
    border-right: 3px solid rgba(255, 255, 255, 0.5);
    transition: transform 2s;
}

.header.open .header_navbar{
    transform: translateX(100%);
}

.navbar__menu-list {
    color: white;
    font-size: 20px;
    display: block;
    text-align: center;
    text-transform: uppercase;
}

.menu__item {
    padding: 20px 0px;
}

.menu__link {
    color: white;
    transition: all .3s ease-in-out;
    opacity: 0.7;
}

.menu__link:hover {
    opacity: 4;
    border-left: 2px solid white;
    border-right: 2px solid white;
    padding-left: 15px;
    padding-right: 15px;
}

/*----------------------------MAIN--------------------------*/

.main__page {
    background-image: url(images/randevu.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100vh;
}

document.addEventListener("DOMContentLoaded", function() {
    document.getElementById("burger").addEventListener("click", function() {
        document.querySelector("header").classList.toggle("open")
    })
})

Answer 1

[Maxim Uporov]

Позиция меняется из-за относительного значения left в классе .header_navbar, чтобы это исправить в данном случае я бы поменял left на transform: translateX(-80%)
А при открытии менял значение translateX

.header_navbar {
    position: absolute;
    transform: translateX(-80%);
    top: 0%;
    width: 910px;
    height: 100vh;
    display: flex;
    justify-content: center;
    letter-spacing: 5px;
    align-items: center;
    backdrop-filter: blur(50px);
    border-right: 3px solid rgba(255, 255, 255, 0.5);
    transition: transform 2s;
}

.header.open .header_navbar{
    transform: translateX(-10%);
}

P.S. небольшой совет, в начале css файла лучше всего обнулять стандартные стили вот этой строкой

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Comments

[Exxyss]

Благодарю, друг. Эффект плавания исчез, вот только, отместку к этой проблеме, вышла другая. При отрицательном значении left, блок был запрятан, даже при отдалении. Transform же, оставляет объект видимым, при отдалении страницы, если только, не установить значение в -1000% +- (но, правильно ли это?).
В случае с -80%, меню остается видимым на странице.

[Maxim Uporov]

Exxyss, в классе .container замените max-width, на width: 100vw, тогда меню будет вылазить только из-за padding, поставить translateX-105% и все будет ок. Опять же, проблема из-за относительных единиц, т.к. контейнер у меню размером максимум 1200px, меню просто не может преодолеть это значение

[Maxim Uporov]

Exxyss, а и еще, в классах .header_container и .container один и тот же padding, который перезаписывает сам себя, в одном месте от него можно избавиться

[Exxyss]

Maxim Uporov, При многом благодарен, Максим! Вы помогли мне избавиться от этой назойливой проблемы. Всех благ вам!