effetto menu hover

**pcmaurix** · 17-11-2011, 11:32

Buongiorno a tutti....
ho un piccolo problema con il mio menù di navigazione, sicuramente sarà una stupidata ma non riesco proprio a venirne fuori.

ho creato l'effetto hover che al passaggio del mouse il link prende un colore di background, vorrei fare in modo che dopo averci cliccato sopra il colore di background rimanga attivo.

ho provato con:
a:active
a:visited

ma non ho assolutamente risolto nulla

riuscireste ad aiutarmi indicandomi
quale sintassi in html e css dovrei utilizzare?

in attesa
Grazie mille pcmaurix

**ldetomi** · 17-11-2011, 17:26

Con a:visited identifichi tutti i links che soo stati visitati e sono memorizzati nella cronologia. Questo però comporta che man mano che navighi il sito, tutti i links diventeranno a sfondo colorato e ci rimarranno fino a quando non cancellerai la cronologia...

Immagino tu voglia avere lo sfondo colorato solo sul link relativo alla pagina correntemente aperta, sbaglio forse?

**pcmaurix** · 17-11-2011, 17:52

Grazie per la tua risposta Idetomi,

quello che voglio fare e esattamente quello che hai detto tu.
Una volta cliccata la pagina (dal menu logicamente) voglio che rimanga lo sfondo colorato per fare capire agli utenti in quale pagina si trovano.

**totsdesign** · 17-11-2011, 18:17

puoi mettere una classe (ad esempio .current) in cui assegni le stesse proprietà css dell'hover e assegni questa classe al link del menù in cui ti serve.

**ldetomi** · 17-11-2011, 18:24

Lo devi fare con un trucchetto, in pratica devi comunicare al browser.... in che pagina si trova! Questo per fare in modo di poter identificare il link che va effettivamente colorato.

Un modo potrebbe essere il seguente, assumendo che hai una regola css per ogni pulsante del menù:
Applichi al body di ciascuna pagina un id specifico

codice:

<BODY id='pagina_chi_siamo'>
....
<BODY id='pagina_contatti'>
....

Dopodiché nel css basta creare una regola specifica per ogni pulsante "figlio" della pagina in questione. Se scrivi una cosa del genere

codice:

 
BODY#pagina_chi_siamo A#chi_siamo
{
  ....
}

Definisci precisamente lo stile del link che hai id=chi_siamo MA SOLO quando è figlio di un BODY con id=pagina_chi_siamo ovvero tale stile verrà utilizzato SOLO quando la pagina del "Chi siamo" sarà visualizzata....

E' abbastanza chiaro?

**pcmaurix** · 18-11-2011, 21:46

allora.... fino ad assegnare un id="" al BODY di ogni pagina html ci sono
ma non ho ben capito cosa dovrei fare con il css

in pratica dovrei crere 4 regole body

in questo modo?

codice:

body #Home a #Home {.... }

body #Chi siamo a #Chi siamo {... } 

body #prodotti a #prodotti { ...}

in attesa di un chiarimento
Grazie

**ldetomi** · 18-11-2011, 22:37

Quasi.... osserva bene quello che ti ho scritto, ho differenziato l'id del body da quello del link (chiamando quello del body pagina_chi_siamo), questo perché l'id per definizione deve essere unico, non devi avere 2 oggetti con lo stesso id, come staresti facendo tu adesso....

**pcmaurix** · 21-11-2011, 12:21

Riuscitoooooooooooooooo!!!!!! sei stato grande Idetomi grazie mille per l'aiuto!!

un ultimo chiarimento poi non rompo piu....
nel folgio di stile .css , ho inserito 4 selettori body, non c'è un modo per avere un solo selettore (body) per tutte le pagine html? non so se sono riuscito a farmi capire...

in ogni caso
Grazie ancora

**ldetomi** · 21-11-2011, 12:30

Originariamente inviato da pcmaurix
ho inserito 4 selettori body, non c'è un modo per avere un solo selettore (body) per tutte le pagine html? non so se sono riuscito a farmi capire...

No, non sei riuscito a farti capire!!!

Posta il tuo codice css e vediamo cosa intendi (magari solo quello strettamente necessario

)

**pcmaurix** · 21-11-2011, 13:58

Temevo di non esserci riuscito.....

allora il mio codice attuale funzionante e il seguente:

HTML

codice:

<body id="pagina_prodotti">[*]Prodotti

<body id="pagina_contatti">[*]Contatti

CSS

codice:

body#pagina_prodotti a#prodotti { ....}

body#pagina_contatti a#contatti { ....}

il CSS non potrebbe essere così?

codice:

body #pagina_prodotti    a#prodotti {.... }

    #pagina_contatti     a#contatti {... }
         
    #pagina_chiSiamo      a#chi_siamo { ...}

non credo sia fattibile ma tentar non nuoce

Discussione: effetto menu hover

Strumenti discussione

Ricerca discussione

Visualizza

effetto menu hover

Permessi di invio