jQuery pop menu

[Xunil]

Ciao a tutti, vorrei creare un pop menu in jquery come quello nell'esempio a questo link: http://www.html.it/demo/javascript/48181/demo_index.html
Vi anticipo che non ho esperienze di jquery e chiedo a qualche buon samaritano di darmi una mano, magari spiegandomi passo passo la procedura per inserire questo menu. Ho website x5 evolution. Grazie!

[stesil]

Ciao,

quale versione di ws hai? E cosa hai già provato a fare?

[Xunil]

Ah già non l'ho scritto, ho website x5 10 evo. Ho scaricato lo script con tutti i file ma non so da dove iniziare 

[stesil]

Le risorse che ti servono sono:

• i files jquery.popmenu.min.js e font-awesome.min.css da allegare nella cartella files;

• tutti i files dei font da allegare nella cartella fonts

Il codice da utilizzare dipende da quale dei due menu vuoi implementare e da dove lo vuoi inserire. Qui un esempio con il codice inserito in intestazione e con entrambi i menu (con IE7 non sono visibili i font).

Questo è il codice utilizzato:

In head:

Codice:

Only registered users can see contents. Please click here to Register or Login.
Il codice HTML dei menu lo trovi nel sorgente della pagina index.html dell'esempio scaricato:

Codice:

Only registered users can see contents. Please click here to Register or Login.

Prova ed eventualmente metti un link alla tua prova online.

[Xunil]

Ok, attualmente il risultato è questo: http://www.vivilacultura.org/prova/
Come faccio a modificare le immagini?

[lemonsong]

Come faccio a modificare le immagini?

Non sono immagini, sono caratteri/icone presenti nel/nei fonts che hai caricato: Font-Awesome

Per cambiarle devi modificare la classe dell'elemento i:

<li class="demo_li"><a href="#"><div><i class="fa fa-home"></i></div><div>Home</div></a></li>

Qui trovi l'elenco completo delle icone e delle rispettive classi: http://fortawesome.github.io/Font-Awesome/icons/

Nota: alcune icone si riferiscono all'ultima versione, la 4.1.0

Visto che hai usato un solo menu, puoi togliere i riferimenti del secondo, nel codice in head:

Codice:

Only registered users can see contents. Please click here to Register or Login.

[Xunil]

Perfetto! Grazie mille, sei stato gentilissimo! 

[lemonsong]

Prego, ma il grosso del lavoro l'ha fatto stesil 

[Xunil]

Scusami ma dovrei chiederti un ultima cosa. Ho inserito un'immagine che scrolla con la pagina però vorrei creare un collegamento su quell'immagine che mi riporta in cima alla pagina, come posso fare? Inoltre sarebbe possibile nascondere l'immagine quando la pagina è al top e farla apparire quando la pagina scende oltre intestazione?

[lemonsong]

Visto che hai cambiato argomento, sarebbe meglio aprire un nuovo topic.

[Xunil]

Ok!