Maak je eigen context-menu
Als je op de rechter muisknop drukt verschijnt er -meestal- een contextmenu. Op deze bladzijde is dat een ander menu dan
je gewend bent. Hier staat beschreven hoe je dat aanpakt.
Op een aanraakscherm tik je ergend in de teksten houdt je even vast.
De code staat onderaan deze bladzijde. Je kunt hem downloaden voor eigen gebruik.
- De informatie op deze bladzijde is een vrije bewerking van een script dat is te vinden op
Dynamic Drive. Een paar kleine bugjes zijn gefikst en de inbouw
in je site is wat eenvoudiger gemaakt.
De oorspronkelijke versie van de code is nog beschikbaar op Dynamic Drive als "legacy code" (erfenis, nalatenschap). Die werkt echter niet meer met de meeste browsers. De versie die hier wordt gebruikt werkt goed.
- De code bestaat uit een <style>-block in de <head>, en een stuk HTML-code plus JavaScript, die
allebei in de <body> moeten worden geplaatst.
- Het <style>-block wordt gebruikt om het context-menu op te maken. Een deel daarvan kan worden aangepast aan je eigen smaak. Een paar dingen mag je niet aanpassen; dat staat er duidelijk bij vermeld. Zie onderaan de bladzijde.
- Het <style>-block bevat de classes skin0 en menuitems. Met skin0 wordt het hele menu opgemaakt, behalve de witruimte vóór en na elk menu item. Dat laatste wordt geregeld met menuitems.
- Opmerking: Als je naast dit <style>-block ook nog andere CSS-opmaak gebruikt, bijvoorbeeld
in een gelinkt style-sheet, kan het gebeuren dat de browser sommige instellingen negeert. Als dat gebeurt moet je ook andere
<style>-definities aanpassen, om 'conflicten' te voorkomen.
- De HTML-code in de <body> bestaat uit een serie <div>-tags, waarmee het menu wordt opgebouwd. Ze moeten direct onder de <body>-tag worden gezet.
- De structuur van de <div>-tags ziet er als volgt uit:
<div id="ie5menu" class="skin0" event-handlers style="display:none">
<div class="menuitems" url="....">Tekst</div>
</div>
<div class="menuitems" url="....">Tekst</div>
<hr>
<div class="menuitems" url="...." target="....">Tekst</div> - Er is één <div>-tag met id="ie5menu", en class="skin0".
Dit is het menu zelf. De afmetingen, de kleur, enz. worden geregeld in de class skin0, die in de <head>
staat.
Deze tag bevat ook de event-handlers onMouseOver, onMouseOut en onClick, die functions aangeroepen om het menu zichtbaar te maken, te verbergen en/of de links te activeren. Deze functions staan in de file contextmenu.js
Ook is er een style-attribuut om het menu te verbergen tot het wordt aangeroepen. - Voor elk menu-item is er een <div>-tag met id="menuitems". Deze heeft de attributen url (verplicht) en target (optioneel). De Tekst wordt in het menu getoond.
- Het attribuut url bevat de URL van de link die je wilt maken. Alle mogelijkheden die je met href="..." in een <A>-tag kunt gebruiken, kun je hier ook toepassen.
- Het attribuut target gebruik je als je de link wilt openen in een ander venster. Alle
mogelijkheden die je met target="..." in een <A>-tag kunt gebruiken, kun
je hier ook toepassen.
Als je target weglaat wordt de pagina in het actieve venster of frame geopend.
- Voor het maken van een horizontale streep wordt een <HR>-tag gebruikt. Die kun je opmaken met CSS als je
dat wilt.
- De JavaScript functions staan in de file contextmenu.js. Die file moet direct onder de hiervoor beschreven <div>-tags worden gezet. Deze file behoeft niet te worden gewijzigd.
- De code van het context-menu op deze pagina staat onderaan deze bladzijde. Die moet je dus helemaal aanpassen op je eigen web-pagina.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code van het voorbeeld ziet er als volgt uit:
(Zet dit in de <HEAD>).
<style>
/* Context menu Script- © Dynamic Drive (www.dynamicdrive.com) Last updated: 01/08/22
For full source code and Terms Of Use, visit http://www.dynamicdrive.com
Improvements by Ben Boukes © 2010-2018 */
.skin0 {
/* Te wijzigen */
width:150px; border:2px solid navy; background-color:#FFFFD8;
font-family:Verdana, Arial, Helvetica, sans-serif; color:black;
line-height:16px; font-size:10pt;
cursor:default;
/* Deze drie dingen niet veranderen */
position:absolute; z-index:100; visibility:hidden;
}
.menuitems { /* Te wijzigen */
padding-left:5px;
padding-right:5px;
}
</style>
(Zet dit helemaal bovenaan in de <BODY>)
Om praktische redenen zijn sommige tags over meerderr regels verdeeld. In je eigen pagina moet dat
op één regel staan!
<a id="Top"></a>
<div id="ie5menu" class="skin0" onMouseover="highlightie5(event)"
onMouseout="lowlightie5(event)" onClick="jumptoie5(event)"
style="display:none">
<div class="menuitems" url="#Top">Top van de pagina</div>
<div class="menuitems" url="#Bottom">Einde van de pagina</div>
<hr>
<div class="menuitems" url="surfhulp.htm"
target="NewBen">Links</div>
<div class="menuitems" url="JavaScript:SitemapC()">Site map</div>
<hr>
<div class="menuitems" url="https://www.webmasterij.nl/fractals"
target="NewBen">Fractals</div>
<div class="menuitems" url="https://www.webmasterij.nl/fotoalbum"
target="NewBen">Mijn Fotoalbum</div>
</div>
<script src="contextmenu.js"></script>
(Zet dit helemaal onderaan in de <BODY>)
<a id="Bottom"></a>
Downloaden:
Druk op de knop:
File: voorb216.zip, 1772 bytes.
Opmerking:
De mogelijkheid om zelf attributen toe te voegen aan tags wordt beschreven in het item "Zelf attributen in tags maken en gebruiken".
