[GUIDA] [jQuery] Menu a tendina alternativo

[chack1172]

Menu a tendina personalizzato

Ciao a tutti ragazzi,
in questa guida vi mostrerò come inserire sul vostro sito web un menu a tendina personalizzato con il nostro caro amato jQuery.

Includiamo prima jQuery nel nostro sito aggiungendo nel tag head questo codice:

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

Cominciamo!
Per prima cosa dobbiamo bloccare l'uscita del menu a tendina di default con questo script:

<script>
$(document).bind("contextmenu", function(e) {
            e.preventDefault();
});
</script>

Con questo codice, appena si cerca di aprire il menu a tendina lo script fa eseguire la funzione preventDefault che blocca l'azione di default dell'evento, in questo caso mostrare il menu a tendina.

Ora dobbiamo prendere la posizione del puntatore del mouse per far apparire il nuovo menu nel punto in cui si è selezionato, per farlo useremo la funzione mousemove che ci offre jquery che quando viene mosso il mouse aggiorna le nostre variabili della posizione da sinistra e da sopra.

<script>
var currentMousePos = { x: -1, y: -1 };
$(document).mousemove(function(event) {
    currentMousePos.x = event.pageX;
    currentMousePos.y = event.pageY;
});

$(document).bind("contextmenu", function(e) {
    e.preventDefault();
});
</script>

Bene, ora che abbiamo trovato la posizione del puntatore possiamo far uscire il nostro menu aggiungendo nel body il codice del nostro menu, per far questo useremo la funzione append che aggiunge del contenuto prima della chiusura del tag selezionato. Al box del menu bisogna aggiungere un id in modo da poter effettuare azioni su di lui, io userò l'id "contextbox".

var currentMousePos = { x: -1, y: -1 };
$(document).mousemove(function(event) {
    currentMousePos.x = event.pageX;
    currentMousePos.y = event.pageY;
});

$(document).bind("contextmenu", function(e) {
    e.preventDefault();

    $("body").append('<div id="contextbox" style="position: absolute; top: '+currentMousePos.y+'; left: '+currentMousePos.x+';"><ul>'+
        '<li class="title">Menu</li>'+
        '<li><a href="http://mybb-it.com/">MyBB-it.com</a></li>'+
        '<li><a href="http://sciax2.it/forum/">Sciax2</a></li>'+
        '<li><a href="http://www.chack1172.altervista.org/it/">chack1172 website</a></li>'+
        '<li><a href="./cookie.html">Informatica Cookie</a></li>'+
        '<li><a href="./search.php">Cerca</a></li>'+
    '</ul></div>');
});
</script>

Se fate attenzione al codice abbiamo usato le nostre 2 variabili della posizione del puntatore, currentMousePos.y e currentMousePos.x, per impostare la distanza da sopra e da sinistra nello stile del box.
Per aggiungere un opzione al menu dovete aggiungere un <li> alla lista.
Bene lo script è quasi finito, manca l'ultima parte: la chiusura del menu.
Il menu lo dobbiamo chiudere in 2 casi:
- Quando l'utente ripreme il pulsante destro
- Quando l'utente clicca sulla pagina, ma non quando clicca sul menu

Per rimuovere il menu dalla pagina useremo la funzione remove, che rimuovere completamente il tag selezionato dalla pagina.
Per rimuoverlo quando si clicca sulla pagina useremo la funzione clic con riferimento al documento (tutta la pagina), poi useremo di nuovo questa funzione con riferimento all'id del menu per far eseguire la funzione stopPropagation che non farà eseguire la funzione remove sul nostro menu.

var currentMousePos = { x: -1, y: -1 };
$(document).mousemove(function(event) {
    currentMousePos.x = event.pageX;
    currentMousePos.y = event.pageY;
});

$(document).bind("contextmenu", function(e) {
    e.preventDefault();
    
    $("#contextbox").remove();

    $("body").append('<div id="contextbox" style="position: absolute; top: '+currentMousePos.y+'; left: '+currentMousePos.x+';"><ul>'+
        '<li class="title">Menu</li>'+
        '<li><a href="http://mybb-it.com/">MyBB-it.com</a></li>'+
        '<li><a href="http://sciax2.it/forum/">Sciax2</a></li>'+
        '<li><a href="http://www.chack1172.altervista.org/it/">chack1172 website</a></li>'+
        '<li><a href="./cookie.html">Informatica Cookie</a></li>'+
        '<li><a href="./search.php">Cerca</a></li>'+
    '</ul></div>');

    $("body").click(function() {
        $("#contextbox").remove();    
    });

    $('#contextbox').click(function(event){
        event.stopPropagation();
    });
});

Come avrete visto nel codice ho messo un remove prima che faccia uscire il menu in questo modo elimina, se c'è, il vecchio menu e fa visualizzare il nuovo. E' importante metterlo prima altrimenti appena farà visualizzare il menu, esso verrà eliminato.

Per lo stile potete crearlo voi, ma per chi ne vuole uno già fatto, eccolo qui:

#contextbox ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
        
#contextbox li {
    width: 250px;
    height: 40px;
    background: white;
    line-height: 40px;
    border: 1px solid #CCC;
}
        
#contextbox a {
    display: block;
    height: 100%;
    width: 100%;
    padding: 0 10px;
}
        
#contextbox .title {
    color: white;
    font-wheight: bold;
    text-align: center;
    background: #005EA7;
    border: 0;
}

Risultato