• Regolamento Macrocategoria DEV
    Prima di aprire un topic nella Macrocategoria DEV, è bene leggerne il suo regolamento. Sei un'azienda o un hosting/provider? Qui sono anche contenute informazioni per collaborare con Sciax2 ed ottenere l'accredito nella nostra community!

JavaScript [jQuery] Menu a tendina alternativo

chack1172

Utente Senior
Autore del topic
27 Aprile 2013
1.537
69
1
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.

Cominciamo!
Per prima cosa dobbiamo bloccare l'uscita del menu a tendina di default con questo script:
HTML:
Perfavore, Entra oppure Registrati per vedere i codici!
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.
HTML:
Perfavore, Entra oppure Registrati per vedere i codici!
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".
HTML:
Perfavore, Entra oppure Registrati per vedere i codici!
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.
HTML:
Perfavore, Entra oppure Registrati per vedere i codici!
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:
HTML:
Perfavore, Entra oppure Registrati per vedere i codici!
Risultato
 
Ultima modifica:

#Magnesio

Utente Mitico
11 Ottobre 2009
6.218
159
0
Guida semplicissima :soso:
Può essere sempre utile per principianti , bravo.

Inviato dal mio GT-I9060 utilizzando Tapatalk
 

Hew0x

Utente Attivo
18 Agosto 2014
255
0
0
La chiamate guida? In pratica hai solo dato il codice bello e pronto.
Piccola precisazione.
preventDefault() impedisce l'evento predefinito che si verifica, stopPropagation() serve per assicurarsi che l'evento non fuoriesca dalla "catena", mentre return false fa entrambe le cose
Nota che preventDefault() funziona solo nei gestori di eventi direttamente sull'oggetto di destinazione
 

chack1172

Utente Senior
Autore del topic
27 Aprile 2013
1.537
69
1
@Hew0x avevo pochissimo tempo per scrivere la guida, stasera provvedo a modificarla

- - - Aggiornato - - -

Aggiornato, @Hew0x Ora la consideri una guida? xD
 

Hew0x

Utente Attivo
18 Agosto 2014
255
0
0
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.
currentMousePos.y/x sono proprietà, non variabili ...
per far questo useremo la funzione append che aggiunge del contenuto prima della chiusura del tag selezionato.
La funzione html() è più veloce perchè utilizza innerhtml, sempre più veloce della creazione di un DOM.
 

chack1172

Utente Senior
Autore del topic
27 Aprile 2013
1.537
69
1
@Hew0x non puoi usare la funzione html() altrimenti sostituisce tutto il contenuto del body con il menu, testalo prima di scrivere

currentMousePos.y/x sono variabili
 
 
 
Top