Navigation auf mobilen Geräten ein- und ausklappen

[oxo888oxo]

Hier noch ein JavaSCript das ohne jQuery funktioniert, da du dieses ja nicht wolltest. Das Script kommt nicht von mir, funktioniert aber 100%

Ja großartig.
Das funktioniert ja wirklich sehr sehr gut.
Sogar auf meinem lahmen Smartphone fluppt das :)

Du hattest ja in Deinem HTML-Code die Navigation in <div>...</div> gepackt:
<div id="navigation">

Ich habe das inzwischen so umgebaut, dass ich stattdessen <nav>...</nav> verwende.
Bisher habe ich das auch gut hinbekommen.
Dem öffnenden <nav>-Element habe ich noch das hier hinzugefügt: id="navigation".
Wenn ich das entferne, kann anscheinend das Javascript nicht mehr die Navigation "ansprechen".
Kann das sein?

Ist es möglich, das Javascript so anzupassen, dass es das <nav>-Element direkt "anspricht" ohne id?
Und wenn ja, ist das sinnvoll, das so zu machen?

Mein aktueller HTML-Code:

<nav id="navigation">  
  <h3 class="menu-klappen" >  
    <span data-icon="&#8801;" aria-hidden="true"></span>  
    <span class="screen-reader-text">Menü</span>  
  </h3>  
  <ul>  
    <li><a href="/listen/_xx_film-modelle-a.php" class="rubrik">Film und TV Modelle</a></li>  
    <li><a href="/listen/_xx_erotik-modelle-a.php" class="rubrik">Erotik Modelle</a></li>  
    <li><a href="/_xx_search.php?showAll" class="rubrik">Gesamtprogramm</a></li>  
    <li><a href="/_xx_bestellvorgang.php">Bestellvorgang</a></li>  
    <li><a class="aktiv" href="/_xx_versandkosten.php">Versandkosten</a></li>  
    <li><a href="/_xx_bezahlmethoden.php">Bezahl-Methoden</a></li>  
    <li><a href="/_xx_kontakt.php">Kontakt</a></li>  
    <li><a href="/_xx_impressum.php">Impressum</a></li>  
    <li><a href="/_xx_newsletter.php">Newsletter</a></li>  
    <li><a href="/_xx_agb.php">AGB</a></li>  
    <li><a href="/_xx_datenschutz.php">Datenschutz</a></li>  
    <li><a href="/_xx_widerrufsbelehrung.php">Widerrufsbelehrung</a></li>  
  </ul>  
</nav>

Mein aktueller CSS-Code:

nav ul {  
  padding-left: 0;  
}  
  
nav li {  
  list-style: none;  
}  
  
.menu-klappen {  
    display: none;  
}  
  
@media screen and (max-width:880px) {  
  
  /* Button zum Anzeigen des Menüs */  
  .js .menu-klappen {  
    display: block;  
    cursor: pointer;  
    color: #fff;  
    background-color: #313131;  
    width: 2.5rem;  
    height: 2.5rem;  
    text-align: center;  
    line-height: 2.5rem;  
    font-weight: normal;  
  }  
  
  .js nav ul {  
    display: none;  
  }  
  
  nav ul.klappen-on {  
    display: block;  
  }  
  
   nav ul.klappen-on li, .no-js nav li {  
    display: block;  
  }  
  
  [data-icon]:before {  
    content: attr(data-icon);  
    speak: none;  
    display: inline-block;  
    font-size: 200%;  
  }  
  
  .screen-reader-text {  
    position: absolute;  
    top: -9999px;  
    left: -9999px;  
  }  
  
}

Mein aktueller Javascript-Code:

<script>  
( function() {  
//Klasse zu html hinzufügen lassen, die kennzeichnet, dass JavaScript aktiviert ist  
document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/g, '') + ' js ';  
function naviklapp(navid) {  
//Elemente definieren: Navigationselement, Button, Menü  
var nav = document.getElementById( navid );  
var button;  
var menu;  
//Wenn keine Navigation, dann nichts tun  
if ( ! nav )  
return;  
//der Button ist das erste h3-Element innerhalb der Navigation  
button = nav.getElementsByTagName( 'h3' )[0];  
  
// die erste ungeordnete Liste in der Navigation ist das Menü  
menu = nav.getElementsByTagName( 'ul' )[0];  
if ( ! button )  
return;  
  
if ( ! menu || ! menu.childNodes.length ) {  
button.style.display = 'none';  
return;  
}  
button.onclick = function() {  
  
if ( -1 != button.className.indexOf( 'klappen-on' ) ) {  
button.className = button.className.replace( ' klappen-on', '' );  
menu.className = menu.className.replace( ' klappen-on', '' );  
} else {  
button.className += ' klappen-on';  
menu.className += ' klappen-on';  
}  
};  
}  
naviklapp('navigation');  
  
} )();;  
</script>