Come creare un menù per il tasto destro personalizzato con JavaScript

Heyy, bentornato nel mio blog, come va??

Oggi ti andrò a mostrare come creare un menù contestuale, che si aprirà con il click sul tasto destro del mouse, con Javascript in modo da espandere le funzionalità del tuo sito web.

1. Perché un menù contestuale?

Con l’aumentare della complessità delle applicazioni Web e del numero di azioni che l’utente può eseguire in una specifica pagina, diventa sempre più difficile mantenere una interfaccia pulita e non confusionaria per l’utente che utilizzerà il tuo sito.
Un buon approccio per ovviare questa situazione consiste nel raggruppare tutte le azioni secondarie in un unico posto, magari in un menù contestuale richiamabile dal tasto destro del mouse.

Un buon esempio per illustrare questo tipo di approccio è il sito di Gmail.

Il menù contestuale è un pannello interattivo che appare a seguito di una interazione dell’utente (solitamente click destro o pressione prolungata nel caso di dispositivi mobili).

2. Disegnamo il template

Il primo passo per implementare il tuo menù contestuale consiste nel definire un template HTML e delle regole CSS. Di seguito trovi la struttura HTML

<div id="context-menu">
    <div class="item">Option 1</div>
    <div class="item">Option 2</div>
    <div class="item">Option 3</div>
    <div class="item">Option 4</div>
    <div class="item">Option 5</div>
</div>

Applichiamo adesso un po’ di stile

html,
body {
  width: 100%;
  height: 100%;
  font-family: "Open Sans", sans-serif;
  padding: 0;
  margin: 0;
}

#context-menu {
  position: fixed;
  z-index: 10000;
  width: 150px;
  background: #1b1a1a;
  border-radius: 5px;
}

#context-menu .item {
  padding: 8px 10px;
  font-size: 15px;
  color: #eee;
  cursor: pointer;
  border-radius: inherit;
}

#context-menu .item:hover {
  background: #343434;
}

Per comodità ho creato un file “index.html” dove ho inserito i codici sopra mostrati, di seguito ti lascio il codice completo

<div id="context-menu">
    <div class="item">Option 1</div>
    <div class="item">Option 2</div>
    <div class="item">Option 3</div>
    <div class="item">Option 4</div>
    <div class="item">Option 5</div>
</div>


<style>
    html,
    body {
        width: 100%;
        height: 100%;
        font-family: "Open Sans", sans-serif;
        padding: 0;
        margin: 0;
    }

    #context-menu {
        position: fixed;
        z-index: 10000;
        width: 150px;
        background: #1b1a1a;
        border-radius: 5px;
    }

    #context-menu .item {
        padding: 8px 10px;
        font-size: 15px;
        color: #eee;
        cursor: pointer;
        border-radius: inherit;
    }

    #context-menu .item:hover {
        background: #343434;
    }
</style>

Il risultato che otterrai sarà identico al seguente:

3. Aggiungere la logica

Come puoi notare, il menù risulta sempre visibile sullo schermo e questo è un comportamento che non vogliamo. Il nostro menù deve comparire al click sul tasto destro del mouse. Per fare ciò avremo bisogno di includere del codice javascript nel nostro file.

Iniziamo a modificare il CSS nel punto in cui abbiamo stilizzato #context-menu

#context-menu {
  position: fixed;
  z-index: 10000;
  width: 150px;
  background: #1b1a1a;
  border-radius: 5px;
  display: none;
}

Ho aggiunto semplicemente la regola “display” alla quale abbiamo assegnato il valore “none”. Questa regola nasconderà il menù dalla pagina.

Adesso aggiungiamo il seguente codice Javascript per far apparire il menù al click destro nel punto dello schermo in cui abbiamo cliccato.

const contextMenu = document.getElementById("context-menu");
const scope = document.querySelector("body");

scope.addEventListener("contextmenu", (event) => {
  event.preventDefault();

  const { clientX: mouseX, clientY: mouseY } = event;

  contextMenu.style.top = `${mouseY}px`;
  contextMenu.style.left = `${mouseX}px`;

  contextMenu.style.display = "block";
});

Ti lascio comunque il codice completo del file “index.html”

<div id="context-menu">
    <div class="item">Option 1</div>
    <div class="item">Option 2</div>
    <div class="item">Option 3</div>
    <div class="item">Option 4</div>
    <div class="item">Option 5</div>
</div>


<style>
    html,
    body {
        width: 100%;
        height: 100%;
        font-family: "Open Sans", sans-serif;
        padding: 0;
        margin: 0;
    }

    #context-menu {
        position: fixed;
        z-index: 10000;
        width: 150px;
        background: #1b1a1a;
        border-radius: 5px;
        display: none;
    }

    #context-menu .item {
        padding: 8px 10px;
        font-size: 15px;
        color: #eee;
        cursor: pointer;
        border-radius: inherit;
    }

    #context-menu .item:hover {
        background: #343434;
    }
</style>

<script>
    const contextMenu = document.getElementById("context-menu");
    const scope = document.querySelector("body");

    scope.addEventListener("contextmenu", (event) => {
        event.preventDefault();

        const { clientX: mouseX, clientY: mouseY } = event;

        contextMenu.style.top = `${mouseY}px`;
        contextMenu.style.left = `${mouseX}px`;

        contextMenu.style.display = "block";
    });
</script>

Avrai ottenuto un risultato identico al seguente:

4. Conclusioni

Ti ho mostrato come creare un menù multi funzioni per il tuo sito web o applicazione, ora sta a te capire come integrarlo nel tuo progetto.

Quello che ti ho mostrato è secondo me il metodo più semplice per creare un menù contestuale con Javascript, HTML e CSS senza l’utilizzo di librerie e plugin esterni.

Hai avuto problemi con il tutorial? Hai qualche domanda da farmi? Qualche suggerimento? Non esitare a lasciare un commento qui sotto.

Ciao e alla prossima 🙂