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

[Gunther]

Hallo!

Die (Haupt)Navigation ist mit Sicherheit einer der "kniffeligsten" Punkte bei einem Responsive Design.

Es gibt ca. 3-5 verschiedene Ansätze dafür (per Google leicht zu finden), z.B. http://responsivenavigation.net/index.html

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.

Das ist eine der möglichen Varianten ...!
Der "Vorteil" besteht im Wesentlichen darin, dass viele (alle?) Mobile Browser Selects automatisch als Gesamtansicht anzeigen (was bei vielen Optionen allerdings auch wieder zum Problem werden kann).

In meinem Code gäbe es dann quasi beide Navigationen.

Zwar nicht "schön", aber zu verschmerzen (s.u.) ...!

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.  
  
Damit machst du die Navigation deiner Website im Prinzip von Javascript abhängig.  
Und wenn, dann kannst du auch gleich dein "normales" Menü bei Bedarf per JS in ein Select umwandeln.  
  
Persönlich stehe ich aber nach wie vor auf dem Standpunkt, dass eine Website grundsätzlich auch ohne JS vollumfänglich benutzbar sein sollte.  
  
Von daher verwende ich eine Navigation, die per CSS Pseudo-Klasse :target ein- und ausgeblendet wird, sofern der User JS deaktiviert hat.  
  
Und wenn JS aktiviert ist, kannst du im Prinzip sowieso alles mögliche machen ...!  
  
  

> Über Euren Rat würde ich mich sehr freuen.  
  
Einen möchte ich dir dann auch noch dringend mit auf den Weg geben:  
Wenn deine Website bereits online ist, und zweifelsfrei eine gewerbliche Website darstellt, dann ist es in höchstem Maße "gefährlich", wenn der Link zum Impressum einen 404er anstatt der entsprechenden Informationen liefert!  
  
  
Gruß Gunther