Websites met stijl

37. Een tabblad menu

De hoofdstukken na hoofdstuk 34 bevatten nieuwe artikelen over allerlei onderwerpen. Dit is het derde artikel.

In dit hoofdstuk

Inleiding

Een menu van tabbladen

In dit hoofdstuk gaan we een menu maken dat er ongeveer uitziet als figuur 1.

figuur 1: een menu van tabbladen

Het menu suggereert een stel tabbladen. Blad 2 is het bovenste tabblad, het blad in beeld. Door een klik op een andere tab zet je een ander blad in beeld.

Je kan proberen zelf deze layout te maken. Als je dat niet lukt of als dat je teveel werk is vind je hieronder in detail hoe je de layout van figuur 1 krijgt.

Vanuit sjabloon 5

We gaan uit van sjabloon 5, een van de sjablonen die besproken zijn in hoofdstuk 30 en 31.

figuur 2: menu van sjabloon 5

Een stijlblok

Om sjabloon 5 om te werken tot het menu van figuur 1 moeten we veranderingen aanbrengen in de css. Het ligt voor de hand dat te doen in het stijlblad.

In dit hoofdstuk pakken we het echter anders aan: we zetten de nieuwe stijlregels in een stijlblok in de head van sjabloon 5. Dat heeft twee redenen:

Zie de naslag over een stijlblok.

De stijlen

Hieronder zie je het hele stijlblok.

figuur 3: stijlblok met de opmaakregels voor het tabbladmenu <head> <meta charset="utf-8">
<title>Websites met stijl - H37</title>
<link rel="stylesheet" href="css/stijlen.css">

<style> nav { border-bottom: 1px solid hsl(240, 50%, 50%);
padding: 30px 20px 0 20px;
}

nav a{ border: 1px solid hsl(240,50%, 50%);
background-color: hsl(0, 0%, 90%);
border-radius: 8px 8px 0 0;
color: hsl(240, 0%, 45%);
width: 150px;
font-size: 100%;
padding: 3px 0;
margin: 0;
position: relative; top: 1px;
}

nav a[href=""] { border-bottom: 1px solid white;
color: hsl(240, 100%, 45%);
}

nav a:hover { background-color: hsl(0, 0%, 80%);
color: hsl(240, 50%, 60%);
border: 1px solid hsl(240,50%, 50%);
}
</style>
</head>
Wil je meer daar uitleg/toelichting bij? Klik dan op de knop Stap voor stap.

Welke stijlregel geldt?

Cascading style sheets betekent dat stijlbladen en stijlregels over elkaar heen gelegd worden. Als twee regels betrekking hebben op dezelfde eigenschappen van dezelfde elementen, dan geldt de laatste.

Kijk bijvoorbeeld wat er gebeurt als je in de head de regel <link rel="stylesheet" href="css/stijlen.css"> achter het stijlblok zet: figuur 9: de regel met de link naar het stijlblad achter het stijlblok <style> ...
...
</style>
<link rel="stylesheet" href="css/stijlen.css">

De tabbladen zijn helemaal verdwenen; het menu ziet er weer uit zoals het was. Hoe komt dat?

Eigenlijk is het simpel. Omdat het stijlblok nu vóór de link met het stijlblad staat, wordt eerst het stijlblok ingelezen, en pas daarna het stijlblad. De stijlregels van het externe stijlblad overschrijven daarmee de eerder ingelezen regels van het stijlblok.

Onthoud:

Tabbladen of niet?

Wil je na dit hoofdstuk sjabloon 5 in zijn oorspronkelijke staat terugbrengen?
Wis dan het stijlblok in de head (markeren als commentaar kan ook).
Als je de menu-items andere namen hebt gegeven moet je die terugzetten naar de oorspronkelijke namen.
Wil je het tabblad-menu gaan gebruiken?
Dan moet je de stijlregels die je in het stijlblok in de head hebt gezet (de regels van figuur 3) verplaatsen naar het stijlblad (5.css).
  • De betreffende oorspronkelijke stijlregels in 5.css vind je tussen regel 204 en regel 241.
  • De tags <style> en </style> in de head kun je wissen na het verplaatsen van de tussenliggende stijlregels.

- Einde -