sitemap | terug naar het html5 referentie - standaard - overzicht
De drie linkjes hierboven staan er eigenlijk "voor spek en bonen". Elke link op deze pagina wordt bij een right-click voorzien van een context menu. De html5-variant heb ik vervangen door een stukje javascript (wat helemaal cross-browser werkt). Als html5 "verder" is, wordt de code op deze pagina er bij geplaatst. Plaats de stylesheet in de head-sectie, en het stukje javascript, zo laag als mogelijk, in de body-sectie.
In dit voorbeeld wordt href = target.href aan het menu "geknoopt"; maar ik neem aan dat duidelijk is dat je elke gewenste functie hiervoor in de plaats kan zetten. Je kan ook zoveel li's toevoegen als je wilt (in de ul met de class "context_menu") en aan elke link een ander id geven.
<style type="text/css">
.context_menu{
margin:0;
padding:0 0 0.2em 0;
list-style-type:none}
.context_menu a{
background:#ccc;
text-decoration:none;
color:#000;
font-weight:bold;
padding:0.4em 0.4em 0.3em 0.4em;
font-size:80%}
</style>
<script>
/*global document: false */
/*global window: false */
function $(id) {'use strict'; return document.getElementById(id); }
var vervanging = false,
scrollTop,
scrollLeft,
mouse_over_context = false,
geen_context = false,
target,
context_menu_inhoud = $('inhoud_context_menu');
function mouse_down(event) {
'use strict';
if (geen_context || mouse_over_context) {return; }
if (event === undefined) {event = window.event; }
target = event.target !== undefined ? event.target : event.srcElement;
if (event.button === 2 && target.tagName.toLowerCase() === 'a') {vervanging = true; } else if (!mouse_over_context) {context_menu_inhoud.style.display = 'none'; }
}
function laat_context_zien(event) {
'use strict';
if (geen_context || mouse_over_context) {return; }
if (event === undefined) {event = window.event; }
target = event.target !== undefined ? event.target : event.srcElement;
if (vervanging) {$('naar_link').href = target.href;
if (document.body.scrollTop) {scrollTop = document.body.scrollTop; } else {scrollTop = document.documentElement.scrollTop; }
if (document.body.scrollLeft) {scrollLeft = document.body.scrollLeft; } else {scrollLeft = document.documentElement.scrollLeft; }
context_menu_inhoud.style.display = 'none';
context_menu_inhoud.style.left = event.clientX + scrollLeft + 'px';
context_menu_inhoud.style.top = event.clientY + scrollTop + 'px';
context_menu_inhoud.style.display = 'block';
vervanging = false;
return false;
}
}
function init_context_menu() {
'use strict';
context_menu_inhoud.onmouseover = function () { mouse_over_context = true; };
context_menu_inhoud.onmouseout = function () { mouse_over_context = false; };
document.body.onmousedown = mouse_down;
document.body.oncontextmenu = laat_context_zien;
}
init_context_menu();
</script>