Hallo Ihr Wissenden,
ich hab mal wieder ein "großes" Problem.
Ich habe in eine Webseite ein Menü eingebaut und es funktioniert fast wie gewollt. Mein Ziel wäre es, wenn ich auf einen Link im Menü geklickt habe, dass es sich dann automatisch wieder schließt.
Hier der Code:
CSS
/*################_MENU_NEW_###################*/
#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: 181px;
height: 272px;
}
.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: 60%;
left: 50%;
transform: translate(-50%, -50%) scale(1.3);
margin: 0px!important;
padding: 0px!important;
color: #FFFFFF;
font-weight: 400!important;
}
.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)
}
/*############*/
<nav class="site-nav">
<ul>
<li style="list-style-type: none; margin-bottom: 3px; line-height: 1em;"><a href="#UE">▪ Über mich</a></li>
<li style="list-style-type: none; margin-bottom: 3px; line-height: 1em;"><a href="#Leistungen">▪ Leistungen</a></li>
<li style="list-style-type: none; margin-bottom: 3px; line-height: 1em;"><a href="#Kurse">▪ Kurse</a></li>
<li style="list-style-type: none; margin-bottom: 3px; line-height: 1em;"><a href="#Kontakt">▪ Kontakt</a></li>
<li style="list-style-type: none; margin-bottom: 3px; line-height: 1em;"><a href="#Recht">▪ Rechtliche Hinweise</a></li>
</ul>
</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>
Alles anzeigen
Hat jemand ein Idee? Ich bin am Ende und weiß leider nicht weiter...
Vielen Dank im Voraus für Eure Hilfe!
LG
none