CSS navigatie maken.
Voor desktop EN mobile.

Hier een voorbeeld van hoe je een simpele navigatie kan maken die bruikbaar is (en er goed uitziet) op alle schermafmetingen (van mobiel to desktop en groter) Het uitgangspunt is om zo minimaal mogelijke code te gebruiken en de opmaak over te laten aan CSS:

Wat we in dit voorbeeld doen

Media queries gebruiken om de opmaak te veranderen qua beeldschermbreedte

We gebruiken rem als eenheid in plaats van pixels om de margins, paddings en font groottes relatief af te laten hangen van de font-size die we globaal opgeven bovenin de css file. Het voordeel hiervan is dat als we de font grootte veranderen, dan ook meteen de margins en de paddings van alle elementen in de pagina mee verschalen.

Min-width en max-width?

Hangt ervan af. Als je van groot naar klein werkt gebruik je max-width (veranderingen TOT maximaal een bepaalde schermbreedte) en als je van klein naar groot werkt (mobile first, zoals wij doen) dan specificeer je min-width (veranderingen VANAF minimaal een bepaalde schermbreedte)

Mobile first, css hover en css transition.

We werken van klein naar groot. Dus eerst styleren we de nav en de links daarin standaard bovenop elkaar. Daarna maken we de dropdown door handig gebruik te maken van css hover. Gecombineerd met css animaties (in dit geval css transition) kun je hem dan ook mooi naar beneden en boven laten bewegen.

Speelbak in CodeSandBox
Speelbak in Plunker
➔ ❑   Open in nieuw venster!