Een responsive menu

We gaan een responsive menu maken en hier zie je het resultaat:

1. Het menu past zich aan de viewport aan;
2. Middels mediaquery's zijn er sterke aanpassingen mogelijk;
3. Er is een dropdown opgenomen;
4. Het menu kan in de mobile versie worden weggeschoven.

Het overige deel van de pagina bevat enige inhoud met een afbeelding naar keuze.

Leerdoelen

Je leert hier de belangrijkste kenmerken van responsive werken. Je maakt ook kennis met Font Awesome, de tilde-selector, float-eigenschappen, box-model en het maken van een menu.

Een menu is een opsomming van linkjes. De linkjes zitten dus in een ongeordende lijst. Het geheel zit bij html5 in een nav-tag.
Om een submenu te maken plaats voor het afsluiten van een der items nog een opsommingslijst met linkjes. Het wordt zo een geneste opsommingslijst.
Om voor het stijlen de opsommingslijst eenvoudig te selecteren, wordt het list-item waar deze inziet, een class-naam gegeven.

Bij responsive design gaan we ook met dit menu eerst werken aan de mobiele versie: mobile first.
De opmaak voor grotere vensters vergt meer opmaakcode, die dus niet wordt verwerkt door mobieltjes.

De opmaak begint met kleurkeuzes en het verwijderen van de opmaakkenmerken van de opsommingslijsten en de linkjes. In een mobiel zijnde menu-items lineair in verticale zin. Vaak is het nodig de linkjes wat groter te maken zodat ze eenvoudiger aan te raken zijn.
Ook is het is het mogelijk roll-over effecten aan te brengen.

Door gebruik te maken van de class-selector van het submenu, kun je het submenu apart selecteren en stijlen. In dit voorbeeld willen we voorkomen dat het hele submenu door een roll-over verkleurt.
Het is ook wenselijk dit menu te verbergen, tot het betreffende list-item verborgen wordt. We maken daarom de hoogte, regel-hoogte, padding en font-grootte 0. Om een animatie te krijgen maken we de items ook transparant en voegen we de transition-eigenschap toe.
Met de selector .submenu:hover ul li kun je alle waarden herstellen en komt het menu tevoorschijn.

Wil je de site in een mobiel goed weergeven, moet je voorkomen dat deze de pagina verkleint. Dit doen deze devices om de gebruiker daarna naar de gewenste plek te laten inzoomen. Dit voorkom je met de viewport declaratie:
Een meta-tag met als attribuut name die de waarde viewport heeft en het content-attribuut met de waarde: width=device-width, initial-scale=1 Vervolgens kun met een mediaquerie de stijl gaan schrijven of overschrijven voor de opmaak bij een groter venster:

@media screen and (min-width:676px) {
       selector {
        eigenschap: waarde;
        eigenschap2: waarde;
       }
      }

In dit menu willen we de items van het hoofdmenu naast elkaar. Dit doen we met de float-left-eigenschap.
Als gevolg daarvan verliest het omhullende element hoogte: het 'voelt' de inhoud niet meer. Dit voorkom je door dat element een overflow: hidden; te geven.

In sommige horizontale menu's is het mooi als de items gelijk verdeeld worden. Bij 4 items krijgt elk item dus 25% breedte. Dat lijkt te veel, maar dat komt omdat padding en randdikte bij de breedte van de inhoud wordt toegevoegd, waardoor het element breder wordt. Met box-sizing: border-box is de opgegeven breedte inclusief padding en rand. Nu passen de items precies naast elkaar.
Door elk item een rechterrand te beven, krijgt de laatste dat ook. Dat is niet zo fraai, maar met :last-child selecteer je dat element zodat je de rand daar kan weghalen.
Het drop-downmenu moet ook een breedte van 25% krijgen. Daar kan beter met vw als lengtemaat gewerkt worden.
Merk op: voor Firefox is het nog wel verstandig de box-sing te voorzien van een prefix: -moz-box-sizing: border-box;

Als het scherm breder wordt, komen de teksten van het menu te ver van elkaar. Daarom volgt er een nieuwe mediaquery. De items krijgen een vaste breedte.
Ook kijken we opnieuw naar het drop-down-menu om deze op de gewenste breedte en plaats te krijgen. Veel eigenschappen van de vorige mediaquery moeten worden overschreven.

Voor de mobiele versie is het prettig dat het menu (dat de bovenzijde van de viewport voor een groot deel bedenkt) verborgen is en met een klik weer tevoorschijn komt.
Dit kan zonder script: css3 beschikt over de siblingselector ~.
Als je een element neemt en je voegt daar met de ~ een sibling die in de markup er direct opvolgt aan toe, dan kun je daarvan de eigenschappen gaan beschrijven.
We maken een input type checkbox met een id en een label met bijpassend for-attribuut.
Met de selector input[type='checbox]:checked ~ nav selecteer je de nav voor het geval de checkbox gechecked is.

In de opmaak wordt nog het een en ander aangepast waaronder:

1. de checkbox is functioneel, maar moet uit beeld;
2. het label moet voor bredere viewports verborgen worden;
3. met Fontawesome wordt de labeltekst een icon;
4. het label over de volledige breedte: display: block;
5. het icon en het label vergroten.

Link: https://fortawesome.github.io/Font-Awesome/

Nu we toch in Font Awesome bezig zijn kan er aan de dropdown ook nog wel een caret-down symbol worden toegevoegd.