Menu di clic destro JavaScript

Un menu contestuale o un menu a tacere destro si aprirà quando l'utente viene fatto clic con il pulsante destro del mouse su una pagina Web. A volte, gli sviluppatori potrebbero dover espandere il menu contestuale predefinito ma non sono in grado di farlo. Quindi, gli sviluppatori creano i loro menu personalizzati. Un menu contestuale personalizzato offre la possibilità di aggiungere funzionalità uniche e aiuta il sito Web o la pagina Web più adattabile e appropriata per il contesto.

Questo studio dimostrerà il menu del tasto destro e come creare un menu a clic destro personalizzato in JavaScript.

Qual è il menu di clic destro predefinito in una pagina Web?

Quando si fa clic su una pagina Web con il pulsante destro del mouse, viene visualizzata una casella con varie opzioni di menu, viene chiamata menu a tacere destro o un menu contestuale predefinito:

Vediamo un esempio di come creare un menu di clic destro su una pagina web.

Creazione di un menu a clic destro personalizzato con JavaScript
Creeremo una semplice pagina Web con HTML e CSS e quindi creeremo un menu a clic destro personalizzato sulla pagina Web utilizzando JavaScript. Posizioneremo e modelleremo il nostro menu di clic destro personalizzato utilizzando le proprietà CSS:

Menu di clic destro JavaScript

Per ottenere un menu contestuale personalizzato, fai clic su ovunque sulla pagina

Quindi, scrivi il codice per il menu di clic destro personalizzato in un file JavaScript. Innanzitutto, nascondere o bloccare il menu contestuale predefinito in una pagina Web.

• Chiama il "PreventDefault ()"Metodo che impedisce l'apparizione del menu a clic destro predefinito mentre si attiva il"menù contestuale"Evento.
• Chiama la funzione definita denominata "CreateMenuOnrightClick ()"Per il menu a clic destro personalizzato con"e.ClientX" E "e.Clienty"Argomenti che mostrano la posizione del mouse:

_CurrentMenuVisible = null;
documento.addEventListener ('contextMenu', e =>
e.preventDefault ();
CreatemenuOnrightClick (e.ClientX, e.Clienty);
);

Definire una funzione "CreateMenuOnrightClick ()"Che verrà lanciato al tasto destro dell'utente sulla pagina Web:

funzione createMenUonrightClick (x, y)
ClosetopenedMenu ();
const menuelement = documento.createElement ('div');
menuelement.classlist.Aggiungi ('contextMenu');
const menulistelement = documento.createElement ('UL');
const menuArray = ['Aggiorna', 'aperto', 'salva', 'copia', 'help'];
for (var element of menurray)
var lislelement = document.createElement ('li');
elencatura.InnerHtml = '' + element + '';
Menulistelement.AppendChild (ListElement);

menuelement.appendChild (menulistelement);
documento.corpo.appendChild (menuelement);
_CurrentMenuVisible = menuelement;
menuelement.stile.display = 'block';
menuelement.stile.a sinistra = x + "px";
menuelement.stile.top = y + "px";

Esaminiamo ciò che sta accadendo nel codice sopra menzionato:

• Nel clic destro, la prima cosa è chiudere qualsiasi altro clic destro o menu di contesto che sono attualmente aperti nella pagina.
• Quindi creiamo un nuovo "div"Che ospiterà il menu di taglio destro personalizzato.
• Quindi, dentro il "div", Viene aggiunto un elenco non ordinato che contiene una serie di elenchi che vengono visualizzati come menu nella pagina web.

Per chiudere il menu contestuale, fai clic su ovunque nella pagina Web. Questo verrà gestito usando il "clic"Evento che verrà attivato quando l'utente fa clic sulla pagina Web dopo aver aperto il tasto destro del tasto destro. Questo gestore di eventi chiama la funzione specificata "CloseTeopenedMenu ()":

documento.addEventListener ('click', e =>
ClosetopenedMenu ();
);

Ora, definisci una funzione "CloseTeopenedMenu ()”Per chiudere il menu del tasto destro in cui chiama il"CloseContextMenu ()"Metodo che chiuderà il menu:

funzione chiusePenedMenu ()
if (_CurrentMenuVisible !== null)
CloseContextMenu (_CurrentMenuVisible);

IL "CloseContextMenu ()"Il metodo è definito di seguito:

Funzione CloseContextMenu (menu)
menù.stile.a sinistra = '0px';
menù.stile.top = '0px';
documento.corpo.REMOVECHILD (menu);
_CurrentMenuVisible = null;

Per modellare un menu contestuale o fare clic con il pulsante destro del mouse, applica CSS a vari elementi per renderlo buono. Innanzitutto, aggiungi lo stile al tag del corpo per allineare il testo al centro e impostare il colore di sfondo:

corpo
Testo-align: centro;
Background: #B7C4F1;

STILIO Il menu impostando il colore del testo, il colore di sfondo, il bordo e la posizione su "assoluto":

.menù contestuale
Posizione: assoluto;
larghezza: 100px; Altezza: auto;
Colore: #B7C4F1;
Background: #344683;
Bordo: 1px Solid #344683;
visualizzazione: nessuno;

Stile L'elenco non ordinato con elementi elenchi per impostare l'imbottitura e il margine:

.contextmenu ul
imbottitura: 0;
Margine: 0;

.contestmentMenu ul li
Border-Bottom: #B7C4F1 1px Solid;
imbottitura: 0;
Margine: 0;

Imposta il bordo dell'ultima opzione del menu usando il "Border-Bottom"Proprietà che non sarà nessuno;

.contestmenu ul li: last-child
Border-Bottom: nessuno;

Stile il menu con un tag di ancoraggio.

.contestmentmenu ul li a
Testo-align: sinistra;
blocco di visualizzazione;
imbottitura: 5px 10px;
Colore: #B7C4F1;
Testo-trasformata: capitalizza;
DECORAZIONE DEL TESTO: Nessuno;

Imposta il colore di sfondo degli elementi dell'elenco su Hover:

.contestmentmenu ul li a: hover
Background: #2777ff;

Come puoi vedere nell'output, facendo clic su una pagina Web con il pulsante del mouse destro visualizza un menu di clic destro su misura:

Conclusione

Poiché il menu contestuale predefinito non può essere ampliato per aggiungere opzioni personalizzate, pertanto, è necessario creare un menu a clic destro personalizzato per fornire opzioni personalizzate all'utente. Un menu a clic destro personalizzato può essere facilmente creato nella posizione attuale del mouse con l'aiuto di JavaScript e CSS. In questo post sul blog, è stato creato un menu di clic destro personalizzato e la procedura è spiegata passo dopo passo.