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>
  • item 1
  • item 2
  • item 3

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>
  • item 1
  • item 2
  • item 3

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>
  • item 1
  • item 2
    • item 2a
    • item 2b
    • item 2c
  • item 3

Opmerkingen

Een submenu

Figuur 4 vormt het stramien voor het menu met submenu van de Apollo-website.
Er moeten nog twee dingen worden gedaan:

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:

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:

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%); }

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%); }

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; }

Opmerking

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.