Menu - Dynamisch horizontaal
Omdat de afdeling Menu's te groot werd, heb ik die gesplitst, en dit is een van de subpagina's.
Op deze pagina vind je dynamische horizontale menu's. Met dynamisch bedoel ik dat ze op een of andere manier een submenu openen. Aantal knoppen, vorm, en dergelijke kunnen natuurlijk worden aangepast.
Alle menu's gebruiken alleen css en html, geen JavaScript en dergelijke. Internet Explorer 6 ondersteun ik niet meer. Oudere voorbeelden werken mogelijk nog wel in die browsers, dit staat steeds bij elk voorbeeld vermeld.
Het invoegen vanuit een apart bestand van eenzelfde menu op meerdere pagina's staat bij Tekst - Invoegen.
Je kunt 'n werkend voorbeeld bezoeken door op een van de kopjes in de tekst hieronder te klikken, of op een van de thumbnails. Als je 'n voorbeeld nog niet hebt bezocht, is het kopje zwart en staat er 'n zwart vraagteken op de thumbnail. Na bezoek is de kop paars en staat er 'n groen vinkje op de thumbnail. Als je over de thumbnail hovert, verschijnt een afbeelding van het voorbeeld.
Linksonder
Bij hoveren over een ingang opent een submenu. Het diepste submenu is vier niveaus diep. Afhankelijk van de plaats in de menubalk openen de menu's naar links of naar rechts. Het 'spoor' door de submenu's is te volgen doordat de bovenliggende ingangen verkleuren.
Footer links
Als je met de cursor over een van de witte vlakken hovert, opent een rijtje met links of een submenu met een nieuwe rij witte vlakken. Als je vervolgens over 'n link hovert, opent een afbeelding. Bij klikken op 'n link opent de bijbehorende pagina. De weg door het menu is te volgen omdat hoger liggende ingangen verkleuren.
Footer tweede van links
Bij hoveren over een ingang opent recht naar beneden een submenu. De ingang waarover wordt gehoverd en de bijbehorende hoofdingang verkleuren.
Over de site
Alle voorbeelden zijn te downloaden als zip-bestand. De zip bevat de code van het werkende voorbeeld met alle gebruikte plaatjes en dergelijke, zodat het gedownloade voorbeeld precies hetzelfde is als dat op de site. Verder zit er een uitgebreide uitleg in pdf-formaat bij.
Hoe je het voorbeeld precies kunt aanpassen verschilt van model tot model en zal meestal enig denkwerk vereisen. Als je met dit soort modellen wilt werken en je wilt die aanpassen, is het beslist nodig dat je je 'n beetje verdiept in html en css.
Alles op deze site kan vrij worden gebruikt. Je gebruikt het wel op eigen risico: als er ergens fouten in zitten, ben ik daar niet verantwoordelijk voor en ook niet voor eventueel daardoor aangerichte schade in welke vorm dan ook. Een link naar http://www.css-voorbeelden.nl is niet verplicht, maar wordt wel gewaardeerd.
De voorbeelden zijn bedoeld om te laten zien wat de mogelijkheden van css zijn. Je kunt ze (volledig) aanpassen aan je eigen smaak en wensen. Laat je dus niet afschrikken door de door mij gebruikte kleuren, maten, en dergelijke.
Ooit stond hier een overzicht van browsers, resoluties, enz., waarin is getest. Inmiddels is het aantal combinaties van dat soort dingen dermate groot, en het verandert zo snel, dat een overzicht op deze plaats zinloos is. In de uitleg bij elk voorbeeld staat onder Getest in een uitgebreid overzicht van combinaties, waarin dat voorbeeld is getest. Eventuele problemen staan ook in die uitleg.
Er is in de regel getest op de nieuwste versies van Opera, Safari, Google Chrome, Firefox en Internet Explorer. Van deze laatste zijn in de regel ook oudere versies getest. Met verschillende zoomstanden en - voor zover relevant - met verschillende lettergroottes.
In de regel is ook getest op toegankelijkheid met programma's als Lynx, WebbIE, Fangs Screen Reader Emulator en/of Jaws.
Iets gevonden waar je wat aan hebt? Mooi. Als je je waardering wilt uiten, maak dan een donatie over aan War Child Nederland, een organisatie die kinderen uit oorlogsgebieden helpt hun trauma's te verwerken. Of - nog beter - wordt donateur:
