Блог

В настоящее время я нахожусь в процессе кодирования моей панели навигации для мобильного окна просмотра. Я провел некоторый поиск и подумал, что нашел решение, но оказалось, что решение вообще не работает. Я пытаюсь сделать так, чтобы при нажатии / нажатии на навигационную панель на панели навигации параметры навигации перемещались на экран справа налево. Я не уверен, где логическая ошибка или почему нажатый навигационный бургер не реагирует на событие.

Вот HTML-код, соответствующий навигационной панели:

 <div id="nav-burger">
    <div id="option-1"></div>
    <div id="option-2"></div>
    <div id="option-3"></div>
</div>
 

Вот соответствующий CSS (примечание: нигде в моем HTML у меня нет элемента с классом ‘nav-active’ — на случай, если это актуально):

     #nav-title a {
        flex: 1;
        text-align: center;
        line-height: 2.5;
    }

    #nav-links {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        background-color: #404040;
        position: absolute;
        top: 40px;
        height: 40vh;
        width: 100%;
        transform: translateX(100%);
        transition: transform 1s ease-in;
    }

    .nav-active {
        transform: translateX(0%);
    }
 

И, наконец, вот JS-код, который у меня есть до сих пор:

 const navSlider = function() {
    const navBurger = document.querySelector('#nav-burger');
    const nav = document.querySelector('#nav-links');

    navBurger.addEventListener('click', function() {
            nav.classList.toggle('nav-active');
        });
}

navSlider();
 

Привет, потенциальные зрители вопроса, мне удалось решить свою собственную проблему. Похоже, что JS, необходимый для заполнения, немного изменился, и когда я внес эти изменения, я заставил скрипт работать:

 const navSlider = function() {
    const navBurger = document.querySelector('#nav-burger');
    let nav = document.querySelector('#nav-links');

    navBurger.addEventListener('click', function() {
            nav.classList.toggle('nav-active');

            document.getElementById('nav-links').style.transition = "transform 0.9s ease-in";

            if (nav.getAttribute('class') === 'nav-active') {
                nav.style.transform = 'translateX(0%)';
            } else {
                nav.style.transform = 'translateX(100%)';
            }
        });
}

navSlider();
 

Я наткнулся на это решение довольно случайно. Работая над некоторыми другими функциями для мобильного просмотра, я заметил, что когда я перешел с полноэкранного режима и уменьшил окно до чего-то близкого к мобильному представлению, параметры навигации появятся и исчезнут с экрана, как указано в свойствах translateX CSS внутри CSS вопроса. Это заставило меня задуматься о том, что делали свойства CSS, и как их на самом деле лучше разместить внутри JS. Несколько изменений позже, и у меня есть рабочий слайдер панели навигации для мобильного просмотра! Вот как выглядит соответствующий CSS сейчас:

     #nav-title a {
        flex: 1;
        text-align: center;
        line-height: 2.5;
    }

    #nav-links {
        display: flex;
        flex-direction: column;
        padding-left: 20%;
        justify-content: space-evenly;
        background-color: #404040;
        border: 1px solid #a1a9fe;
        position: absolute;
        top: 40px;
        height: 40vh;
        width: 100%;
        transform: translateX(100%);
    }