Beste mensen,

Ik ben al een uren aan het staren naar mijn javascript code maar ik krijg telkens hetzelfde probleem. Ik heb namelijk een navigatie bar die tevoorschijn komt als er op de drie streepjes wordt geklikt. Als ik dan op een link klik in de navigatie bar wordt ik er netjes heen gestuurd maar op de pagina komt de navigatie bar niet meer tevoorschijn als ik de site refresh doet hij het weer. Ik gebruik ook jQuery zou het hierdoor kunnen komen? Het volgende heb ik als javascript code:



console.clear();
const navSlide = () => {
    const burger = document.querySelector('.burger');
    const nav = document.querySelector('.nav-links');
    const navLinks = document.querySelectorAll('.nav-links li');
        
    burger.addEventListener('click', () => {
        //de nav laten zien
        nav.classList.toggle('nav-active');

        //de links laten zien met animatie
        navLinks.forEach((link, index) => {
            if(link.style.animation){
                link.style.animation = '';
            }else{
                link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
            }
        });

        //burger animatie
        burger.classList.toggle('toggle');
    });
}
navSlide();


De class "burger" is het menu met de drie streepjes, de class "toggle" zorgt ervoor dat de burger gaat animeren, de class nav-links zijn alle links in de navigatie balk.


,groetjes Sem
Je zult "ergens" bij moeten houden dat het menu zichtbaar was, en die situatie dan herstellen bij/na het laden van een pagina:
- in de sessionStorage (javascript) en dus onload van de pagina even kijken wat het was en herstellen (bij voorkeur zonder "slide animatie")
- in een cookie, dan kun je bij het genereren van de pagina (PHP) het menu al direct zichtbaar maken (= geen "geknipper" in de browser (eerst niet, dan wel zichtbaar).
- door on-the-fly een variabele aan de geklikte link toe te voegen ("?menu=true") en daarmee ook weer server-side direct je ding te doen.



Hi Rob, hoe kan ik in de sessionStorage bijhouden of het menu zichtbaar was? En hoezo bij voorkeur zonder slide animatie?

Javascript sessionStorage: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

Animatie is alleen leuk als iemand het op dat moment ook aanklikt ("kijk, daar komt ie!"). Bij het herstellen van de oude situatie (ala vorige pagina) wil je het gewoon "direct" (mijn voorkeur in ieder geval - ik wil niet elke keer als ik naar een volgende pagina ga al die "leuke animaties" weer uit moeten zitten).

(sowieso werk ik meestal "remote", dus dan zijn alle animaties frikkin irritant ivm "langzaam" ...).

Reageren