Javascript-forum

Hallo Ihr Wissenden,

leider sind meine JavaScript-Kenntnisse = 0.

Habe folgendes Problem:

Ich möchte, dass sich das Menu nach einem Klick auf einen Link automatisch schließt. Die Seite ist als OneSidePage angelegt.

Code:
<!-----------------------_MENU_NEW_---------------------------------------->

<nav class="site-nav">

    </summary>

  <ul>

        <li><a href="#UE">Über mich</a></li>

        <li><a href="#Leistungen">Leistungen</a></li>

        <li><a href="#Kurse">Kurse</a></li>

        <li><a href="#Kontakt">Kontakt</a></li>

        <li><a href="#Recht"><strong>§</strong> Rechtliche Hinweise</a></li>

  </ul>

    </summary>

</nav>

    <div id="full-screen-menu-toggle" style=" font-size: 1.5em;">&Congruent;</div>

<script> 

  // Quelle: http://johnm.io/project/hamburgler/

  document.getElementById('full-screen-menu-toggle').addEventListener('click', checkNav);

  window.addEventListener("keyup", function(e) {

    if (e.keyCode == 27) closeNav();

  }, false);

  function checkNav() {

    if (document.body.classList.contains('full-screen-menu-active')) {

      closeNav();

    } else {

      openNav();

    }

  }

  function closeNav() {

    document.body.classList.remove('full-screen-menu-active');

  }

  function openNav() {

    document.body.classList.add('full-screen-menu-active');

  }

</script>

Könnt Ihr mir bitte helfen?
Vielen Dank für Eure Hilfe im Voraus...
none

Kannst du mir mal in Codepen kopieren?
Mit CSS und was dazugehört.
Dann kann man das besser sehen.
Oder den kompletten Code hier posten.

Aber gehen tut das .
Man muss auf alle a Elemente ein Event registrieren und wenn es geklickt wurde gibt man das Menü die Klasse, die man erstellt, hat, wenn das Menü geschlossen ist.
Deswegen wäre der kompletten Code gut , damit ich den gleich so erstellen kann das er bei dir auch funktioniert.

Hallo Admin,

vielen Dank für Deine Antwort! In Codepen kopieren, keine Ahnung wie das geht, sorry!

Hier kommt noch der CSS-Code:

#full-screen-menu-toggle {
z-index: 200;
position: fixed;
padding: 0.25em 0.5em;
top:1em;
right:1em;
background: rgba(0,6,22, 0.75);
color: #FFFFFF;
font-weight: 400;
}

.full-screen-menu-active #full-screen-menu-toggle {
background:red;
}

.site-nav {
transition: all 0.4s ease;
opacity: 0;
pointer-events: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 6, 22, 0.85);
z-index:100;
width: 320px;
height: 333px;
}

.full-screen-menu-active .site-nav {
opacity: 1;
pointer-events: initial;
}

.site-nav ul {
display: block;
transition: all 0.3s ease;
padding: 0;
list-style-type: none!important;
position: absolute;
top: 55%;
left: 50%;
transform: translate(-50%, -50%) scale(1.3);
margin: 0px!important;
padding: 0px!important;
color: #FFFFFF;
font-weight: 400!important;
}

.site-nav ul li {
list-style-type: none;
margin-bottom: 0.5em;
line-height: 1.25em;
letter-spacing: 0.1em;
}

.site-nav ul li:hover {
background-color: rgba(255,255,255, .125);
}

.site-nav a {
color:white;
text-decoration: none;
display: block;
padding:.5em;
}

.full-screen-menu-active .site-nav ul {
transform: translate(-50%, -50%) scale(0.9)
}

/*############*/

Viel mehr Code gibt es nicht, weil ich das Menü erstmal auf eine leeren HTML-Seite teste...

VG
none

...mit folgendem Code konnte ich das Problem selbst lösen:

document.querySelectorAll("nav li a").forEach(function (ele) { ele.addEventListener("click", closeNav) });

none

admin

Gast

Gast