De laatste tijd ben ik bezig geweest met het maken van navigatie menu's. Dit in verband met de nieuwe versie van Whelp. Wat zijn er een hoop mooie voorbeelden! En wat valt er een hoop te vertellen over dit onderwerp. In artikel een aanzet: hoe maak je een eenvoudig menu met HTML en CSS? Een eerste uitleg aan de hand van de website van de Volkskrant.

1. De basis – lijsten
Er zijn natuurlijk allerlei manieren om met HTML een menu te maken: tabellen, een flash-compontent inladen of lijsten – en ik vergeet er vast nog wel een paar.
Ik begin met de laatste variant: lijsten. In HTML zijn er twee type lijsten: ongeordende lijsten (unordered lists - UL) of geordende lijsten (unordered lists - OL). Binnen de lijst heb je lijstelementen (list items - LI). Een voorbeeld maakt het duidelijker. Ik neem als basis even de Volkskrant (en daarbinnen het submenu [class=subItems] onder de sectie Nieuws):

De Volkskrant heeft drie div's die onder elkaar staan.
1) De eerste (class=menuBar) bevat het hoofdmenu,
2) de tweede (class=subItems) bevat de subnavigatie
3) en de derde bevat de verwijzing naar de online krant.
De subnavigatie is een ongeordende lijst met daarin per onderwerp een lijst element. Wat nog ontbreekt zijn de daadwerkelijke hyperlinks. Voor de weergave van de menu's heeft de Volkskrant een apart CSS stylesheet: menustijl.css.

2. De achtergrond van de subnavigatie

Dit stukje code zorgt ervoor dat een achtergrondafbeelding achter het submenu wordt gezet en over de gehele breedte (961px) wordt herhaald.
Met margin: 2px 0 0 maakt de Volkskrant een klein wit streepje tussen het hoofdmenu en de subnavigatie.

3. Een horizontale navigatie
Standaard zouden de elementen in de subnavigatie onder elkaar komen te staan (zie bijvoorbeeld de linker navigatie bij nu.nl). Met een eenvoudige CSS aanpassing voor een UL en LI-element kan je dit echter horizontaal neerzetten:

Met display:inline zorg je ervoor dat de elementen in een lijn staan, dus horizontaal. List-style-type: none maakt dat je er geen bullets voor krijgt. Met de margin 0 2px 0 0 zorg je dat er aan de rechterkant 2px extra ruimte is naast ieder item. De vier getallen moet je lezen als de wijzers van een klok: boven, rechts, onder, links.
Verder zorgen de padding en margin ervoor dat alle elementen gevrijwaard zijn, zodat later dit geregeld kan worden met de hyperlink (a-tag).

4. De hyperlink vormgeven
De vormgeving van een hyperlink in het menu kent een aantal bijzonderheden:
1) het moet als een hyperlink te herkennen zijn, maar wel verschillen van andere hyperlinks in de pagina.
2) als de bezoeker er met de muis over heen gaat moet zij/hij er feedback over krijgen.
3) een actief onderdeel moet te onderscheiden zijn van niet-actieve onderdelen.
De Volkskrant lost dit zo op:

Hier wordt de kleur van een gewone hyperlink in het submenu geregeld: de onderstreping wordt uitgezet, het lettertype wordt ingesteld, de hoogte van de lijn en de paddings en margins. Dit heeft het effect dat de elementen midden in de navigatie staan.

Als je als bezoeker met je muis over zo'n link gaat (a:hover), dan wordt onderstreping aangezet en de kleur van hyperlink zwart gemaakt.

Een speciale positie neemt een hyperlink in waaraan de classe 'active' is toegevoegd. In dat geval is de kleur zwart, de achtergrondkleur wit en krijgt het element boven, links en rechts een grijze rand en aan de onderkant een witte lijn. Dit heeft als effect dat het een tabblad lijkt van de pagina die eronder zit (handig!).

Ook deze hyperlink krijgt een mouseover status (a:hover): de kleur van de tekst wordt dan wit en de achtergrondkleur donkerblauw.

En hoe verder: de hoofdnavigatie
En hoe wordt dan de hoofdnavigatie van de Volkskrant ingericht? Meer hierover in het vervolg op dit artikel.

TIP! Voorbeelden op SmashingMagazine

Op SmashingMagazine vind je een lijst van moderne navigatie voorbeelden. Dit geeft je een goede indruk van wat er zoal kan.

Hoe beter je weet waar je bezoekers op zoeken, des te beter je kunt bepalen of je site wel aansluit bij je doelgroep. Hoe kan je Google Analytics gebruiken om dit uit te zoeken?

Zoekwoorden in Google Analytics
Een van de standaard rapporten van Google Analytics zijn de zoekwoorden. Je vindt ze onder het menu Verkeersbronnen > Zoekwoorden. Hier zie je het overzicht van de afgelopen maand voor Whelp.nl.

De populaire zoekwoorden – wat valt er zoal op?
1) Je ziet dat Joomla Template(s) verreweg het populairst zijn. Ook yousendit, functioneel ontwerp en xampp scoren goed.
2) Wat je ook ziet is dat het niet uitmaakt of je zoekwoorden met hoofd- of kleine letters schrijft. Google groepeert ze bij elkaar.
3) Bezoeker van al deze zoekwoorden samen bekeken 2,36 pagina's. Dat is iets minder dan alle bezoekers van de website samen. Niet zo vreemd als je bedenkt dat deze bezoekers gericht zochten. Juist bij onderwerpen waar veel informatie over te vinden is (zoals Joomla) zul je zien dat bezoekers ook weer eerder vertrokken zijn.
4) Deze informatie is op zich interessant, maar niet verrassend. Meestal weet je wel waar de meeste van je bezoekers voor langs komen.
Maar je kunt het ook anders gebruiken.

Nu de migratie achter de rug is, zijn we er eindelijk aan toe om het oorspronkelijke Plankenkoor template aan te passen, zodat het een Joomla 1.5 template wordt.

De header
We beginnen met de eerste regels van de index.php. Hier staat wat oude code om ongewenste toegang tot deze pagina tegen te gaan. Vervang

door

Header: metatags en titel
Vervolgens gaan we de header aanpassen. Vervang

door

Zoals je ziet is dit een stuk korter! Het grootste deel van je header wordt automatisch aangemaakt. Een paar opmerkingen:
1) Ik voeg een extra tag toe die voorkomt dat in IE zo'n balkje boven een plaatje verschijnt (met extra opties).
2) Ik blijf voorlopig nog even het bestaande stylesheet gebruiken.
3) Ik voeg een extra javascript toe dat zorgt voor de mouseovers in het menu (dit komt van oorsprong uit imageready, vandaar de naam imageready.js).

Description en keywords
De description en keywords metatag zijn standaard gevuld met promotie voor Joomla. Pas deze aan via de backend. Je vindt dit via Globale configuratie > Site. Ik vul het voor nu even zo in:

Als je een menubalk hebt met knoppen, heb je meestal diverse standen van een knop: de gewone stand, een mouseover stand en een stand als de knop actief is. Drie afbeeldingen zou je denken voor drie standen. Je kunt het echter ook met één afbeelding en wat CSS voor elkaar krijgen. Een techniek die je op veel meer plaatsen en voor meer doeleinden kunt toepassen.

Voordelen van het gebruik van een sprite
Het gebruik van een sprite heeft heel wat voordelen:
1) je hoeft maar één afbeelding te onderhouden
2) je hoeft maar één afbeelding in te laden die ook nog eens kleiner is (waardoor je website sneller inlaadt)
3) het ziet er in Internet Explorer beter uit (geen flikkering bij een mouseOver)
4) en je kunt alles met CSS regelen
Dus, hoe werkt het en hoe kan je die zelf maken?

De volgende stap in onze template upgrade is het systeem zoekmachine vriendelijk te maken. Je kunt hiervoor de standaard functionaliteit van Joomla gebruiken, of een plugin. We kiezen voor het laatste.

Wat is er tegen de ingebouwde SEO van Joomla?

Wat betreft zoekmachine optimalisatie blinkt Joomla helaas niet van nature uit. Je kunt via het controle paneel aangeven dat je SEO wilt aanzetten. Dit doe je via Global Configuration > Site > SEO Settings. Je ziet hier drie opties:
1) Search Engine Friendly URLs – Zet deze op ja.
2) Use Apache mod_rewrite – Als je een Apache server hebt kan je deze ook op ja zetten. In dat geval moet je het meegeleverde httaccess.txt bestand hernoemen naar .httaccess en je Apache server herstarten.
3) Add suffix to URLs – Als je dit aanvinkt krijg je de extensie .html aan het eind van elk adres. Dit is niet nodig, maar kan wel als je dit zelf prettiger vindt. Het biedt geen extra voordelen voor zoekmachines.

Ad 1 – Search Engine Friendly URLs aan
Als je alleen de eerste hebt aangezet zul je zien dat de adressen van je website zijn veranderd. Een voorbeeld:
http://localhost/plankenkoor158/index.php?option=com_content&view=article&id=12&Itemid=43
wordt
http://localhost/plankenkoor158/index.php/info-mainmenu-27/over-het-koor-mainmenu-43

Zoals je kunt zien wordt het adres wel wat beter leesbaar en wordt er geen gebruik meer gemaakt van opdrachten na een vraagteken (de querystring). Toch zit er nog veel informatie in die niet echt zoekmachinerlevant (lees zoekmachinevriendelijk) is; woorden als mainmenu en de nummers doen er niet toe. Ook het woord index.php is overbodig. Kortom: dit kan (en moet) beter.