Как при нажатии на якорную ссылку закрывать меню?

Question

[LastGeneral]

<header>
  <input type="checkbox" name="menuToggler" id="menuToggler" class="invisible"/>
<div id="labelContainer">
  <p class="menuState" id="open">MENU</p>
  <p class="menuState" id="close">CLOSE</p>
  <label id="menuTogglerLabel" for="menuToggler">
    <div id="mainMenuTogglerSystem">
      <div class="rowToggle" id="firstRow">
        <div class="pixel cross" id="one"></div>
        <div class="pixel move" id="two"></div>
        <div class="pixel cross" id="three"></div>
      </div>
      <div class="rowToggle" id="midRow">
        <div class="pixel move" id="four"></div>
        <div class="pixel cross" id="five"></div>
        <div class="pixel move" id="six"></div>
      </div>
      <div class="rowToggle" id="lastRow">
        <div class="pixel cross" id="seven"></div>
        <div class="pixel move" id="eight"></div>
        <div class="pixel cross" id="nine"></div>
      </div>
    </div>
  </label>
</div>
<nav class="navigationContainer">
  <a href="#contacts" id="desc">CLICK HERE</a>
</nav>
</header>
<div class="bodyMain">
  <p id="desc">MAIN BODY</p>
</div>
<div class="bodySection">
  <p id="desc">MAIN BODY</p>
</div>
<div id="contacts"></div>

@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:500&display=swap');

body {
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  background-color: #000000;
  color: #404040;
  font-family: 'Roboto Mono', monospace;
}
header {
    position: fixed;
    top: 0;
}
.invisible {
  position: fixed;
  visibility: hidden;
}

.menuState {
  z-index: 999;
  position: fixed;
  right: 100px;
  margin: 38px 0px 0px 0px;
  color: #FFFFFF;
  transition-property: all;
  transition-duration: 0.5s;
}

#close {
  opacity: 0;
}

#labelContainer, #menuTogglerLabel, #mainMenuTogglerSystem {
  z-index: 999;
  cursor: pointer;
}

#mainMenuTogglerSystem {
  margin: 20px 20px 0px 0px;
  right: 0;
  position: fixed;
  display: grid;
  padding: 20px 20px 20px 20px;
  border-width: 1px;
  border-style: solid;
  border-radius: 100%;
  border-color: #FFFFFF;
  transition-property: all;
  transition-duration: 0.5s;
}

.rowToggle {
  display: inline-flex;
}

.pixel {
  margin: 0px 3px 3px 0px;
  width: 3px;
  height: 3px;
  background-color: #FFFFFF;
  transition-property: all;
  transition-duration: 0.5s;
}

#three, #six {
  margin: 0px 0px 3px 0px;
}

#seven, #eight {
  margin: 0px 3px 0px 0px;
}

#nine {
  margin: 0px 0px 0px 0px;
}

.navigationContainer {
  z-index: 998;
  position: fixed;
  top: -100%;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: #101010;
  transition-prerty: all;
  transition-duration: 1.25s;
  transition-timing-function: cubic-bezier(1, 0, 0.25, 1);
}

.bodyMain, .bodySection {
  width: 100%;
  height: 100vh;
  transition-prerty: all;
  transition-duration: 0.5s;
  transition-delay: 0.25s;
  transition-timing-function: cubic-bezier(1, 0, 0.3, 0.995)
}

#desc {
  padding: 0px;
  width: 100%;
  height: 30px;
  margin: 45vh 0px 45vh 0px;
  font-size: 10vh;
  text-align: center;
}

#labelContainer:hover > #menuTogglerLabel #mainMenuTogglerSystem .rowToggle #one {
  opacity: 0;
  transform: translate(6px, 6px);
  margin: 3px 0px 0px 3px;
}

#labelContainer:hover > #menuTogglerLabel #mainMenuTogglerSystem .rowToggle #two {
  opacity: 0;
  transform: translate(0px, 6px);
  margin: 3px 0px 0px 0px;
}

#labelContainer:hover > #menuTogglerLabel #mainMenuTogglerSystem .rowToggle #three {
  opacity: 0;
  transform: translate(-6px, 6px);
  margin: 3px 3px 0px 0px;
}

#labelContainer:hover > #menuTogglerLabel #mainMenuTogglerSystem .rowToggle #four {
  opacity: 0;
  transform: translate(6px, 0px);
  margin: 0px 0px 0px 3px;
}

#labelContainer:hover > #menuTogglerLabel #mainMenuTogglerSystem .rowToggle #five {
  margin: 0px 0px 0px 0px;
}

#labelContainer:hover > #menuTogglerLabel #mainMenuTogglerSystem .rowToggle #six {
  opacity: 0;
  transform: translate(-6px, 0px);
  margin: 0px 3px 0px 0px;
}

#labelContainer:hover > #menuTogglerLabel #mainMenuTogglerSystem .rowToggle #seven {
  opacity: 0;
  transform: translate(6px, -6px);
  margin: 0px 0px 3px 3px;
}

#labelContainer:hover > #menuTogglerLabel #mainMenuTogglerSystem .rowToggle #eight {
  opacity: 0;
  transform: translate(0px, -6px);
  margin: 0px 0px 3px 0px;
}

#labelContainer:hover > #menuTogglerLabel #mainMenuTogglerSystem .rowToggle #nine {
  opacity: 0;
  transform: translate(-6px, -6px);
  margin: 0px 3px 3px 0px;
}

#menuToggler:checked + #labelContainer #menuTogglerLabel #mainMenuTogglerSystem .rowToggle .move {
  opacity: 0;
}

#menuToggler:checked + #labelContainer #menuTogglerLabel #mainMenuTogglerSystem .rowToggle .cross {
  background-color: #000000;
}

#menuToggler:checked + #labelContainer #menuTogglerLabel #mainMenuTogglerSystem {
  border-style: none;
  background-color: #FFFFFF;
}

#menuToggler:checked ~ .navigationContainer {
  top: 0;
}

#menuToggler:checked ~ .bodyMain {
  opacity: 0;
}

#menuToggler:checked + #labelContainer #open {
  opacity: 0;
}

#menuToggler:checked + #labelContainer #close {
  opacity: 1;
}

Comments

[budda674]

ну например повесить обработчик на ссылку и по этому эвенту давать класс для меню которое будет его закрывать

[Антон Литвиненко]

меню сделанное через чекбокс - баловство

[Trash]

<a href="#contacts" id="desc" onclick="document.getElementById('menuToggler').click();">CLICK HERE</a>

Использование тильды в данном случае - неправильно. Использование чекбокса в данном случае - некорректно. Делайте через js такие вещи.