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!
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!
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!
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: