Click here to Skip to main content
15,868,016 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Does someone know why my navigation lists do not show when the sidebar is open? They are there but just not visible. 

Appreciate any help.


HTML FILE

<!DOCTYPE html><br />
<html><br />
  <head><br />
    <link rel="stylesheet" href="style.css"><br />
    <title>website name</title><br />
    <link rel="icon" href="ethernet.png"><br />
    <br />
  </head><br />
  <body><br />
    <nav><br />
      <div class="logo"><br />
        <h4>The NAV</h4><br />
      </div><br />
      <ul class="navigation"><br />
        <li><a href="index.html">Home</a></li><br />
        <li><a href="projects.html">Projects</a></li><br />
        <li><a href="programming.html">Programming</a></li><br />
        <li><a href="news.html">News</a></li><br />
        <li> <a href="about.html">About Me</a></li><br />
      </ul><br />
      <div class="burger"><br />
        <div class="line1"></div><br />
        <div class="line2"></div><br />
        <div class="line3"></div><br />
      </div><br />
    </nav><br />
<br />
    <script src="app.js"></script><br />
  </body><br />
<br />
  <footer><br />
<br />
  </footer><br />
</html>


CSS FILE

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

nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 8vh;
    background-color: #5DADE2;
    font-family: 'Poppins', sans-serif;
}

.logo {
    color: rgb(255, 255, 255);
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 20px;
}

.navigation {
    display: flex; 
    justify-content: space-around;
    width: 40%;
}

.navigation li {
    list-style: none;
}

.navigation a {
    color: rgb(255, 255, 255);
    text-decoration: none;
    letter-spacing: 3px;
    font-weight: bold;
    font-size: 14px;
}

.burger {
    display: none;
    cursor: pointer;
}

.burger div{
    width: 25px;
    height: 3px;
    background-color:rgb(256, 256, 256);
    margin: 5px;

}

@media screen and (max-width: 1024px) {
    .navigation {
        width: 60%;
    }
    
}

@media screen and (max-width: 768px) {
    body {
        overflow: hidden;
    }
    .navigation {
        position: absolute;
        right: 0px;
        height: 92vh;
        top: 8vh;
        background-color: #5DADE2;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 50%;
        transform: translateX(100%);
        transition: transform 0.5s ease-in;
    }
    .navigation li {
        opacity: 0;
    }
    .burger {
        display: block;
    }
    
}

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

@keyframes navLinkFade {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0px);
    }
}



JS FILE

const navSlide = () => {
    const burger = document.querySelector('.burger');
    const nav = document.querySelector('.navigation');
    const navLinks = document.querySelectorAll('.navigation li');

    burger.addEventListener('click', () => {
        nav.classList.toggle('nav-active');

        navLinks.forEach((link, index) => {
            if (link.style.animation) {
                link.style.animation = '';
            } else {
                link.style.animation = 'navLinkFade 0.5s ease forwards ${index / 7 + 2}';
            }
        });
    });

    
}

navSlide();


What I have tried:

In the CSS file, .navigation li sets the opacity to zero, but the Javascript function is supposed to have it fade in so I think the problem may be '${index / 7 + 2}'. It's detected as a string but shouldn't be, and I don't know how to fix it.
Posted
Comments
Chris Copeland 27-Jun-22 4:21am    
Are you aware that for this: link.style.animation = 'navLinkFade 0.5s ease forwards ${index / 7 + 2}'; you have to use the ` symbol as the text quotations if you want to use string interpolation? Ie: link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 2}`;. This could explain the error, can you change this and try again? Template literals (Template strings)[^]

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900