Websites met stijl
28. Menu's en submenu's in een lijst
In dit hoofdstuk
Inleiding
Op de website van Terschelling hebben we een menu gemaakt als een rij hyperlinks binnen het element nav (hoofstuk 5).
Vaak zet men die rij hyperlinks in een lijst (ul). Dat doen websitemakers omdat een menu eigenlijk een lijst is met links.
Voor het uiterlijk maakt het niet uit, je kan met css een menu in een lijst en een menu zonder lijst er exact hetzelfde uit laten zien.
Het menu van de Terschelling-website is zonder lijst gemaakt, het menu van de Apollo-website bestaat wel uit een lijst.
De pagina 'Retourtje maan' van de Apollo-website heeft een submenu met de items 'Het ruimteschip', 'De raket', 'De reis'.
Zo'n submenu is dan een lijst binnen een lijst.
Opmerking
Het submenu is alleen relevant voor pagina 'Retourtje maan', daarom is het alleen op die pagina zichtbaar.
De pagina's 'Hoe het begon' en 'Apollovluchten' hebben het submenu niet.
Een lijst binnen een lijst
De lijst van figuur 1 heeft de structuur van het menu uit de Apollo-website.
De items 2a t/m 2c in figuur 1 vormen een lijst binnen een lijst.
figuur 1
Zo'n lijst maak je in een paar stappen:
Stap 1: de enkele lijst
Maak de enkele lijst (zonder de lijst erin):
figuur 2: enkele lijst
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
Stap 2: ruimte maken
Maak ruimte voor de tweede lijst.
Schuif hiertoe de eindtag </li> van het item waar de lijst ingevoegd moet worden enkele regels omlaag.
In het voorbeeld is dat bij item 2.
figuur 3: enkele lijst met extra ruimte bij item 2
<ul>
<li>item 1</li>
<li>item 2
</li>
<li>item 3</li>
</ul>
Stap 3: de tweede lijst invoegen
Voeg nu de lijst met de items 2a t/m 2c toe:
figuur 4: De tweede lijst ingevoegd
<ul>
<li>item 1</li>
<li>item 2
<ul>
<li>item 2a</li>
<li>item 2a</li>
<li>item 2b</li>
</ul>
</li>
<li>item 3</li>
</ul>
Opmerkingen
- Op deze manier kan je in elk item weer een lijst plaatsen (en desgewenst daarin ook weer een lijst).
- Let op: In de praktijk wordt de eindtag </li> na de ingevoegde lijst nog wel eens verkeerd geplaatst.
Als je de stappen van hierboven volgt gaat het eigenlijk altijd goed.
Een submenu
Figuur 4 vormt het stramien voor het menu met submenu van de Apollo-website.
Er moeten nog twee dingen worden gedaan:
- De list-items moeten daartoe worden voorzien van hyperlinks
- En de opmaak moet worden geregeld.
Daarbij moeten de opsomtekens worden verborgen; die zijn niet gebruikelijk in een menu.
Dat gaan we stap voor stap doen:
Stap 1: de items voorzien van hyperlinks
figuur 5: Een menu met submenu
<ul>
<li><a href="#">item 1</a></li>
<li>item 2
<ul>
<li><a href="#">item 2a</a></li>
<li><a href="#">item 2b</a></li>
<li><a href="#">item 2c</a></li>
</ul>
</li>
<li><a href="#">item 3</a></li>
</ul>
Opmerkingen:
- Omdat in het voorbeeld de precieze linkbestemmingen niet van belang zijn, zet ik overal href="#".
- Bij de Terschelling-website werd het actieve menu-item dat verwijst naar de pagina in beeld voorzien van een lege href: href="".
(In de css zorgden we ervoor dat dat item een andere kleur krijgt.)
Bij de Apollo-website doe ik het anders. Daar is het betreffende menu-item (item 2) geen hyperlink.
Dat krijgt dan vanzelf een andere kleur dan de links.
Stap 2: de opmaak van het nav-element
Bruine achtergrond, afgeronde hoeken, padding 5px, breedte 240px, float left:
figuur 6: De opmaak van nav.
nav {
background-color: hsl(33,15%,15%);
border-radius: 10px;
padding: 5px;
width: 240px;
float: left;
}
Opmerking:
- De eigenschap float: left zorgt ervoor dat de hoofdtekst naast het menu komt en niet eronder.
Stap 3: De opsomtekens wegwerken
In een menu is het niet gebruikelijk om opsomtekens te gebruiken. Die moeten dus weggewerkt. Tevens maken we de tekst vet en lichtblauw:
figuur 7: De opsomtekens weg
nav ul {
margin: 0;
list-style: none;
font-weight: bold;
color: hsl(240, 100%, 80%);
}
- De stijlregels gelden voor de lijst (ul) binnen nav.
- De belangrijkste regel is list-style: none; die de opsommingstekens uitschakelt.
- De links worden niet lichtblauw, maar blijven hun standaard kleur houden. Dat passen we aan in de volgende stap.
Stap 4: De opmaak van de hyperlinks
.
figuur 8: Opmaak van de hyperlinks
nav a {
text-decoration: none;
color: hsl(60, 33%, 90%);
}
nav a:hover, nav a:active {
color: hsl(48, 100%, 50%);
}
- De onderstreping voor de links in het menu moet uit: (text-decoration: none;)
de kleur ervan maken we heel licht geel (zeg maar wit).
- De kleur bij aanwijzing (hover) en tijdens het klikken (active) wordt: oranje. (probeer het maar in het menu van figuur 8)
Stap 5: De opmaak van het submenu
figuur 9: Opmaak van het submenu
nav ul ul {
font-weight: normal;
color: hsl(60, 33%, 90%);
padding-left: 40px;
}
- Je selecteert het submenu met de selector nav ul ul: een lijst binnen een lijst binnen nav.
- De opmaak: letters niet vet, kleur wat minder licht, 40px linker padding (inspringen dus).
Opmerking
- Wil je liever het menu item van de webpagina in beeld noteren met een lege href
(<a href="">item 2</a>
in plaats van item 2), dan moet je voor de opmaak de volgende regel toevoegen:
nav a[href=""] {color: hsl(240, 100%, 80%)}
Het menu van de Apollo-website
Als je de teksten van de menu items (en de URL's) aanpast dan heb je het menu van de Apollo-website:
figuur 10: het menu van de website Apollo
Een dropdown menu
Hoewel mij een submenu als hierboven prima bevalt zie je op veel websites een menu als hieronder.
De submenu's klappen dan uit als je er met de muis overheen beweegt. Probeer het maar uit in figuur 11
We spreken van een dropdown menu.
Deze menu's waren vroeger alleen mogelijk met behulp van de taal javascript. Sinds html5 en css 3 kan het ook zonder Javascript.
Het menu van Lisa Catalano is er een voorbeeld van.
figuur 11: dropdown menu
Opmerking:
Dropdownmenu's worden minder vaak gebruikt sinds de opkomst van smartphones, omdat aanwijzen met de muis niet werkt op aanraakschermen van tablets en smartphones.