Maison >interface Web >tutoriel CSS >Comment ajouter un menu contextuel personnalisé à une page Web ?
Comment ajouter un menu contextuel personnalisé à une page Web ?
- WBOYavant
- 2023-09-15 23:29:021002parcourir
De nos jours, lorsque vous cliquez avec le bouton droit sur une page Web, une liste apparaîtra avec quelques options et fonctionnalités. Ce menu contextuel est également appelé menu contextuel, qui est le menu contextuel par défaut fourni par le navigateur. Les éléments de cette liste de menu varient selon les navigateurs. Certains navigateurs offrent plus de fonctionnalités, tandis que d’autres proposent des fonctionnalités limitées.
Mais voici un moyen d'ajouter un menu contextuel personnalisé ou un menu contextuel sur vos pages Web, vous pouvez ajouter autant d'options que vous le souhaitez. Mais avant de pouvoir ajouter un menu contextuel personnalisé, vous devez modifier le comportement par défaut du clic droit sur les pages Web, ce qui ouvre le menu contextuel par défaut. L'ajout d'un menu contextuel personnalisé implique les deux étapes suivantes :
Modifiez le comportement par défaut d'affichage du menu contextuel par défaut.
Ajoutez notre propre menu contextuel personnalisé et affichez-le sur la page Web avec un clic droit de la souris.
Comprenons maintenant les deux étapes ci-dessus en détail, étape par étape, à travers des exemples de code réels.
Supprimer ou masquer le menu contextuel par défaut
Afin d'afficher notre menu contextuel personnalisé lors d'un clic droit sur une page Web, nous devons d'abord supprimer ou masquer le menu contextuel par défaut en attribuant une fonction contenant la méthode preventDefault() à l'événement document.oncontextmenu le comportement par défaut du clic droit, qui appelle cette fonction lorsque l'utilisateur clique avec le bouton droit sur la page Web.
Discutons de l'implémentation réelle du comportement par défaut qui empêche le masquage du menu contextuel par défaut.
Étapes
Étape 1 − Dans la première étape, nous allons créer un document HTML et créer une page Web pour tester notre code.
Étape 2 - Dans cette étape, nous ajouterons l'événement oncontextmenu dans le document HTML car le menu apparaîtra lors d'un clic droit sur la page Web entière.
Étape 3 - Dans la dernière étape, nous définirons une fonction JavaScript avec la méthode PreventDefault() ou renverrons l'instruction false ; pour empêcher l'apparition du menu contextuel par défaut.
Exemple
L'exemple ci-dessous illustrera comment modifier le comportement par défaut du menu contextuel par défaut et le masquer−
<html>
<body>
<div style = "background-color: #84abb5; color: white; height: 150px; text-align: center;">
<h2>It is the Demo web page for testing. </h2>
</div>
<script>
document.oncontextmenu = hideRightClickMenu;
function hideRightClickMenu(event) {
event.preventDefault()
// OR
// return false;
}
</script>
</body>
</html>
Dans l'exemple ci-dessus, nous avons vu comment supprimer ou masquer la fonctionnalité du menu contextuel par défaut lors d'un clic droit sur une page en attribuant une fonction à l'aide de la méthode preventDefault().
Voyons maintenant comment ajouter un menu contextuel personnalisé et le rendre visible lors d'un clic droit sur la page.
Étapes
Étape 1 - Dans la première étape, nous allons créer une liste d'éléments qui doivent être affichés dans le menu contextuel et la garder affichée : Aucun par défaut, elle ne sera visible que si vous faites un clic droit sur la page.
Étape 2 - Dans la prochaine étape, nous utiliserons l'élément
-
Étape 3 - Dans la dernière étape, nous ajouterons la fonctionnalité JavaScript au menu personnalisé pour l'afficher sur la page Web après que l'utilisateur ait cliqué avec le bouton droit sur la page.
Exemple
Les exemples suivants illustreront comment empêcher l'affichage du menu contextuel par défaut et comment ajouter et afficher un menu contextuel personnalisé −
<html>
<head>
<style>
#customContextMenu {
position: absolute;
background-color: #84abb5;
color: white;
height: 150px;
width: 100px;
text-align: center;
}
.menuItems {
list-style: none;
font-size: 12px;
padding: 0;
margin: 0;
}
.menuItems .items { padding: 5px; border-bottom: 1px solid #e6d4b6;}
.menuItems .items:last-child { border: none;}
.menuItems .items a {text-decoration: none; color: white;}
</style>
</head>
<body>
<div style = "background-color: green; color: white; height: 150px; text-align: center;">
<h2> Add a custom right-click menu to a webpage </h2>
<p> Please right click to to see the menu </p>
</div>
<div id = "customContextMenu" style = "display: none;">
<ul class = "menuItems">
<li class = "items"><a href = "#"> Menu Item-1 </a></li>
<li class = "items"><a href = "#"> Menu Item-2 </a></li>
<li class = "items"><a href = "#"> Menu Item-3 </a></li>
<li class = "items"><a href = "#"> Menu Item-4 </a></li>
<li class = "items"><a href = "#"> Menu Item-5 </a></li>
<li class = "items"><a href = "#"> Menu Item-6</a></li>
</ul>
</div>
<script>
// hiding the menu on click to the document
function hideCustomContextMenu() {
document.getElementById('customContextMenu').style.display = "none";
}
// toggling the menu on right click to the page
function showCustomContextMenu(event) {
event.preventDefault();
var myContextMenu = document.getElementById('customContextMenu');
if (myContextMenu.style.display == "block") {
myContextMenu.style.display = "none";
}
else {
myContextMenu.style.display = "block";
myContextMenu.style.left = event.pageX + "px";
myContextMenu.style.top = event.pageY + "px";
}
}
document.onclick = hideCustomContextMenu;
document.oncontextmenu = showCustomContextMenu;
</script>
</body>
</html>
Dans cet exemple, nous masquons le menu contextuel par défaut et affichons notre propre menu contextuel créé lors d'un clic droit sur la page, à la position du curseur lors du clic.
Conclusion
Dans cet article, nous avons appris comment supprimer ou masquer la valeur de contexte par défaut lors d'un clic droit sur une page Web et afficher notre propre menu contextuel personnalisé dans la même action. De cette façon, nous pouvons ajouter un menu contextuel personnalisé avec les options que nous souhaitons y afficher.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!