Click here to Skip to main content
15,867,568 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)

  Print Answers RSS
Top Experts
Last 24hrsThis month


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