Mit der CSS für diese ul / li Text-Navigation kann man sehr leicht eine Anpassung für mobile Geräte vornehmen, sodass sich die Navigation bei einem kleinen Display von einer horizontalen in eine vertikale Navigation ändert.

Ich habe das mal auf einer Beispielseite für ein responsives Design in NOF 2015 hier eingebaut. Schiebt das Browser-Fenster zusammen oder ruft den Link mit dem Handy oder Tablet auf, um den Effekt zu sehen. Für die CSS klickt in der Navi auf Tutorial Navigation.

Responsive Website mit responsiver Navigationsleiste

 

Teil-Ansicht am PC:

Ansicht-PC

Ansicht am Handy:

Screenshot-Handy

 

… und hier noch eine Erweiterung, die bei kleinen Displays (Handy hochkant) auf eine zusätzliche Slick-Navigation umschaltet.

Ansicht Handy Slick-Navigation (ab 600px Displaybreite):

Slick-Navigation

 

… und noch eine Erweiterung mit der sehr schönen, responsiven Navigationsleiste von SmartMenus, sowie dem Einbau von zusätzlichen, parallaxen Layoutbereichen.

www.nof-tutorials.com/Responsive-Website-Layout-CSS/Layoutbereiche/layoutbereiche.html

… und noch eine Erweiterung mit einer eigenen @Media-Navigation und einer Gestaltung der Seite mittels CMS (Content Management System).

www.nof-tutorials.com/Responsive-Website-Layout-CSS/CMS/cms.php

Print Friendly