ciò che temevo :) Grazie comunque!

Fabio qualcosa di carino l'ho trovato quì... e vanno anche su wesite ... in pò di pratica e pazienza.. 

... in alternativa, usando immagini GifAnim ...sarebbe semplicissimo con l'effetto >> mouseover  ...

.

Potrei nascondere il menu e crearmi in alto nell'header le immagini con effetto mouseover; il problema è che non potrei utilizzare la funzione del menu visibile con lo scroll della pagina :(

Questo è proprio quello che vorrei!! Ora ci studio per riuscire ad integrarlo nel menu di Website!! :)

Grazie mille

Ci sto ancora lavorando, ma grazie a te piano piano sto facendo progressi!

http://www.unistaraforni.it/it/2017ws/

Grazie!

dovrei esserci quasi arrivato! ho solo un piccolo problema ora...

http://www.unistaraforni.it/it/2017ws/home.html

sul menu funziona l'effetto, ma andando sul tasto non appare la scritta della voce del menu, nella prova che ho fatto nel content della pagina funziona invece:

    <div class="#imMnMn">
    <a href="http://www.unistaraforni.it/it/2017ws/contatti.php" class="effect imMnMnFirstBg" data-title="HOME">home</a>
    </div>

Ho capito che se riuscissi a modificare il data-title direttamente sul codice del menu, forse funzionerebbe alla perfezione...

c'è la possibilità di integrare o richiamare il codice nella sezione html direttamente all'interno della sezione menu?

Grazie,

Fabio

...se vuoi che ti rispondano gli utenti dovresti togliere il "corretto" ...

grazie :)

ho provato.. e la soluzione potrebbe essere aggiungere una mediaquerry e funziona...

Fabio volevo dirti di abbassare il valore del top ... ma avevi chiuso il post...  

Valore del top abbassato ;) Grazie

Non so cosa sia una mediaquerry :( ho giusto qualche base del programmatore.

Hai possibilità di mandarmi qualche esempio su cui poter lavorare?

io ho provato così e funziona il valore in grassetto lo puoi variare in base alle tue esigenze, quando compare l'hamburger menù sul tuo sito:

@media(min-width: 719px){

#imMnMn .imMnMnFirstBg {
color:#0F659C;
-ms-transition: all linear 0.2s;

..........prosegui con il tuo script effetto

}

ok prova... fammi sapere, ciao.

Questo è il codice completo che ho messo nella sezione esperto della voce STATISTICHE, SEO e CODICE:

<style>
@media(min-width: 719px){
#imMnMn .imMnMnFirstBg {
color:#0F659C;
-ms-transition: all linear 0.2s;
}
* {
 -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
 box-sizing:border-box;
 }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
 font-family: Open Sans;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
 display: inline;
}
/* Effects */ 
.effect {
 position:relative;
 display:inline-block;
 text-decoration:none;
 padding:10px;
 }
.imMnMnFirstBg {
 color:#646464;
 -ms-transition: all linear 0.2s;
 -webkit-transition: all linear 0.2s;
 -moz-transition: all linear 0.2s;
 transition: all linear 0.2s;
 }
 
.imMnMnFirstBg:hover {
 -ms-transition: all linear 0.2s;
 -webkit-transition: all linear 0.2s;
 -moz-transition: all linear 0.2s;
 transition: all linear 0.2s;
 color:transparent;
 }
 
.imMnMnFirstBg:after {
 padding:15px 5px;
 background:#fff;
 color:#fff;
 opacity:0;
 content:attr(data-title);
 position:absolute;
 left:0;
 top:10px;
 width:100%;
 
 -ms-transform:scale(1.3,1.3);
 -webkit-transform:scale(1.3,1.3);
 -moz-transform:scale(1.3,1.3);
 transform:scale(1.3,1.3);
 
 -ms-transform:rotateX(-120deg);
 -webkit-transform: rotateX(-120deg);
 -moz-transform: rotateX(-120deg);
 transform: rotateX(-120deg);
 
 -ms-transition: all linear 0.2s;
 -webkit-transition: all linear 0.2s;
 -moz-transition: all linear 0.2s;
 transition: all linear 0.2s;
 }
 
/* ---------- colore del background del bottone su passaggio --------- */.imMnMnFirstBg:hover:after {
 opacity:1;
 background:#CA581A;
 font-color: #000000
 
 -ms-transform:scale(1,1);
 -moz-transform:scale(1,1);
 -webkit-transform:scale(1,1);
 transform:scale(1,1);
 
 -ms-transform: rotateX(0deg);
 -webkit-transform: rotateX(0deg);
 -moz-transform: rotateX(0deg);
 transform: rotateX(0deg);
 
 -ms-transition: all linear 0.2s;
 -webkit-transition: all linear 0.2s;
 -moz-transition: all linear 0.2s;
 transition: all linear 0.2s;
 }

/*
</style>

il Menù hamburger sotto la risoluzione 720 funziona, per ora ha problemi con il codice ma poi ci lavorerò...purtroppo le scritte sopra l'effetto continuano a non venire visualizzate :(

non ho verificato...  ma in teoria devi mettere in codice  dentro 

@media(min-width: 719px){ .....codice........ }

non ho verificato se manca l'ultima di chiusuta.. vedi tu.

Ciao.

Effettivamente nel codice che ti ho incollato mancava una graffa di chiusura, purtroppo nonostante tutto non funziona,

il pezzo di codice che mi da problemi è questo:

.imMnMnFirstBg:after {
 padding:15px 5px;
 background:#fff;
 color:#fff;
 opacity:0;
 content:attr(data-title);
 position:absolute;
 left:0;
 top:10px;
 width:100%;

content:attr(data-title); vuole che si imposti da un altra parte il valore data title,

che nell'esempio sotto la homepage ho inserito così

    <div class="item alcenter">
        <a href="#" class="effect effect6" data-title="Sono un link">Sono un link</a>
    </div>

Sicuramente sbaglio il posto in cui applicare il codice....il risultato è sempre questo su passaggio

copiando direttamente il tuo codice è andato!! :)
Grazieeeee