Проблема с отображением ссылок при повторном открытии адаптивной навигации - PullRequest
Новая
       5

Проблема с отображением ссылок при повторном открытии адаптивной навигации

0 голосов
/ 09 марта 2020

Я пытаюсь создать адаптивный веб-сайт для портфолио, и мне удалось скрыть навигацию и отобразить ее с помощью addEventListener javascript. Я также смог заставить навигацию исчезнуть при нажатии на любую ссылку в навигации. И теперь проблема, с которой я сталкиваюсь, заключается в том, что, когда я нажимаю на ссылку, чтобы перейти к другому разделу страницы, навигация закрывается, но когда я нажимаю на значок меню гамбургера, чтобы снова открыть навигацию, ссылки не появляются Я новичок в веб-разработке, и я не изучал javascript. Я посмотрел учебное пособие по созданию адаптивной навигации и решил внедрить ее в свой проект. Ниже приведен код, который я написал для HTML, CSS и JavaScript.

HTML

<nav class="nav-bar">
        <ul class="nav-links">
            <li><a href="#about">About</a></li>
            <li><a href="#passion">Passion</a></li>
            <li><a href="#experience">Experience</a></li>
            <li><a href="#projects">Projects</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
        <div class="menu-bar">
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
        </div>
    </nav>

CSS

body {
    overflow-x: hidden;
}

.menu-bar {
    display:block;
    margin: 0 15px;
}

.menu-bar div {
    width: 25px;
    height: 2px;
    background-color: cyan;
    margin: 5px;
}

.nav-links {
    position: absolute;
    right: 0;
    top: 12vh;
    height: 100vh;
    background: rgba(0,0,0,0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    transform: translateX(100%);
    transition: transform .5s ease-in;
}

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

JavaScript

const navSlider = () => {
    const menu = document.querySelector('.menu-bar');
    const nav = document.querySelector('.nav-links');

    menu.addEventListener('click',()=>{
        // menu toggler
        nav.classList.toggle('nav-active');
    });

}

navSlider();

Как я уже говорил, я новичок в JavaScript. Заранее благодарим за помощь.

...