Automatyczne zamykanie menu w wersji mobilnej

Cześć,
jesli temat był przepraszam, proszę o wskazanie i zamknięcie tego.
Nie znam jezyka javascript, dlatego do stworzenia responsywwnego menu uzyłem gotowca z W3SChool.
Wszystko działa, ale chciałbym osiągnąć taki efekt, że w mobilu, przy kliknięciu na dowolna zakładkę menu się automatycznie zamyka (teraz sam muszę kliknąć X).
Problemu oczywiście nie ma jeśli przechodzi na inną zakładkę, ale ja użyłem kotwic linkujących na tą samą stronę (home) i tu już się nie zamyka.
Czy ktoś podpowie mi co muszę dopisać do kodu, żeby tak było?
Dzięki.

KOD:

html:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

CSS:

 /* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
} 

CSS(mobile):

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

JS:

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

Masz funkcję javascript, która zmienia stan menu (zwiń/rozwiń).
Masz nawet gotowe wywołanie - jest jakiś element, który ją odpala po kliknięciu.
Jedyne, czego Ci potrzeba, to takie samo wywołanie dodać do pozostałych linków w menu.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav" id="myTopnav">
  <a href="#home" class="active" onclick="myFunction()">Home</a>
  <a href="#news" onclick="myFunction()">News</a>
  <a href="#contact" onclick="myFunction()">Contact</a>
  <a href="#about" onclick="myFunction()">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

Fac napisał(a):

Masz funkcję javascript, która zmienia stan menu (zwiń/rozwiń).
Masz nawet gotowe wywołanie - jest jakiś element, który ją odpala po kliknięciu.
Jedyne, czego Ci potrzeba, to takie samo wywołanie dodać do pozostałych linków w menu.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav" id="myTopnav">
  <a href="#home" class="active" onclick="myFunction()">Home</a>
  <a href="#news" onclick="myFunction()">News</a>
  <a href="#contact" onclick="myFunction()">Contact</a>
  <a href="#about" onclick="myFunction()">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

Dzięki wielkie

IMO,
Chyba bez onclick="myFunction()" dla

<a href="#home" class="active" onclick="myFunction()">Home</a>

bo wtedy Home otwiera i zamyka menu jak

<a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
</a>

Można też użyć mechanizm Even Delegation,classList.toggle i triku z <a href="#void">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="topnav" onclick="menuToggle(event)">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="#void" class="icon">
    <i class="fa fa-bars"></i>
  </a>
</div>

function menuToggle(e) {
  if (e.target.matches('[href="#home"]')) return;
  e.currentTarget.classList.toggle('responsive');
}

VBService napisał(a):

Dzieki. Docelowo Home będzie logiem, więc tak lepiej.

migdal napisał(a):
Dzieki. Docelowo Home będzie logiem, więc tak lepiej.

jeżeli tak, a użyjesz:

function menuToggle(e) {
  if (e.target.matches('[href="#home"]')) return;
  e.currentTarget.classList.toggle('responsive');
}

to na logo użyj np.: class="logo" i zmień matches na .logo

function menuToggle(e) {
  if (e.target.matches('.logo')) return;
  e.currentTarget.classList.toggle('responsive');
}

chyba, że użyjesz zapisu:

<div class="topnav" onclick="menuToggle(event)">
  <a href="#home" class="active">
    <img src="twoje.logo">
  </a>
  ...
</div>

to zmień na np.:

function menuToggle(e) {
  if (e.target.matches('[href="#home"], img')) return;
  e.currentTarget.classList.toggle('responsive');
}

Witajcie,
jeszcze jeden przykład z menu i ta samo pytanie. Jak tutaj napisac script i co ewentualnie dodać do html, żeby menu w wersji mobilnej zamykało się po kliknięciu w zakładkę (z kotwicami na tej samej stronie)?

html:

< ul class="nav-bar">
< li class="logo"></li>
<input type="checkbox" id="check">

Cześć</li>

Portfolio</li>
Kontakt</li>
<label for="check" class="close-menu"></label>

<label for="check" class="open-menu"></label>
</ul>

css:
.nav-bar {
width: 100%;
display: flex;
justify-content:flex-end;
align-items: center;
list-style: none;
position: sticky;
top: 0;
background-color: var(--color2);
padding: 46px 100px 46px 100px;
padding-right: min500px;
height: 50px;
z-index: 1;
font-size: 26px;
font-family: anton;
}
.logo img {width: 100%;
padding-right: 20px;}
.menu {display: flex;}
.menu li {padding-left: 80px;}
.menu li a {
display: inline-block;
text-decoration: none;
color: var(--color1);
text-align: center;
transition: 0.15s ease-in-out;
position: relative;
text-transform: uppercase;
}
.menu li a::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 1px;
background-color: var(--color1);
transition: 0.15s ease-in-out;
}
.menu li a:hover:after {width: 100%;}
.open-menu , .close-menu {
position: absolute;
color: var(--color1);
cursor: pointer;
font-size: 1.5rem;
display: none;
}
.open-menu {
top: 50%;
right: 20px;
transform: translateY(-50%);
}
.close-menu {
top: 20px;
right: 20px;
}
#check {display: none;}

css mobilne:

.menu {
flex-direction: column;
align-items: center;
justify-content: center;
width: 60%;
height: 100vh;
position: fixed;
top: 0;
right: -100%;
z-index: 100;
background-color: var(--color2);
transition: all 0.2s ease-in-out;
}
.logo img {width: 100%;
display: none;}
.menu li {margin-top: 40px;}
.menu li a {padding: 10px;}
.open-menu , .close-menu {display: block;}
#check:checked ~ .menu {right: 0; top: 20;}