In windows kennen we de optie menu’s die verschijnen als je ergens op klikt met je rechter muisknop. Hier laat ik zien hoe je deze functionaliteit kunt aanbieden in een webpagina.

Nadeel van een right-click menu op een webpagina is wel dat mensen niet verwachten dat er een menu beschikbaar is als je met je rechter muisknop op onderdelen van een webpagina klikt. Als je een windows applicatie omzet naar een moderne web applicatie is het mooi dat je deze functionaliteit kunt behouden. Ook kun je deze optie goed gebruiken om functies makkelijk beschikbaar te maken waar je ook op een andere manier bij kunt zonder er apart heen te navigeren. Outlook.com is de enige web app waarvan ik weet dat het rechter muisknop menu veel gebruikt wordt.

Hieronder staat alles wat je nodig hebt om 1 of meerdere context menus toe te passen op je webpagina. Op de plaats waar je het context menu wilt toepassen voeg je een data attribuut toe aan het html element. Het maakt niet uit of dit een enkel element is zoals een <a href>, of een <div> met meerdere elementen.

<div data-contextmenu=”demo-menu1″>

De waarde “demo-menu1” is het id van de het menu. Het menu zelf zet je bij voorkeur aan het einde van de pagina, maar voor de werking maakt dit niet uit.

<div id=”demo-menu1″ class=”context-menu”>
<ul>
<li><a href=”https://netwerk.mjd.nl/rdweb/webclient”>Web app</a></li>
<li><a href=”~/Documenten/Netwerk%20extern.rdp” target=”_blank”>Remote desktop</a></li>
<li class=”separator”></li>
<li><a href=”https://netwerk.mjd.nl/rdweb”>Netwerk Extern</a></li>
</ul>
</div>

Heb je verschillende context menus nodig, dan maak je de menus zoals hierboven elk met een eigen inhoud en een eigen id. Wil je één menu op verschillende plaatsen op je pagina gebruiken, dan hoef je dit menu maar 1x te maken en gebruik je het data-contextmenu attribuut op de elementen waar je het menu wilt gebruiken.

.context-menu {
    display: none;
    height: auto;
    background-color: whitesmoke;
    box-shadow: 0 0 10px 0 #ccc;
    position: absolute;
    font-family: "Times New Roman", Serif
}

    .context-menu ul {
        list-style: none;
        padding: 5px 0;
        margin: 0;
        border: solid 1px #ccc;
    }

        .context-menu ul li:not(.separator) {
            cursor: pointer;
            padding: 3px 10px;
        }

        .context-menu ul li:hover {
            background-color: #ccc;
        }

    .context-menu a:link, 
    .context-menu a:visited {
        text-decoration: none;
        color: black;
    }

    .context-menu .separator {
        height: 1px;
        background-color: black;
    }

document.addEventListener("contextmenu", function (event) {
	var hasContextMenu: HTMLElement = (<HTMLElement>event.target).closest('[data-contextmenu]')
	if (hasContextMenu === null) return;

	var menuName = hasContextMenu.getAttribute('data-contextmenu');
	var menuDiv = this.getElementById(menuName);
	if (menuDiv === null) return;
	
	menuDiv.style.left = event.clientX + 'px';
	menuDiv.style.top = event.clientY + 'px';
	menuDiv.style.display = 'block';

	event.preventDefault();
	return false;
});

function hideContextMenu() {
	var elms = document.getElementsByClassName('context-menu');
	Array.prototype.forEach.call(elms, function(elm: HTMLElement) {
		elm.style.display = 'none';
	});
}
document.addEventListener('click', function (event) {
	hideContextMenu();
});
document.addEventListener('keypress', function (event) {
	if (event.key.length>=2 && event.key.substr(0,3) === "Esc") {
		hideContextMenu();
    }
});

document.addEventListener("contextmenu", function (event) {
    var hasContextMenu = event.target.closest('[data-contextmenu]');
    if (hasContextMenu === null) return;

    var menuName = hasContextMenu.getAttribute('data-contextmenu');
    var menuDiv = this.getElementById(menuName);
    if (menuDiv === null) return;

    menuDiv.style.left = event.clientX + 'px';
    menuDiv.style.top = event.clientY + 'px';
    menuDiv.style.display = 'block';
    event.preventDefault();
    return false;
});

function hideContextMenu() {
    var elms = document.getElementsByClassName('context-menu');
    Array.prototype.forEach.call(elms, function (elm) {
        elm.style.display = 'none';
    });
}
document.addEventListener('click', function (event) {
    hideContextMenu();
});
document.addEventListener('keypress', function (event) {
    if (event.key.length >= 2 && event.key.substr(0, 3) === "Esc") {
        hideContextMenu();
    }
});

<body>
..
..
  <div data-contextmenu="menu-telewerken">
....
  </div>
..
..
  <div id="menu-telewerken" class="context-menu">
    <ul>
      <li><a href="https://www.stichtingvlechter.nl">Stichting Vlechter!</a></li>
      <li class="separator"></li>
      <li><a href="https://www.mjd.nl" target="_blank">Stichting MJD</a></li>
      <li><a href="https://www.torion.nl" target="_blank">Stichting Torion</a></li>
    </ul>
  </div>
..
  <script src="~/js/ContextMenu.js"></script>
</bode>