Menu de clic droit javascript

Un menu contextuel ou un clic droit s'ouvre lorsque l'utilisateur cliquez avec le bouton droit sur une page Web. Parfois, les développeurs peuvent avoir besoin d'élargir le menu contextuel par défaut, mais ne sont pas en mesure de le faire. Ainsi, les développeurs créent leurs menus personnalisés. Un menu contextuel personnalisé donne la possibilité d'ajouter des fonctionnalités uniques et aide le site Web ou la page Web plus adaptable et approprié pour le contexte.

Cette étude démontrera le menu à clic droit et comment créer un menu de clic droit personnalisé en JavaScript.

Quel est le menu de clic droit par défaut sur une page Web?

Lorsque vous cliquez sur une page Web avec le bouton droit de votre souris, une boîte apparaît avec diverses options de menu, elle s'appelle un menu à clic droit ou un menu contextuel par défaut:

Voyons un exemple de la façon de créer un menu de clic droit personnalisé sur une page Web.

Création d'un menu de clic droit personnalisé avec JavaScript
Nous créerons une page Web simple avec HTML et CSS, puis créerons un menu de clic droit personnalisé sur la page Web à l'aide de JavaScript. Nous positionnons et styliserons notre menu de clic droit personnalisé à l'aide des propriétés CSS:

Menu de clic droit javascript

Pour obtenir un menu contextuel personnalisé, cliquez n'importe où sur la page

Ensuite, écrivez le code pour le menu de clic droit personnalisé dans un fichier javascript. Tout d'abord, masquez ou bloquez le menu contextuel par défaut sur une page Web.

• Appeler le "PARVORDEFAULT ()«Méthode qui empêche le menu de clic droit par défaut d'apparaître tout en déclenchant le«menu contextuel" événement.
• Appelez la fonction définie nommée «CreateMenuonRightClick ()"Pour un menu de clic droit personnalisé avec"e.clientx" et "e.clientèle»Arguments qui montrent la position de la souris:

_CurrentMenuvisible = null;
document.addEventListener ('contextMenu', e =>
e.PARVEFAULT ();
CreateMenuonRightClick (e.clientx, e.Clienty);
);

Définir une fonction "CreateMenuonRightClick ()”Qui sera lancé sur le clic droit de l'utilisateur sur la page Web:

fonction CreateMenuonRightClick (x, y)
CloseTheopenedMenu ();
const Menuelement = document.CreateElement ('div');
meuelement.liste de classe.ajouter ('contextMenu');
const MenuListElement = document.createElement ('ul');
const MenuArray = [«rafraîchir», «ouvrir», «enregistrer», «copier», «help»];
pour (var élément de menuArray)
var linetelement = document.CreateElement ('li');
listing.innerHtml = '' + élément + '';
menulistation.APPEDCHILD (listelement);

meuelement.appenchild (MenuListElement);
document.corps.appenchild (Menuelement);
_CurrentMenuvisible = Menuelement;
meuelement.style.display = 'block';
meuelement.style.gauche = x + "px";
meuelement.style.top = y + "px";

Passons en revue ce qui se passe dans le code mentionné ci-dessus:

• Au clic droit, la première chose est de fermer tout autre clic droit ou menus contextuel qui est actuellement ouvert sur la page.
• Ensuite, nous créons un nouveau "div”Qui hébergera le menu de clic droit personnalisé.
• Ensuite, à l'intérieur du «div», Une liste non ordonnée est ajoutée qui contient un tableau de listes qui apparaissent comme un menu sur la page Web.

Pour fermer le menu contextuel, cliquez n'importe où sur la page Web. Cela sera manipulé en utilisant le «Cliquez sur”Événement qui sera déclenché lorsque l'utilisateur clique sur la page Web après avoir ouvert le menu de clic droit. Ce gestionnaire d'événements appelle la fonction spécifiée "CloseTheopenedMenu ()»:

document.addEventListener ('click', e =>
CloseTheopenedMenu ();
);

Maintenant, définissez une fonction "CloseTheopenedMenu ()”Pour fermer le menu avec le bouton droit sur le coup où appelez le«CloseContextMenu ()»Méthode qui fermera le menu:

fonction ClostheopenedMenu ()
si (_CurrentMenuvisible !== null)
CloseContextMenu (_CurrentMenuvisible);

Le "CloseContextMenu ()«La méthode est définie ci-dessous:

Fonction CloseContextMenu (menu)
menu.style.Left = '0px';
menu.style.top = '0px';
document.corps.RemoveChild (menu);
_CurrentMenuvisible = null;

Pour coiffer un menu contextuel ou un menu avec le bouton droit, appliquez CSS à divers éléments pour le rendre bon. Tout d'abord, ajoutez du style à la balise corporelle pour aligner le texte au centre et définissez la couleur d'arrière-plan:

corps
Texte-aligne: Centre;
Contexte: # B7C4F1;

Style le menu en définissant la couleur du texte, la couleur d'arrière-plan, la bordure et la position sur «absolu»:

.menu contextuel
Position: absolue;
Largeur: 100px; Hauteur: Auto;
Couleur: # B7C4F1;
Contexte: # 344683;
Border: 1px solide # 344683;
Affichage: aucun;

Style la liste non ordonnée avec des éléments de liste pour définir le rembourrage et la marge:

.ContextMenu ul
rembourrage: 0;
marge: 0;

.ContextMenu ul li
Border-Bottom: # B7C4F1 1px solide;
rembourrage: 0;
marge: 0;

Définissez la bordure de la dernière option du menu à l'aide du «Bordure du bas»Propriété qui ne sera pas;

.ContextMenu ul li: dernier-enfant
Border-Bottom: Aucun;

Style le menu avec une balise d'ancrage.

.ContextMenu ul li a
Texte-aligne: gauche;
bloc de visualisation;
rembourrage: 5px 10px;
Couleur: # B7C4F1;
Transform de texte: capitaliser;
Décoration du texte: aucune;

Définissez la couleur d'arrière-plan des éléments de la liste sur le survol:

.ContextMenu ul li a: Hover
Contexte: # 2777FF;

Comme vous pouvez le voir dans la sortie, en cliquant sur une page Web avec le bouton droit de la souris affiche un menu de clic droit personnalisé:

Conclusion

Étant donné que le menu contextuel par défaut ne peut pas être étendu pour ajouter des options personnalisées, par conséquent, un menu de clic droit personnalisé doit être créé pour fournir des options personnalisées à l'utilisateur. Un menu de clic droit personnalisé peut facilement être créé à la position actuelle de la souris à l'aide de JavaScript et CSS. Dans cet article de blog, un menu de clic droit personnalisé a été créé et la procédure est expliquée étape par étape.