Horizontaal menu

Een menu is in html feitelijk een opsomming van linkjes. In HTML5 zetten we die opsomming dus in het nav-element. Met CSS doorlopen we de volgende stappen:

• <ul>: ontdoen van liststyle, marge en padding;
• <li>: een float:left; geven en 25% breedte
• <>:a een display block en achtergrond, kleur geven en ontdoen van de onderstreping
• a:hover een andere achtergrond
• a krijgt dezelfde line-height als de hoogte van de li
• Als je bovendien een randje als scheiding tussen de linkjes zet, zal het menu te breed worden en meerdere regels gaan beslaan. Verhelp dit met box-sizing: border-box; (niet getoond)
• Om in de eerste link het randje te verwijderen, selecteer je nav ul li:first-child en zet daar de border-left op 0.

• Het horizontale menu uit de vorige video wordt aangepast.
• Het streepje bij het eerste menu-item wordt weggehaald.
• In dit menu krijgt elk item een passende breedte met padding.
• Dan blijkt dat het floaten van de items problemen veroorzaakt.
  Door het omvattende element van de floats (hier is dat de ul) een overflow:auto te geven is dat probleem opgelost.
• Dit element kun je dan ook dezelfde achtergrond geven als de linkjes.
• In de linkjes kun je nu makkelijker de rechterrand aanbrengen dan de linkerrand.
• De roll-over kun je een transitie geven met:
  transition: background-color 500ms; om deze in een halve seconde de achtergrondkleur te laten overvloeien

Het horizontale menu uit de vorige filmpjes wordt uitgebreid tot een drop-down menu.
Semantisch is er sprake van een extra opsomming binnen een bestand list-item. Dat wordt er in de html dus aan toegevoegd.
In de CSS selecteer je dropdown(onderdelen) via de selector:
nav ul ul (en wat je nog verder nodig hebt).
De dropdown wordt allereerst verborgen met display:none;
In de CSS kun je vervolgens bij een roll-over van het betrokken list-item weer tonen met display:block; Selecteer met nav ul li:hover ul.
De items kun je weer onder elkaar te krijgen door de nog bestaande float te verwijderen. Ook kun je het dropdown-gedeelte naar rechts schui door de opsomming een linkermarge te geven.
Geef de items van de dropdown een breedte en automatische hoogte en eventueel een eigen transitie.

Zet deze training online en stuur mij een linkje.