Netters.nl

Dropdown menu's zijn handig. Zeker bij grote sites is het een ideale manier om met weinig klikken toch snel op de plek van bestemming uit te komen. Maar helaas worden deze menu's maar al te vaak opgebouwd door middel van alleen JavaScript. Er wordt niet alleen JavaScript gebruikt voor de functionaliteit van het uitklappen, maar zelfs ook voor het opbouwen van de menu-items zelf. En dat is jammer, aangezien zoekmachines geen JavaScript uitvoeren en zo kun je dus de indexatie van je menu en dus waarschijnlijk zelfs hele delen van je website wel vergeten.

Gelukkig is daar een aantal jaren geleden een goede oplossing voor gevonden door de heren Patrick Griffiths en Dan Webb. Deze idee is uitgebracht onder de naam Suckerfish Dropdowns. Een jaar later kwam er een verbeterde versie uit onder de naam Son of Suckerfish en is nu een veel gebruikt menu. De kracht van het suckerfish menu is dat het een zo goed als puur CSS menu is. Er zit alleen een klein beetje JavaScript bij omdat Internet Explorer (t/m versie 6) de :hover pseudo-class niet volledig ondersteund.

Na een artikel over HTML voor beginners is het nu dan tijd voor een artikel over CSS voor beginners. We behandelen hierin kort wat CSS is, waarom je CSS gebruikt, hoe je het gebruikt en uiteraard dit alles vergezeld van voorbeelden, zodat je er lekker mee aan de slag kunt.

Wat is CSS

CSS staat voor Cascading StyleSheets. Kort gezegd bepaal je met CSS de opmaak van je HTML pagina. De HTML is voor de structuur (kopjes, paragrafen, lijsten etc.) en de CSS is voor het uiterlijk. Je kunt dus de kleur, grootte, lettertype van je kopjes e.d. bepalen.

Noot: Deze serie over CSS selectors is afkomstig van 456bereastreet.com en is met toestemming van Roger Johansson vertaald. Hier en daar zal ik ongetwijfeld wat afwijken van de vertaling, omdat dit het volgens mij wat duidelijker maakt. Om dezelfde reden zal ik typische ‘selector-termen’ ook niet altijd vertalen.

Noot: Deze serie over CSS selectors is afkomstig van 456bereastreet.com en is met toestemming van Roger Johansson vertaald. Hier en daar zal ik ongetwijfeld wat afwijken van de vertaling, omdat dit het volgens mij wat duidelijker maakt. Om dezelfde reden zal ik typische ‘selector-termen’ ook niet altijd vertalen.

Noot: Deze serie over CSS selectors is afkomstig van 456bereastreet.com en is met toestemming van Roger Johansson vertaald. Hier en daar zal ik ongetwijfeld wat afwijken van de vertaling, omdat dit het volgens mij wat duidelijker maakt. Om diezelfde reden zal ik typische ‘selector-termen’ ook niet altijd vertalen.

» Direct naar de code? «

Altijd het gevoel dat je qua design vastloopt, omdat je beperkt bent tot de 'standaard' lettertypes. Of ben je Arial en Verdana gewoon een keer zat? Dan is sIFR een leuk en goed alternatief. Je kunt dan EN mooie lettertypes gebruiken, zonder de beperking van het systeem van de gebruiker, EN de semantische headings, zoals h1 en h2, behouden.

Wat is het box model

Om het heel kort te zeggen: het box model beschrijft de manier waarop breedte, padding, borders en margins door een browser geïnterpreteerd moeten worden. Elk html element op de pagina heeft hiermee te maken.