Navigation auf mobilen Geräten ein- und ausklappen

[oxo888oxo]

Hallo

Es geht um die Navifation meiner Webseite auf mobilen Geräten.
Ich versuche eine möglichst einfache und unkomplizierte Lösung zu finden.

Erreichen möchte ich gerne, dass die Navigation auf mobilen Geräten per Link ein und ausgeklappt werden kann.

Das hier ist die Seite ohne Ein-und-Ausklapp-Funktion:
http://spaceart.de/_xxxx_versandkosten.php
Da wird bei schmalen Viewport die Navigation einfach nach oben verrschoben.
Das ist aber nicht so sehr schön finde ich, weil der User von meiner Seite dann ja erstmal immer nur die Navigation vor der Nase hat.

Ich habe da nun mal folgendes gebastelt.
Das ist übrigens nicht auf meinem eigenen Mist gewachsen, sondern ich habe es irgenwie herbeigegoogelt.
http://spaceart.de/_xxxx_versandkosten-2.php

<script language="JavaScript">  
  function div_change() {  
    for (i = 0; i < div_change.arguments.length; i++) {  
      var _id = div_change.arguments[i];  
      document.getElementById(_id).style.display = (document.getElementById(_id).style.display == 'none' ) ? 'block' : 'none';  
    }  
  }  
</script>  
  
<a href="javascript:/" onClick="div_change('klappen')">Navigation</a><br>  
<nav id="klappen" style="display: none;">  
  <a href="#">Kategorie 1</a><br>  
  <a href="#">Kategorie 2</a><br>  
  <a href="#">Kategorie 3</a><br>  
  <a href="#">Kategorie 4</a><br>  
  <a href="#">Kategorie 5</a><br>  
</nav>

Das scheint doch schon mal sehr gut zu funktionieren.
Ich hatte mir jetzt folgendes weiter überlegt.
Per Media Queries dafür sorgen, dass für das <nav>-Element je nach Viewport das voreingestellte display-Attribut auf "none" bzw. "block" steht.
Den Navigation-Link würde ich dann natürlich auch per Media Queries ein- bzw. ausblenden.

Das hätte doch den schönen Vorteil, dass ich nicht 2 Navigationen in meinen Code einfügen muss.
Und es läuft selbst auf meinem recht schwachbrüstigen alten Handy super.

Ein Problem sehe ich nun noch.
Bei deaktiviertem Javascript gibts kein Menü.
Das ist natürlich nicht so schön.
Könnte man das irgendwie raffiniert lösen?
Also so, dass bei deaktiviertem Javascriopt die Navigation grundsätzlich eingeblenet ist.

Was haltet Ihr denn von dieser Lösung?
Ist das OK so im Großen und Ganzen?
Oder vergesse/übersehe ich da was wesentliches bzw. mache einen dummen Denkfehler?

Gruß
Ingo