Een submenu maken:
meer knoppen voor je website
Hoe maak ik een drop-down menu?
Subknoppen toevoegen aan mijn website: hoe doe ik dat?
De knoppenbalk aan de linker- of bovenkant van je website biedt niet altijd genoeg ruimte voor alle knoppen die je voor je website in gedachten had.
Of misschien wil je een visuele onderverdeling maken tussen verschillende soorten pagina's en onderscheid maken tussen hoofd- en subknoppen.
In beide gevallen kunnen subknoppen in de vorm van een drop-down menu uitkomst bieden.
Op deze pagina lees je hoe je subknoppen voor je website aanmaakt met behulp van het script
anylinkvertical van
Dynamicdrive.com. Op de website van Dynamicdrive staat een voorbeeld van dit drop-down menu,
zodat je kunt zien wat er gaat gebeuren als je dit script gebruikt. (Er is ook een videotutorial beschikbaar over dit onderwerp.)
Ik beschrijf hier stap voor stap hoe ik dit script heb gebruikt voor
Model I van mijn modellen (het model linksboven).
(NB: Het model is inmiddels wat gemoderniseerd, maar het principe blijft hetzelfde.)
Ik wil bijvoorbeeld onder de knop 'Hobby's' (de vierde knop van boven), een onderverdeling maken in
'fotograferen', 'tennissen' en 'lezen'. Als ik met mijn muis over de knop 'Hobby's' beweeg, moet er een drop-down menu verschijnen
met links naar deze drie subpagina's. Dat doe ik op de volgende manier:
- Om te beginnen ga ik naar de website van
Dynamicdrive.com,
waar ik op de tekst 'Select All' klik (onder Step 1).
Ik kopieer de geselecteerde tekst (Ctrl-C) en plak die in zijn totaliteit in de head van mijn homepage.
(De head van een pagina is het gedeelte bovenaan elke pagina, tussen de codes
<head> en </head>.
Ik plak het gekopieerde gedeelte net vóór de eindcode
</head>.)
-
Om nu de drie subknoppen te maken ga ik op zoek naar de regel met de tekst
//Contents for menu 1. Daaronder zie ik vijf regels staan, genummerd van [0] tot en met [4].
Dit zijn de links naar de verschillende pagina's die deel gaan uitmaken van het drop-down menu.
Ik haal er twee weg, want ik wil maar drie subknoppen maken onder de knop 'Hobby's'.
In de drie regels die overblijven vervang ik de bestaande links door links naar mijn subpagina's.
Dus in plaats van menu1[0]='<a href="http://www.javascriptkit.com">JavaScript Kit</a>'
maak ik ervan: menu1[0]='<a href="fotograferen.html">fotograferen</a>'.
Op dezelfde manier maak ik links aan voor tennissen en lezen.
-
Ik wil ook nog iets veranderen aan het uiterlijk van de knoppen van het drop-down menu. Standaard hebben deze een lichtgroene achtergrond,
zoals je op Dynamicdrive.com kunt zien, en veranderen ze in wat feller groen als je er met je muis overheen beweegt.
Ik wil zelf een witte achtergrond, die in lichtoranje verandert.
Daarvoor ga ik op zoek naar het blokje #dropmenudiv (vrij bovenaan in het gedeelte dat je in de <head> hebt geplakt),
en daarin verander ik de kleurcode achter background-color van #E3FFB0 in #FFFFFF (wit).
Daarna zoek ik het blokje op met de tekst #dropmenudiv a:hover{ /*hover background color*/
en hier verander ik de background color van #C7FF5E in #FAAC58 (lichtoranje).
Klik hier voor een tool waarmee je kleurcodes vaststelt.
- Nu moet ik de Hobby-knop zelf nog aapassen. Standaard ziet deze er als volgt uit:
<a href="index.html" id="knop3">hobby's</a>.
Aan deze link voeg ik de volgende code toe:
onMouseover="dropdownmenu(this, event, menu1, '165px')" onMouseout="delayhidemenu()"
De link komt er dan zo uit te zien:
<a href="index.html" id="knop3" onMouseover="dropdownmenu(this, event, menu1, '165px')" onMouseout="delayhidemenu()">hobby's</a>
- Wil ik nog een tweede drop-down menu maken, dan ga ik op dezelfde manier te werk, alleen verander ik dan 'menu1' in 'menu2'
in de linkcode van de hoofdknop waarvoor ik een drop-down menu wil maken. En verder zoek ik het regeltje op met de tekst
//Contents for menu 2, and so on en in de regels die daaronder staan
vervang ik de voorbeeld-URL's door de URL's van de pagina's waarnaar ik wil linken.
-
Ten slotte moet ik alle veranderingen die ik zojuist heb aangebracht in mijn homepage,
ook aanbrengen in de rest van mijn html-pagina's. Dus in al mijn pagina's komt een stuk code in de <head> te staan,
en ook de wijziging in de knoppenbalk breng ik op alle pagina's aan.
Ben ik daarmee klaar, dan upload ik alles naar mijn server en kijk ik of ik tevreden ben met
het resultaat.
Omdat je pagina's op deze manier erg lang worden, kun je de code die nu in de <head> van je pagina's staat,
ook ergens anders neerzetten. Dat maakt je html-pagina's wat overzichtelijker. Als je dat wilt doen, ga je zó te werk:
- Haal het eerste stuk van de gekopieerde code van Dynamicdrive.com (het gedeelte tussen
<style type="text/css"> en </style>) weg
en plak het in je stylesheet (als je een van mijn modellen gebruikt, is dat het bestand met de naam 'basis.css').
De regels <style type="text/css"> en
</style>
haal je helemaal weg; die hoeven niet in je css-bestand opgenomen te worden.
Heb je dit gedaan, dan sla je je css-bestand op en sluit je het af.
Het stuk dat je uit je homepage hebt weggehaald en in je css-bestand geplakt,
verwijder je het ook uit al je andere pagina's (je hoeft het natuurlijk maar eenmaal in je css-bestand te plakken).
- Selecteer nu de rest van de code die je in de head van je html-pagina's had geplakt, knip het eruit, en plak het in
een nieuw bestand, dat je de naam 'submenu.js' geeft.
Dit stuk begint met /******* en eindigt met clearTimeout(delayhide) }.
De bovenste regel (<script type="text/javascript">)
en de onderste regel (</script>) laat je in de head staan
en daaraan voeg je een link toe naar het bestand submenu.js. Dit gedeelte komt er nu zo uit te zien:
<script type="text/javascript" src="submenu.js"></script>
Hetzelfde doe je bij de overige pagina's van je website (dus je haalt alle scriptcode weg, en je zet er de bovenstaande regel voor in de plaats).
- Daarna upload je al je gewijzigde bestanden naar je server, en ook het bestand submenu.js dat je had aangemaakt,
en controleert weer of je tevreden bent met het resultaat.
Het script dat hier wordt gebruikt, plaatst de knoppen van het drop-down menu vanzelf iets naar rechts en naar beneden.
Wil je niet dat het drop-down menu naar rechts wordt verplaatst, dan moet je wat veranderen in het script.
Je zoekt de volgende regel op:
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+horizontaloffset+"px"
en vervangt die bijvoorbeeld door:
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+horizontaloffset-55+"px"
(Je moet even spelen met de waarde '55', net zolang tot je tevreden bent.)
Ook kun je ervoor zorgen dat de knoppen uit het drop-down menu zich iets verder naar beneden verplaatsen.
Je zoekt dan de volgende regel op:
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px"
en vervangt die door:
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+20+"px"
Ook in dit geval kun je de waarde '20' aanpassen, zodat het menu nog verder of juist minder ver naar beneden verschijnt.
Dit heb ik toegepast op Model IV
(beweeg met je muis over de knop 'hobby's' in de horizontale balk; je ziet dan een drop-down menu verschijnen).
Van knoppen voor je website terug naar de homepage