oxo888oxo: Ganz einfaches Select-Menü für Mobile-Seite

Beitrag lesen

Hallo

Ich bin dabei, meine Webseite in einem Responsive-Design zu erstellen.
Bisher komme ich, auch dank Eurer Ratschläge, ganz gut zurecht.
Meine Seite hat einen recht einfachen "klassischen" Aufbau.
Navigation links ... Inhelt rechts ... und ein Footer.
Das wars auch schon.
Ein Link zu der Seite ist oben neben meinem Nicknamen.

Bisher ist es ja noch so, dass bei schmalen Viewports (mit Media Queries realisiert), die Navigation oben steht. Quasi im gleichen Design, wie sie bei breiteren Viewports auf der Linken Seite zu sehen ist.

Für die Navigation beim meinem schmalsten Viewport möchte ich gerne eine andere Lösung haben, als diese lange Auflistung der Links.
Die Lösung soll möglichst einfach und ohne wahnsinnig viel komplizierten Code auskommen.
Da dachte ich, dass so ein Select-Menü eine feine Sache ist.

In meinem Code gäbe es dann quasi beide Navigationen.
Und über die Media Queries würde ich dann per display: none; und display: block; die entsprechende Navigation ein- bzw. ausblenden.

So, nun habe ich da mal was vorbereitet :-)

  
<form action="select.html">  
  <p>  
    <select name="navigation-mobile" size="1" onChange="location.href=this.options[this.selectedIndex].value;">  
      <option value="#1">Navigation Eintrag Nr. 01</option>  
      <option value="#2">Navigation Eintrag Nr. 02</option>  
      <option value="#3">Navigation Eintrag Nr. 03</option>  
      <option value="#4">Navigation Eintrag Nr. 04</option>  
      <option value="#5">Navigation Eintrag Nr. 05</option>  
      <option value="#6">Navigation Eintrag Nr. 06</option>  
      <option value="#7">Navigation Eintrag Nr. 07</option>  
      <option value="#8">Navigation Eintrag Nr. 08</option>  
      <option value="#9">Navigation Eintrag Nr. 09</option>  
      <option value="#10">Navigation Eintrag Nr. 10</option>  
    </select>  
  </p>  
</form>  

Das ist jetzt erstmal nur der Code für das eigentliche Select-Manü.
Die Ein- bzw. Ausblende-Geschichte mache ich später.

Meine Navigation hat übrigens keine weitere Verschachtelung oder so.
Es gibt also nur eine Ebene sozusagen.

Ist diese Lösung gut?
Also ich meine, habe ich da keinen dummen Denkfehler gemacht oder so?
Und ist das wie im obigen Code gescheit umgesetzt?
Über Euren Rat würde ich mich sehr freuen.

Gruß
Ingo