Comment créer un menu contextuel en javascript

En JavaScript, un menu contextuel est un menu à l'écran qui apparaît en haut du texte / image lorsque quelqu'un clique dessus. Normalement, un menu contextuel est caché et il peut apparaître en fonction de l'action de l'utilisateur tel que le clic droit, le clic gauche ou parfois planant au-dessus du lien. Donc, dans l'ensemble, nous pouvons dire qu'un menu contextuel est une boîte qui est utilisée pour afficher les notifications / messages à l'utilisateur, cependant, ces notifications apparaissent sur la base des actions de l'utilisateur.

Dans cet article, nous apprendrons à créer un menu contextuel en JavaScript, et à cet égard, nous passerons les étapes suivantes:

• Comment ajouter des balises HTML
• Comment déclarer un conteneur contextuel
• Comment styliser / concevoir un menu contextuel
• Comment ajouter du code JavaScript pour ouvrir le menu contextuel

Alors, commençons!

Comment ajouter des balises HTML

Différentes balises HTML peuvent être utilisées pour créer des menus contextuels par exemple, un bouton, une balise,

Tag, etc. Le code HTML ci-dessous vous aidera à cet égard.

Cliquez sur moi!
class = "PopupContent"> Bienvenue sur Linuxhint.com

L'extrait ci-dessus décrit que la méthode showpopup () sera invoquée lorsque quelqu'un clique sur le texte associé au menu contextuel. Le menu contextuel montrera un message de salutation «Bienvenue à Linuxhint.com ».

Comment déclarer un conteneur pop-up

Maintenant, nous déclarerons le conteneur contextuel où nous définirons le comportement du menu contextuel en utilisant différentes propriétés CSS telles que l'affichage, la position, le curseur, etc.

.PopupClass
Position: relative;
Affichage: bloc en ligne;
curseur: contexte-menu;

Comment styliser / concevoir un menu contextuel

Nous pouvons styliser un menu contextuel avec différentes propriétés CSS comme indiqué dans l'extrait ci-dessous:

.popup-espèce .PopupContent
Visibilité: cachée;
Color en arrière-plan: noir;
La couleur rouge;
Largeur: 200px;
Texte-aligne: Centre;
Position: absolue;
Z-Index: 1;
Border-Radius: 10px;
rembourrage: 10px 0;
En bas: 100%;
Gauche: 30%;
marge-gauche: -100px;

/ * Styling Popup Arrow * /
.popup-espèce .PopupContent :: After
contenu: "";
Position: absolue;
Top 100%;
Gauche: 10%;
marge-gauche: -10px;
largeur de bordure: 5px;
Style de la frontière: solide;
Color à la frontière: transparent transparent noir transparent;

Dans cet exemple, nous définissons la visibilité comme «cachée», ce qui signifie qu'au départ, le menu contextuel sera caché. Ensuite, nous avons utilisé certaines propriétés CSS pour styliser le menu contextuel tel que la couleur d'arrière-plan, le texte, le rembourrage, etc. Enfin, nous avons spécifié les propriétés comme le contenu, la couleur d'arrière-plan, la position, etc. pour coiffer la flèche popup.

Comment ajouter du code JavaScript pour ouvrir le menu contextuel

Maintenant, il est temps d'écrire le code javascript. Le extrait ci-dessous spécifie le code pour ouvrir un menu contextuel lorsqu'un utilisateur a cliqué sur le div:

fonction showpopup ()
Soit la valeur = documenter.GetElementById ("PopuPitem");
surgir.liste de classe.toggle ("affichage");

Le extrait ci-dessous montre le code complet pour créer un menu contextuel très simple dans JavaScript:

Comment créer un menu contextuel en javascript

Cliquez sur moi!
Bienvenue à Linuxhint.com!

Nous obtiendrons la sortie suivante sur l'exécution réussie du code:

La sortie montre que le menu contextuel apparaît lorsque nous cliquons sur le texte.

Conclusion

En JavaScript, un menu à l'écran qui apparaît en haut du texte / image est appelé le menu contextuel. Il n'apparaît que lorsque quelqu'un clique dessus. Un menu contextuel reste caché jusqu'à ce que quelqu'un clique dessus. Cet article a présenté un guide étape par étape pour créer un menu contextuel en javascript. Pour la clarté des concepts, nous avons examiné quelques exemples et les avons mis en œuvre pratiquement.