basta!blog - Was uns als Internetagentur bewegt...

Ein Responsive-Menü mit CSS

Wir kennen Sie alle - die 3 kleinen übereinander stehenden Striche. Sie sehen aus wie ein Burger und zeigen uns in der mobilen Ansicht einer Website an, dass sich an diesem Punkt die Navigation versteckt. Zur Gestaltung der Navigation für mobile Endgeräte gibt es verschiedenen Möglichkeiten. Heute möchten wir Euch eine Möglichkeit vorstellen welche ausschließlich auf CSS zurückgreift und schnell und einfach umzusetzen ist. Die nachfolgenden Code-Beispiele beziehen sich auf eine statische HTML-Seite, können jedoch problemlos für Content-Management-Systeme etc. adaptiert werden.

Stylesheet und viewport meta-tag integrieren

Hierzu gilt es zunächst den obligatorischen "Viewport-Tag" im <head>-Tag zu verankern, um später das Aussehen der Navigation mit Hilfe der Media Queries, je nach Displaygröße des Endgerätes, zu bestimmen. Anschließend kann mit der eigentlichen Gestaltung der Navigation begonnen werden. Die nachfolgenden Code-Beispiele beziehen sich auf eine statische HTML-Seite, können jedoch problemlos für Content-Management-Systeme etc. adaptiert werden. Zusätzlich wird ein Stylesheet integriert, wodurch das aussehen der Navigation beeinflusst wird.

Bildschirmfoto 2014-08-11 um 10.52.16

 

Weiterlesen
  22559 Aufrufe
  1 Kommentar
Neueste Kommentare in diesem Beitrag
Gäste — Zinkengabel
Hallo, eine schöne, sehr einfache CSS-Lösung. Wie sieht es aber mit der Browserkompatibilität aus? Im Standardbrowser von Androide... Weiterlesen
Freitag, 06. März 2015 21:13
22559 Aufrufe
1 Kommentar