How do I close this checkbox menu after the user clicks on the links or outside of the menu?

user_12150898 0
Viewed 610

I need to know how do I close this menu back up after the user clicks on a link or outside of it. My guess right now is that the best way would be to just uncheck the checkbox using js or jquery when the user clicks on a link or outside the menu background area, but I don't know much about javascript so I don't know how to do that lol. Code:

#mobilemenu {
  position: fixed;
  background-color: red;
  background-size: cover;
  top: 0px;
  right: -50%;
  height: 100%;
  width: 50%;
  z-index: 0;
  transition: .5s;
}

#mobilemenu ul {
  text-align: right;
  margin-right: .5em;
  margin-top: 3em;
  list-style-type: none;
  font-size: 1.25em;
}

#menuicon {
  position: fixed;
  z-index: 4;
  right: 9px;
  margin-top: 15px;
}

#menuicon i {
  cursor: pointer;
  background-color: white;
  font-size: 12pt;
  padding: 3px;
  font-weight: bold;
  color: black;
}

input[type="checkbox"]:checked~#mobilemenu {
  transform: translateX(-100%);
}

input {
  display: none;
}
<input type="checkbox" id="myInput">
<label for="myInput">
          <nav id="menuicon">
            <i>Menu</i>
        </nav>
      </label>
<aside id="mobilemenu">
  <ul>
    <li>
      <a href="#">Link1</a>
    </li>
    <li>
      <a href="#">Link2</a>
    </li>
    <li>
      <a href="#">Link3</a>
    </li>
    <li>
      <a href="#">Link4</a>
    </li>
  </ul>
</aside>

css html jquery javascript
1 Answers

Since jQuery is evil you can use vanilla JS.
Define checkbox and icon: 

var checkbox = document.querySelector( '#myInput' );
var icon = document.querySelector( '#menuicon i' );

Then add an event listener to your checkbox. If checkbox is checked, add an event listener to the document:

checkbox.addEventListener( 'click', function(){
  if( this.checked ) {
    document.addEventListener( 'click', listener );
  } 
});

Set checked property to false if you click on any element except the menu button. And remove event listener from document since we don't need it until menu will be opened again:

var listener = function( e ) {
  if( e.target != checkbox && e.target != icon ) {
    checkbox.checked = false;
    document.removeEventListener( 'click', listener );
  }
};

the final code: 

var checkbox = document.querySelector( '#myInput' );
var icon = document.querySelector( '#menuicon i' );
var listener = function( e ) {
  if( e.target != checkbox && e.target != icon ) {
    checkbox.checked = false;
    document.removeEventListener( 'click', listener );
  }
};

checkbox.addEventListener( 'click', function(){
  if( this.checked ) {
    document.addEventListener( 'click', listener );
  } 
});
#mobilemenu {position: fixed;
background-color: red;
  background-size: cover;
  top: 0px;
  right:-50%;
  height: 100%;
  width:50%;
  z-index: 0;
    transition: .5s;
}
#mobilemenu ul {
  text-align: right;
  margin-right: .5em;
  margin-top: 3em;
  list-style-type: none;
  font-size:1.25em;
}
#menuicon{position: fixed;
  z-index: 4;
  right: 9px;
  margin-top:15px;
}
#menuicon i {
  cursor: pointer;
background-color: white;
font-size: 12pt;
padding:3px;
  font-weight: bold;
  color: black;
}
input[type="checkbox"]:checked ~ #mobilemenu{
  transform: translateX(-100%);
}
input{
  display:none;
}
<input type="checkbox" id="myInput">
<label for="myInput">
  <nav id="menuicon">
    <i>Menu</i>
  </nav>
</label>
<aside id="mobilemenu">
  <ul>
    <li>
      <a href="#">Link1</a>
    </li>
    <li>
      <a href="#">Link2</a>
    </li>
    <li>
      <a href="#">Link3</a>
    </li>
    <li>
      <a href="#">Link4</a>
    </li>
  </ul>
</aside>

user_63648290
Related