Responsive menu met submenu stap 9:
voor bredere viewport (00:17:38)
Het menu moet responsie zijn. Voor bredere viewports maken we een mediaquery aan.
In de opsomming van het hoofdmenu willen we de items nu naast elkaar.
We maken daar dus een grid-container van met display: grid;
We maken daar kolommen. Dit kan snel met de waarde repeat();
Je kunt daar als eerste argument het aantal linkjes ingeven, maar dan is jouw menu niet zo geschikt voor CMS, waar niet bij voorbaat bekend is hoeveel items het menu heeft.
Met repeat(auto-fill, minmax(10em, 1fr)); kun je tenminste uitgaan van meerdere linkjes van elk minimaal 10 em; Er blijft zo wel ruimte over.
Als je het helmen wilt opvullen dan gebruik je repeat(auto-fit, minmax(10em, 1fr));
De menu-toggle is nu overbodig. Deze wordt dus verborgen.
Dan zijn natuurlijk ook de items van het hoofdmenu niet zichtbaar, die moet je dus weer de gewenste waarden geven.
Als het submenu uitklapt, vergroot deze de hele nav en duwt de inhoud naar beneden.
Om hem over de inhoud te laten vallen, geef je hem postion: absolute. Zorg er dan wel voor dat de parent van het submenu een position relative heeft.
De linkjes zelf hebben geen achtergrondkleur, dat valt op bij dit submenu. Geef deze dus alsnog.
Tot slot zie je dat met 1 selector alle linkjes van het hoofdmenu behalve de eerste te selecteren zijn. Ze krijgen allemaal een randje aan de linkerzijde.