menu in css che mi dica "sei in questa pagina"

**stranyera** · 28-09-2006, 09:17

ciao ragazzi,
allora ho fatto un meno orizzontale con rollover a due stati con
questa tecnica.
al momento quindi mi visualizza i due stati se passo su con il mouse.
volevo sapere pero' come devo fare per modificare il mio menu dando l'indicazione che solitamente viene attribuita con "id="current". in pratica all'interno delle pagine del mio sito voglio che nel menu appaia un terza immagine che sia differente dalle altre e che indichi che sei in quella sezione..
sorry, forse un po' criptica ma se non avete capito sono qua....
please help me

**Mich_** · 28-09-2006, 09:22

CSS non ha di questi poteri.
I poteri che cerchi li ha solo un programma sul server.
Quindi devi far inserire il tuo id="current" oppure class="current" da parte del programma sul server (ASP, PHP, JSP, CGI, ...).

Se non e` possibile, puoi realizzare uan cosa che ci assomiglia con un JS: non e` bellissimo (la modifica avviene dopo che la pagina e` caricata), ma comunque funziona in tutti i brwoser dove JS e` funzionante.

**stranyera** · 28-09-2006, 09:29

Originariamente inviato da Mich_
CSS non ha di questi poteri.
I poteri che cerchi li ha solo un programma sul server.
Quindi devi far inserire il tuo id="current" oppure class="current" da parte del programma sul server (ASP, PHP, JSP, CGI, ...).

Se non e` possibile, puoi realizzare uan cosa che ci assomiglia con un JS: non e` bellissimo (la modifica avviene dopo che la pagina e` caricata), ma comunque funziona in tutti i brwoser dove JS e` funzionante.

js è escluso

**erredeco** · 28-09-2006, 11:22

Se le pagine non sono molte, potresti utilizzare un sistema simile a questo (è un "canovaccio", ma spero che l'idea che c'è dietro sia chiara

) :

1) Associa al <body> di ogni pagina un id diverso (o una classe se preferisci)

<body id="bbpagina1">...

<body id="bbpagina2">...

e così via

2) associa ad ogni voce del menu un id diverso (o una classe se preferisci) , in questo modo:

<li id="llpagina1">....
<li id="llpagina2">....
<li id="llpagina3">....

3) a questo punto nel CSS fai un'associazione 1:1 tra <body> e[*] in questo modo:

#bbpagina1 #llpagina1 {/*stile specifico per rendere la voce evidenziata*/}
#bbpagina2 #llpagina2 {/*stile specifico per rendere la voce evidenziata*/}
#bbpagina3 #llpagina3 {/*stile specifico per rendere la voce evidenziata*/}
/*...ecc.ecc. fino ad arrivare all'ultima voce ("X")... */
#bbpaginaX #llpaginaX {/*stile specifico per rendere la voce evidenziata*/}

o, se sono tutte uguali:

#bbpagina1 #llpagina1,
#bbpagina2 #llpagina2,
#bbpagina3 #llpagina3,
/*...ecc.ecc. fino ad arrivare all'ultima voce ("X")... */
#bbpaginaX #llpaginaX {/*stile specifico per rendere la voce evidenziata*/}

Nota che in questo caso ho supposto che l'evidenziazione della pagina corrente sia fatta attribuendo lo stile all'elemento[*], ma se ti è più comodo, scrivi pure la regola per l' <a>:

#bbpagina1 #llpagina1 a {/*stile specifico per rendere la voce evidenziata*/}

**stranyera** · 28-09-2006, 11:59

Originariamente inviato da erredeco
Se le pagine non sono molte, potresti utilizzare un sistema simile a questo (è un "canovaccio", ma spero che l'idea che c'è dietro sia chiara

) :

1) Associa al <body> di ogni pagina un id diverso (o una classe se preferisci)

2) associa ad ogni voce del menu un id diverso (o una classe se preferisci) , in questo modo:

3) a questo punto nel CSS fai un'associazione 1:1 tra <body> e[*] in questo modo:

o, se sono tutte uguali:

Nota che in questo caso ho supposto che l'evidenziazione della pagina corrente sia fatta attribuendo lo stile all'elemento[*], ma se ti è più comodo, scrivi pure la regola per l' <a>:

grazie....

in questo modo, devo creare i tre stati del bottone giusto?

**erredeco** · 28-09-2006, 12:09

in questo modo, devo creare i tre stati del bottone giusto?

Io immagino che tu abbia già creato il codice per almeno 2 stati (diciamoli "normale" e "hover"); aggiungi il terzo (chiamiamolo pure "selected") seguendo un po' le linee guida che ho scritto prima.
Il trucco sta tutto nel far "scattare" lo stato di "selected" solo in presenza di una determinata condizione, ovvero <body id="bbpaginaX"> <-> <li id="llpaginaX">, dove gli "X" coincidono tramite le dichiarazioni CSS

#bbpaginaX #llpaginaX {...}

In tutti gli altri casi, in assenza di particolari istruzioni, varranno solo le regole degli stati "normale" e "hover"

Ti consiglierei di usare gli ID per questo sistema, in maniera tale da avere una specificità molto alta delle regole che danno lo stile allo stato "selected"

**stranyera** · 28-09-2006, 12:36

ok

grazie mille

Discussione: menu in css che mi dica "sei in questa pagina"

Strumenti discussione

Ricerca discussione

Visualizza

menu in css che mi dica "sei in questa pagina"

Permessi di invio