close dropdown menu after click on link

Question

I have a dropdown menu which is almost complete with just 1 bug/issue that I can't figure out. My nav links to different areas on the home page. So on the home page the user can click a nav link which would instantly take them down to the desired location on the page.

My issue comes as the user clicks on the nav link they are brought to the location but the dropdown menu will not close.

Next to this I also want to animate my menu from top to bottom, so it looks more elegant. I tried lots of things but I can't seem to make it work.. Hopefully you can help me out!

 .toggle, [id^=drop] { display: none; } nav { margin:0; padding: 0; float: center; position: absolute; z-index: 400; border: solid 0px; } nav ul { float: center; position: relative; width: 100vw; }.menu{ background: rgb(233, 233, 233); background: linear-gradient(90deg, rgba(233, 233, 233,0.9) 40%, rgb(255, 101, 207) 99%); background: -webkit-linear-gradient(90deg, rgba(233, 233, 233,0.9) 40%, rgb(255, 101, 207) 99%); } nav ul li { text-align: center; position: relative; margin: 0px; display:left; } nav a { font-family: 'OggR'; color: black; font-size:14px; text-decoration:none; position: relative; text-align: center; transition: 0.3s; }.toggle + a, .menu { display: none; }.toggle { position: fixed; display: block; padding:4px 20px; color: rgb(233, 233, 233); font-size:20px; text-decoration:none; width: 20px; height: 30px; z-index: 9999999999999999999; }

 <nav> <label for="drop" class="toggle">&#x2630;</label> <input type="checkbox" id="drop" /> <ul class="menu"> <li> <li><a href="#abstract">ABSTRACT</a></li> <li><a href="#introduction">INTRODUCTION</a></li> <li><a href="#chapterI">I. <br>THE MEANING OF NOSTALGIA IN CULTURAL HISTORY</a></li> <li><a href="#chapterII">II. <br>CONTEMPORARY NOSTALGIA</a></li> <li><a href="#chapterIII">III. <br>THE TWO FACES OF NOSTALGIA</a></li> <li><a href="#conclusion">CONCLUSION</a></li> <li><a href="#bibliography">BIBLIOGRAPHY</a></li> </ul> </nav>

Answer 1

html. i added ids:

<nav>
      <label for="drop" class="toggle" id="toggle">&#x2630;</label>
      <input type="checkbox" id="drop" />
          <ul class="menu" id="menu">
              <li>
              <li><a class="navLink" href="#abstract">ABSTRACT</a></li>
              <li><a class="navLink" href="#introduction">INTRODUCTION</a></li>
              <li><a class="navLink" href="#chapterI">I. <br>THE MEANING OF NOSTALGIA IN CULTURAL HISTORY</a></li>
              <li><a class="navLink" href="#chapterII">II. <br>CONTEMPORARY NOSTALGIA</a></li>
              <li><a class="navLink" href="#chapterIII">III. <br>THE TWO FACES OF NOSTALGIA</a></li>
              <li><a class="navLink" href="#conclusion">CONCLUSION</a></li>
              <li><a class="navLink" href="#bibliography">BIBLIOGRAPHY</a></li>
          </ul>
    </nav>

css: i gave menu postion absolute and i added top: -100% to make it "dissapear", i deleted the position of nav, i added class.menu.open to handle the open, i added transition to.menu for the animation.

.toggle,
[id^=drop] {
    display: none;
}

nav {
    margin:0;
    padding: 0;
  float: center;
  z-index: 400;
  border: solid 0px;
}

nav ul {
float: center;
    position: relative;
  width: 100vw;
    }
.menu{
  position:absolute;
  top:-100%;
  background: rgb(233, 233, 233);
  background: linear-gradient(90deg, rgba(233, 233, 233,0.9) 40%, rgb(255, 101, 207) 99%);
  background: -webkit-linear-gradient(90deg, rgba(233, 233, 233,0.9) 40%, rgb(255, 101, 207) 99%);
  transition: 0.3s ease-in;
}
.menu.open{
  top:30px;
}
nav ul li {
  text-align: center;
  position: relative;
    margin: 0px;
    display:left;
    }

nav a {
  font-family: 'OggR';
    color: black;
    font-size:14px;
    text-decoration:none;
  position: relative;
  text-align: center;
  transition: 0.3s;
}

    

    .toggle {
      cursor:pointer;
    position: fixed;
        display: block;
        padding:4px 20px;
        color:black;
        font-size:20px;
        text-decoration:none;
    width: 20px;
    height: 30px;
    z-index: 9999999999999999999;
    }

and this is the js:

//adding the click event to the toggle
let menu = document.getElementById('menu')
let toggle = document.getElementById('toggle')
let links = document.getElementsByClassName('link')

for(let i = 0; i < links.length; i++){
  links[i].addEventListener('click', () => {
    menu.classList.remove('open')
    toggle.innerHTML = '&#x2630'
  })
}


document.getElementById('toggle').addEventListener('click', () => {
  
  if(menu.classList.contains('open')){
    menu.classList.remove('open')
    toggle.innerHTML = '&#x2630'
  } else {
    menu.classList.add('open')
    toggle.innerHTML = 'X'
  }
})

Edit: I added class to the and i loop through them and give event on click to each link so when you click it will close the nav.

check the code pen now https://codepen.io/Elnatan/pen/PoGyXwx you can see it here

---

To be able to implement it in your page:

1. add to each <a class="navLink"> (check the HTML above)
2. add id to manu element and to toggle element <ul class="menu" id="menu"> and <label for="drop" class="toggle" id="toggle">&#x2630;</label>
3. add to your css .menu.open {display:block}
4. create navHandler.js file and add it to your HTML ``` 5.copy this code and past it in your navHandler.js file:

let menu = document.getElementById('menu')
let toggle = document.getElementById('toggle')
let links = document.getElementsByClassName('navLink')

for(let i = 0; i < links.length; i++){
  links[i].addEventListener('click', () => {
    menu.classList.remove('open')
  })
}

if you follow the steps correctly it should work

Answer 2

There is no need for javascript, just add this to your css:

#drop:checked + .menu {
  display: block;
}

Codepen: https://codepen.io/manaskhandelwal1/pen/poExqJv