Как закрыть это меню флажков после того, как пользователь нажимает на ссылки или за пределами меню?

Question

Мне нужно знать, как закрыть это меню после того, как пользователь нажмет на ссылку или за ее пределами. Сейчас я думаю, что лучшим способом было бы просто снять флажок с помощью js или jquery, когда пользователь нажимает на ссылку или находится за пределами области фона меню, но я не очень разбираюсь в javascript, поэтому не знаю, каксделать это, лол. Код:

#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>

Answer 1

Поскольку jQuery - зло, вы можете использовать vanilla JS.
Определить флажок и значок:

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

Затем добавить прослушиватель событий в свой флажок. Если флажок установлен, добавьте прослушиватель событий в документ:

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

Установите для свойства selected значение false, если вы щелкнете по любому элементу, кроме кнопки меню. И удалите прослушиватель событий из документа, поскольку он нам не нужен, пока меню не откроется снова:

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

окончательный код:

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>