CODEWITHSUNDEEP
javascripthtmlcss
LNinja
LNinja

Reputation: 45

Close navigation when navigation item is clicked

My goal is for my hamburger menu to close when an item is clicked inside of it. As of right now, the menu only uses html and css.

The difference between this nav bar and others is that mine is created from a input checkbox html element, what i need is for my checkbox to uncheck when a link is clicked inside of the hamburger. This should close the entire menu just like it would if i clicked on the hamburger. Also, could you explain what and why the javascript does what it does, i don't have much experience with javascript, thanks. :)

I also made the checkbox visible just so that we can have a better understanding of whats going on.

My CSS: 

/* navigation menu */
.nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  line-height: 70px;
  text-align: right;
  z-index: 10000;
  background-color: #ffffff;
  border-bottom: 1px solid #eaeaeb;

}

.menu {
  margin: 0 30px 0 0;
}

/* link items */
.menu a {
  clear: right;
  line-height: 70px;
  text-decoration: none;
  margin: 0 10px;
  text-align: center;
  color: #33334d;
  background-color: #ffffff;
}

.menu a:hover {
  background-color: #c2c2d6;
}

/* hamburger properties */
label {
  float: right;
  display: none;
  width: 26px;
  line-height: 70px;
  margin: 0 40px 0 0;
  font-size: 36px;
}

/* checkbox */
#toggle {
}

@media only screen and (max-width: 1075px) {

/* hamburger properties */
  label {
    display: block;
    cursor: pointer;
  }

/* nav menu properties */
  .menu {
    width: 100%;
    display: none;
    text-align: center;
  }

/* link items */
  .menu a {
    display: block;
    margin: 0px;
    border-bottom: 1px solid #eaeaeb;
  }

/* makes links show when checkbox is checked */
  #toggle:checked + .menu {
    display: block;
  }
}


My HTML:
  <div class="nav">
      <label for="toggle">&#9776;</label>
      <input type="checkbox" id="toggle"/>
      <div class="menu">
        <a href="#">example</a>
        <a href="#">example</a>
        <a href="#">example</a>
        <a href="#">example</a>
        <a href="#">example</a>
        <a href="#">example</a>
        <a href="#">example</a>
      </div>
    </div>

Upvotes: 1

Views: 857

Answers (2)

Martin Homola
Martin Homola

Reputation: 245

Wow, interesting. It's a pretty weird practise, what you have, but it could work. You can make menu show/hide by input checked. Very interesting. I have never think of like that.

But also you will need a piece of JS code.

By CSS you can handle some basic selector like :hover, :focus, :active etc. In our your case you also make some interesting click event. But checkbox is not for that purpose.

Click and other event are handled by JS (more https://www.w3schools.com/js/js_events.asp).

So in our case, we select all links:

var links = document.querySelectorAll('.menu a');

then we have to add click event to every link, which will set our input to checked="false" = close menu.

This JS code will only work, when selected links are rendered, so you need to put this piece of code to the end of your html file before </body> or use window.onload...

var links = document.querySelectorAll('.menu a');
var linksLength = links.length

for(var i = 0; i < linksLength; i++) {
  links[i].addEventListener('click', function() {
    document.getElementById('toggle').checked = false;
  });
}
/* navigation menu */
.nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  line-height: 70px;
  text-align: right;
  z-index: 10000;
  background-color: #ffffff;
  border-bottom: 1px solid #eaeaeb;

}

.menu {
  margin: 0 30px 0 0;
}

/* link items */
.menu a {
  clear: right;
  line-height: 70px;
  text-decoration: none;
  margin: 0 10px;
  text-align: center;
  color: #33334d;
  background-color: #ffffff;
}

.menu a:hover {
  background-color: #c2c2d6;
}

/* hamburger properties */
label {
  float: right;
  display: none;
  width: 26px;
  line-height: 70px;
  margin: 0 40px 0 0;
  font-size: 36px;
}

/* checkbox */
#toggle {
}

@media only screen and (max-width: 1075px) {

/* hamburger properties */
  label {
    display: block;
    cursor: pointer;
  }

/* nav menu properties */
  .menu {
    width: 100%;
    display: none;
    text-align: center;
  }

/* link items */
  .menu a {
    display: block;
    margin: 0px;
    border-bottom: 1px solid #eaeaeb;
  }

/* makes links show when checkbox is checked */
  #toggle {
    display: none;
  }
  #toggle:checked + .menu {
    display: block;
  }
}
<label class="nav" for="toggle">
  <div class="icon">&#9776;</div>
  <input type="checkbox" id="toggle"/>
  <div class="menu">
    <a href="#">example</a>
    <a href="#">example</a>
    <a href="#">example</a>
    <a href="#">example</a>
    <a href="#">example</a>
    <a href="#">example</a>
    <a href="#">example</a>
  </div>
</label>

Upvotes: 0

Jon P
Jon P

Reputation: 19772

Javscript may not actually be required, depending on your needs.

If you give the div containing your nav links an ID you can target this with an a tag setting the href to the ID. Then you can use the :target selector to change the visibility of our navigation div.

/* navigation menu */

.nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  line-height: 70px;
  text-align: right;
  z-index: 10000;
  background-color: #ffffff;
  border-bottom: 1px solid #eaeaeb;
}

.menu {
  margin: 0 30px 0 0;
}


/* link items */

.menu a {
  clear: right;
  line-height: 70px;
  text-decoration: none;
  margin: 0 10px;
  text-align: center;
  color: #33334d;
  background-color: #ffffff;
}

.toggle {
  text-decoration: none;
  color: #33334d;
}

.menu a:hover {
  background-color: #c2c2d6;
}


/* hamburger properties */

.toggle,
label {
  float: right;
  display: none;
  width: 26px;
  line-height: 70px;
  margin: 0 40px 0 0;
  font-size: 36px;
}


/* checkbox */

#toggle {}

@media only screen and (max-width: 1075px) {
  /* hamburger properties */
  .toggle,
  label {
    display: block;
    cursor: pointer;
  }
  /* nav menu properties */
  .menu {
    width: 100%;
    display: none;
    text-align: center;
  }
  /* link items */
  .menu a {
    display: block;
    margin: 0px;
    border-bottom: 1px solid #eaeaeb;
  }
  /* makes links show when checkbox is checked */
  #menu:target,
  #toggle:checked+.menu {
    display: block;
  }
}
<div class="nav">
  <a class="toggle" href="#menu">&#9776;</a>

  <div class="menu" id="menu">
    <a href="#">example</a>
    <a href="#">example</a>
    <a href="#">example</a>
    <a href="#">example</a>
    <a href="#">example</a>
    <a href="#">example</a>
    <a href="#">example</a>
  </div>
</div>

Upvotes: 2

Related Questions