CSS voorbeelden - Menu opgemaakt met CSS
Veel websites maken gebruik van plaatjes om een menu op te bouwen en de links een 'leuker' uiterlijk te geven. Terwijl dit echt niet nodig is.
Het opmaken van een menu en de links kan veel beter met CSS. Niet in de laatste plaats omdat het de links toegankelijk maakt.
Menu in een lijst
Als voorbeeld nemen we een simpel menu dat bestaat uit een aantal links in een lijst.
HTML - Menu
De HTML-code voor het opbouwen van een menu in een ongeordende lijst:
<ul><li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
<li><a href="#">link 5</a></li>
</ul>
Waarbij # vervangen dient te worden door de naam van het te openen document. Bijvoorbeeld: voorbeelden.html
De ongeordende lijst ul bevat een 5-tal links die nu nog niet voorzien zijn van een opmaak middels CSS. De links zijn weergegeven in de standaard kleur van de browser en het 'menu' heeft nog alle kenmerken van een lijst.
Menu1
Menu1 CSS
In de CSS nemen we de volgende stylregels op:
ul#menu1 { margin: 0; padding: 0; list-style-type: none; }
ul#menu1 li { margin: 0; padding: 0; }
We geven de lijst een 'id' <ul id="menu1">. Hierdoor wordt het een element met een unieke naam, dat we afzonderlijk van de rest kunnen opmaken. De lijst wordt nu ontdaan van de 'blokjes' en de elementen worden aan de linkerrand geplaatst. Het begint nu meer op een blok met links te lijken.
De links opmaken met CSS
De CSS voor het opmaken van de links:
Voor het weghalen van de streep onder de links voegen we volgende stylregel toe:
#menu2 a { text-decoration: none; }
Voor het veranderen van de kleur gebruiken we de stylregel:
#menu2 a { color: #036; }
Omdat het makkelijker is deze samen te gebruiken wordt de stylregel:
#menu2 a { color: #036; text-decoration: none; }
De links zijn nu nog steeds in de standaard kleur en onderstreept. Dat is niet echt wat we willen, daar gaan we wat aan doen door de links, het a element een andere kleur te geven en de streep weg te halen.
We geven de lijst een ander 'id' <ul id="menu2"> en kunnen nu de links voor dit voorbeeld, afzonderlijk van de rest opmaken.
De kleur van de links is nu veranderd van lichtblauw naar donkerblauw en de streep is weg. Wel staan ze nu nog te dicht op elkaar en is nog niet echt duidelijk dat het hier om een 'linkblok' gaat.
Voor het uiterlijk van het menu, vind ik het zelf mooier als er wat meer ruimte tussen de links onderling aanwezig is. Dit lossen we op door voor het a element, meer ruimte te declareren tov. elkaar. In de stijlregel: padding: 0.3em 0.2em 0.3em 0.3em; . Hierbij staan de vier waarden respectievelijk voor: top right bottom left.
Deze 'schrijfwijze' voor de waarden, geldt overigens voor alle stijlregels waarbij er waarden kunnen worden opgegeven voor de boven-, rechter-, onder-, en linkerkant.
Het menu krijgt vorm
De CSS voor het opmaken van de links:
De kleur en de achtergrond in CSS, een breedte van 12em en het geheel bereikbaar over de volledige breedte:
#menu3 a { color: #fff; background: #036; width: 12em; display: block; }
De afstand van de links tov. de rand van het element:
#menu3 a { padding: 0.3em 0.2em 0.3em 0.3em; }
De lengte van de links:
#menu3 a { width: 12em; }
Omdat ik zelf een donkerblauwe achtergrond en een witte letter wat mooier vind, de afstand nog opgegeven moet worden en de links breder moeten worden, pakken we eea. tegelijk aan.
Het menu krijgt weer een eigen 'id' <ul id="menu3"> om ervoor te zorgen dat niet alle links in dit document mee wijzigen.
Het beschikbaar maken van de link over de volledige breedte van het menu doen we met een display: block;. Hierdoor veranderd het a element, van een 'inline' element in een element dat zich gedraagt als een block level element. Het neemt nu de volledig beschikbare breedte in.
Internet Explorer (kortweg IE) maakt hierbij van het a element ook een 'block level' element, de link blijft echter slechts beperkt tot de tekst. Om dit op te lossen is het opgeven van de breedte noodzakelijk.
Een met CSS opgemaakt menu:
De CSS voor het opmaken van de links en het menu:
De lijst krijgt de volgende stylregels:
ul#menu4 { margin: 0; padding: 0; list-style-type: none; }
De elementen in de lijst:
ul#menu4 li { margin: 0; padding: 0; }
De links met 'hover' (muisover) en 'visited' (bezocht):
ul#menu4 a { display: block; color: #fff; font-weight: bold; background: #036; width: 12em; padding: 0.3em 0.2em 0.3em 0.3em; text-decoration: none; }
ul#menu4 a:visited { color: #EEE; text-decoration: none; }
ul#menu4 a:hover { background-color: #369; color: #fc9c00; }
We zijn er nog niet helemaal. De achtergrondkleur en die van de linktekst wijzigt nog niet bij een hover (muisbeweging over de links) en de letter is nog een beetje te iel. Het menu krijgt weer een eigen 'id' <ul id="menu4"> en we kunnen aan de slag.
De volledige CSS voor het menu staat hiernaast.
Vanzelfsprekend kan het menu nog verder verfraaid worden door een achtergrond afbeelding te gebruiken etc. Eea. zal in nog volgende voorbeelden worden getoond.
