+- Javascript-forum (https://javascript-forum.de)
+-- Forum: Entwicklung (https://javascript-forum.de/forumdisplay.php?fid=4)
+--- Forum: Javascript (https://javascript-forum.de/forumdisplay.php?fid=6)
+--- Thema: Probleme mit Menü (/showthread.php?tid=258)
Probleme mit Menü - none - 09.10.2021
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;">≡</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
RE: Probleme mit Menü - admin - 10.10.2021
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.
RE: Probleme mit Menü - Gast - 11.10.2021
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
RE: Probleme mit Menü - Gast - 11.10.2021
...mit folgendem Code konnte ich das Problem selbst lösen:
document.querySelectorAll("nav li a").forEach(function (ele) { ele.addEventListener("click", closeNav) });