Dit menu is een goed voorbeeld van hoe progressive enhancement werkt. In een stokoude browser zonder graphics of zelfs maar zonder een vorm van CSS, zal de navigatie probleemloos zijn werk doen. In IE6 werkt dit menu zonder een enkele css-hack te hoeven gebruiken; en met nog oudere versies van willekeurig welke browser dan ook wordt alles volgens "het boekje" uitgevoerd. In het "todo-lijstje" van de code van dit menu staan alle CSS3 mogelijkheden die nu voorhanden zijn. Als er ergens eens een "vrij uurtje" is, zullen we dit menu eens flink onder handen nemen. Vergeet niet dat dit menu al zijn werk doet vanaf de begindagen van de CSS (zelfs nog voor de tijd van IE5..). Als het zover is zullen we onder op de pagina hiervan melding maken in een update-tekst. Kom dus maar eens af en toe terug op deze pagina.
De code van dit hover-menu zit in deze file. Een leuke eigenschap van de code is dat je met alleen deze code al in een browser het menu te zien krijgt. Je hebt geen doctype body- of header-tag nodig om deze procedure "te laten draaien". Probeer het voor de grap maar eens uit. Maar om alles toch maar op de normale manier te doen, raad ik je aan om de stylesheet en het Javascript in de head-tag van jouw pagina te plaatsen, en de divs in de body-sectie. Verander de verwijzingen en de tekst in iets wat je op jouw eigen site kan gebruiken. Tot slot wijs ik nog even op de variabele "snelheid" die bovenin het Javascript staat. Als je de waarde kleiner maakt zal het transition-effect van de help-tekst sneller "opgloeien".
De titel van deze pagina is: maak een hover menu met CSS en JavaScript.
De sleutelwoorden zijn : hover, menu, css en javascript.
De omschrijving is: "Een hover menu met een fade transition effect beschrijving".