Menu's in html met CSS
In deze pagina geef ik een aantal voorbeelden van menu's. De markup van de menu's is steeds weer gedaan met lijsten in html. De vormgeving is beschreven met css
Voor de markup kun je de paginabron bekijken. De stijlen staan in een apart stijlblad, in het gedeelte dat begint met
/* VOORBEELDMENU's VANAF HIER --> */
/* deze methode gaat er van uit dat je je menu's in de markup van je pagina's hebt
gestructureerd als lijsten, dus we beginnen met het uiterlijk van de lijst zelf: */
Ik begin met een eenvoudig menu met slechts één niveau. Dat bouw ik uit naar een menu met meerdere niveaus, waarbij de onderliggende niveaus als popout verschijnen in grafische browsers (behalve bij Internet Explorer).
Verticaal menu
De voorbeelden in deze pagina zijn menu's, waarvan de items onder elkaar worden geplaatst, zodat je een verticaal menu krijgt. Over horizontale menu's, verderop meer.
Hetzelfde menu, maar dan met uitklap-effect (werkt niet in Internet Explorer, maar werkt uitstekend in Gecko browsers, zoals Mozilla, Netscape of Firebird):
Horizontaal menu
Veel mensen vragen om horizontale menu's eventueel vormgegeven als tabbladen. Ook dat kan met CSS en een paar plaatjes op de juiste elementen geplaatst, vrij eenvoudig worden bereikt. Het werkt precies hetzelfde als de menu's die hierboven als voorbeeld zijn gegeven.
De basis
Wederom eerst in de markup een lijst maken van de verschillende menu items. De stijlen voor de links en het hover effect zijn niet anders, het enige verschil is, dat je het menu een vaste breedte geeft (aantal menu items maal de breedte per menu item) en dat je de menu items vervolgens float om ze horizontaal, na elkaar te positioneren.
Zie het style sheet, bij 'horizontaal', voor de verdere details.
Tabbladen
Voor een uitgewerkt voorbeeld die tabbladen suggereren of simuleren: zie de pagina over tabellen.
Check ook even de Test directory. Daar bevinden zich verschillende test- en voorbeeldpagina's waarvan er sommige relevant kunnen zijn bij het onderwerp van deze pagina.
Als mijn site je werkelijk bevalt en ik heb je met mijn voorbeelden of testpagina's en de uitleg wat kunnen helpen, overweeg dan een kleine contributie, zodat ik de kosten en moeite in deze site kan blijven steken. Door een kleine bijdrage helpt u mij u te helpen, en anderen. Bezoekt u alstublieft mijn pagina over contributies en donaties. Dank u,