Ben's Hobbyhoekje -- Menu's in HTML en CSS I: Pulldown-menu

Menu's in HTML en CSS I: Pulldown-menu

Bovenaan de bladzijde zie je een horizontale menubalk. Als je met de muis over de items gaat, verandert de achtergrondkleur een beetje. De muisaanwijzer verandert van een pijl in een handje. Soms verschijnt er een submenu.

Het ligt voor de hand om JavaScript in te zetten om de animaties in dit menu zichtbaar te maken, maar het kan ook met alléén CSS, dus helemaal zonder JavaScript.
Op deze pagina wordt uitgelegd hoe je dat kunt aanpakken.

Er worden twee items besproken:
1. De werking van de CSS-code
2. Inbouwen in je eigen site
De code bestaat uit een CSS-style sheet en standaard HTML-code. Beide moet je aanpassen voor je eigen gebruik. De code van het voorbeeld staat onderaan de bladzijde. Die kun je downloaden om zelf te gebruiken.
De code van het menu wordt geplaatst binnen de <div>-tag met id="CSSmenu". Om er voor te zorgen dat de content niet gedeeltelijk onder met menu verdwijnt, moet een witruimte worden aangebracht. Dat doe je met een lege paragraaf met <p id="CSSmenuWitruimte"></p>. De hoogte regel je in de CSS-code. De hoogte van de witruimte hang af van de opmaak van de horizontale menu-balk.
De menu-structuur wordt gemaakt met <ul> ... </ul>-tags (ongeordende lijsten), die worden vormgegeven met CSS.
Elk menu-item is een <li> ... </li>-tag.
De horizontale menu-balk ontstaat door aan de eerste <ul>-tag de CSS-eigenschap list-style-type:none te geven.
Elk menu item bevat één hyperlink. De hyperlinks worden gemaakt met de standaard HTML-tag <a href="....">linktekst</a>.
De submenu's worden gemaakt door binnen een <li>-tag een nieuwe <ul>-tag te openen. De submenu-items zet je weer in <li>-tags.
De animatie (het verschijnen van de submenu's en het veranderen van de achtergrondkleur) wordt geregeld door de pseudo-class hover, die actief wordt als de muis boven een menu-item (lees: <li>-tag) zweeft.
De CSS-code bevat een aantal zaken die niet mogen worden veranderd, zie onderstaande tabel.

*CSS-id*		*Niet wijzigen:*
#CSSmenu		position:fixed; top:0; left:0; display:block; background-color:transparent; z-index:25; De waarde van z-index is meestal voldoende. Als je merkt dat (delen van) de content over het menu heen schuiven in plaats van er onderdoor, moet je z-index verhogen.
* html #CSSmenu		Geheel ongewijzigd laten. Internet Explorer kan niet overweg met position:fixed. Deze code zorgt er voor dat IE het menu wel goed weergeeft.
#CSSmenuExtra		position:fixed; top:0; left:0; display:block; background-color:inherit; z-index:20; z-index moet iets kleiner zijn dan de z-index in #CSSmenu. Als je z-index in #CSSmenu moet verhogen, moet je deze waarde van z-index evenveel verhogen. Dit block zorgt er voor dat er altijd een kleine marge is tussen de leesbare content en de bovenbalk van het menu, óók als je gaat scrollen.
* html #CSSmenuExtra		Geheel ongewijzigd laten.
#CSSmenu a		background-color:inherit; display:block
#CSSmenu a:hover		Geen beperkingen
#CSSmenu ul		Geheel ongewijzigd laten.
#CSSmenu li		float:left;
#CSSmenu ul li ul		Geheel ongewijzigd laten.
#CSSmenu ul li ul li		Geheel ongewijzigd laten.
#CSSmenu ul li:hover ul		Geheel ongewijzigd laten.
#CSSmenuWitruimte		Geen beperkingen. Maak deze echter niet groter dan strikt nodig is!

De beste opmaak van het menu vind je door een beetje met instellingen te spelen. Je wijzigt ze met behulp van onderstaande CSS-attributen:

*CSS-id*		*Opmaak attributen:*
#CSSmenu		• z-index. De hier toegepaste waarde van z-index (25) is meestal voldoende. Als je merkt dat (delen van) de content over het menu heen schuiven in plaats van er onderdoor, moet je z-index verhogen. • color. Hiermee stel je de kleur van de tekst in. Zie het item Kleurcodes voor tekst, links en achtergrond voor de waarden die je kunt gebruiken. font-family. Hier is het default sans-serif (schreefloos) font gebruikt, omdat het goed leesbaar is. je kunt hier echter elk font inzetten wat je wilt. Letters met een schreef, zoals Times New Roman raad ik niet aan. • font-size. De hier gebruikte waarde is 100%. Het hangt af van andere CSS-instellingen of je dit moet veranderen. • font-weight. De hier gebruikte waarde bold geeft vaak goed leesbare resultaten.
#CSSmenuExtra		• z-index. De waarde van z-index moet iets kleiner zijn dan de waarde die is gebruikt bij #CSSmenu. • height. Neem de waarde ca. 20px groter dan de hoogte van de menubalk. Met een beetje spelen vind je de beste waarde.
#CSSmenuWitruimte		• padding-top. Maak deze niet groter dan strikt nodig is! Met een beetje spelen vind je de beste waarde.
#CSSmenu a		• color. Hiermee stel je de tekstkleur in, voor de menulinks waar de muis niet boven zweeft. • padding. Hiermee geef je aan hoeveel ruimte er vrij moet blijven rond de links in de menu's. Dat is een kwestie van smaak. Hier is gebruikt: 2px boven en onder de tekst, 6px links en rechts van de tekst. • text-decoration. Hiermee geef je aan of er een streep onder de tekst moet staan. De hier gebruikte waarde none geeft voor een menu als dit de beste resultaten.
#CSSmenu a:hover		• background-color. Hiermee stel je de achtergrondkleur in, voor de delen van het menu waar de muis boven zweeft. • color. Hiermee stel je de tekstkleur in, voor de menulinks waar de muis boven zweeft.
#CSSmenu li		• background-color. Hiermee stel je de achtergrondkleur in, voor de delen van het menu waar de muis niet boven zweeft. • color. Hiermee stel je de tekstkleur in, voor de menulinks waar de muis niet boven zweeft. • width. Dit is de breedte van de menu-items. Voor deze toepassing is die gedefinieerd in em. Als je de grootte van de letters verandert, verandert de breedte van de items mee. • border. Hiermee maak je een rand rond elk menu-item. Dit mag je ook weglaten.

Inbouwen in je eigen site gaat als volgt:

Zorg ervoor dat de browser in standards mode staat, anders werkt het niet. Je zet de browser in standards mode door een DTD (Document Type Definition) als eerste in het HTML-document te zetten.
Zie ook het item Over Standards mode en Quirks mode.
Plaats de CSS in de <HEAD> van je pagina. Pas de opmaak aan naar je eigen smaak, maar houd je aan de beperkingen die hierboven zijn aangegeven.
Direct na de <BODY>-tag maak je de witruimte voor het menu met <div id="CSSmenuExtra">.
Direct daaronder zet je het menu neer, binnen de tag <div id="CSSmenu">
Daaronder volgt de content van je document. Het eerste item van je content moet een <p>- of <div>-tag zijn met id="CSSmenuWitruimte".
Het nadeel van deze benadering is dat de volledige code van het menu (dus HTML én CSS) in elk HTML-bestand van je website moet worden opgenomen. Dat geeft veel dubbele code waardoor het wijzigen van het menu lastig wordt. Natuurlijk kun je de CSS-code in een apart bestand zetten (.CSS) en dat in elk bestand linken, maar met de HTML-code is dat niet mogelijk.

Gebruik:

De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.

De code van het voorbeeld ziet er als volgt uit:

(Zet dit in de <HEAD>).

<style>
#CSSmenu { position:fixed; top:0; left:0; display:block; z-index:25;
background-color:transparent; color:#fff; font-family:sans-serif;
font-size:100%; font-weight:bold }
* html #CSSmenu { position:absolute }
#CSSmenuExtra { position:fixed; top:0; left:0; display:block; z-index:20;
background-color:inherit; width:100%; height:35px }
* html #CSSmenuExtra { position:absolute }
#CSSmenuWitruimte { padding-top:15px }
#CSSmenu a { background-color:inherit; color:#fff; display:block;
padding:2px 6px; text-decoration:none }
#CSSmenu a:hover { background-color:#0cf; color:#fff }
#CSSmenu ul {list-style-type:none; margin:0; padding:0 }
#CSSmenu li { background-color:#09c; float:left; width:9em;
border:1px solid #fff }
#CSSmenu ul li ul { display:none }
#CSSmenu ul li ul li { float:none }
#CSSmenu ul li:hover ul { display:block }
</style>

(Zet dit aan het begin van de <BODY>).

<div id="CSSmenuExtra"></div>
<div id="CSSmenu">
<ul> 
<li><a href="#">Home</a></li>
<li><a href="#">Handig</a>
<ul> 
<li><a href="#">Nieuws</a></li>
<li><a href="#">Weer</a></li>
<li><a href="#">Telefoonboeken</a></li>
<li><a href="#">Woordenboeken</a></li>
<li><a href="#">Routeplanners</a></li>
</ul>
</li>
<li><a href="#">Fractals</a>
<ul> 
<li><a href="#">Zelf doen</a></li>
<li><a href="#">Software</a></li>
<li><a href="#">Wiskunde</a></li>
<li><a href="#">Fractal-links</a></li>
</ul>
</li>
<li><a href="#">HTML</a>
<ul> 
<li><a href="#">Nieuw</a></li>
<li><a href="#">Alles</a></li>
</ul>
</li>
<li><a href="#">Varia</a></li>
</ul>
</div>

<p id="CSSmenuWitruimte"></p>
.
. Rest van de content
.

Downloaden:

Druk op de knop: File: voorb297.zip, 820 bytes.

Opmerking:

Een vergelijkbaar menu, met wat meer toeters en bellen dan het hier gebruikte, vind je in het item Menu's in HTML en CSS II: Geanimeerd pulldown-menu.