Dare lo stato on click con i CSS

lucaeffe

Dare lo stato on click con i CSS

Con un semplice menu del genere come si applica dopo lo stato hover lo stato onclick?
Vorrei che quando sia andasse a cliccare su una delle voci rimanesse di un colore diverso dal bianco che è il colore per lo stato :hover.
E' possibile farlo con i CSS o sono pazzo e me lo sono inventato??

#menu{
        background:url(../img/menu.png);
        height:39px;
      width:100%;
       }
 ul {
left:-108px;
width:100%;
}

 li {
float:left;
left:187px;
list-style:none outside none;
margin-right:0;
padding-right:84px;
position:relative;
}

 li a {
color:#CCCCCC;
display:block;
font-size:12px;
height:39px;
line-height:32px;
padding:0;
text-align:center;
text-decoration:none;
width:100%;
}
 li a:hover{
    background:none;
    color:#FFF;
}

Giapox

Devi utilizzare il comando :active per indicare lo stato "onclick".

Quindi, ad esempio:

[html]
#menu li a:active{
background:none;
color:#000;
}
[/html]

lucaeffe

Ok, grazie mille.
Ma come faccio per far rimanere fisso il colore dello stato onclick in questo caso il nero?

Giapox

Se vuoi visualizzare un colore diverso per la voce di menu relativa alla pagina correntemente visualizzata, hai bisogno di assegnare volta per volta una classe specifica a quella voce (ad esempio class="pagina-corrente"). Che io sappia, per fare ciò non ti bastano i CSS ma devi avvalerti dell'uso di php, o di una funzione dell'eventuale CMS in uso.

Che piattaforma stai usando per questo tuo sito?

marcocarrieri

Anche secondo me si usa un linguaggio server ASP o PHP che sia, che data una condizione assegna la classe "corrente" o "noncorrente".

lucaeffe

Appserv
http://www.selvanova.com/vini/ita/azienda/
Questo è un esempio perfetto di cio che voglio fare.
ha uno stato per l'hover ed uno fisso cheindica che si sta navigando in quella pagina.

Giapox

Se analizzi l'html del sito che hai postato trovi questo:

[html]<li class="item active open">[/html]

La classe active svolge proprio il ruolo che ti accennavamo io e marcocarrieri prima.

Per far visualizzare quella classe dinamicamente sul link relativo alla pagina corrente, devi utilizzare un pò di programmazione lato server (asp o php ad esempio) oppure, se utilizzi CMS tipo WordPress, Drupal o Joomla esistono delle funzioni proprie di questi CMS che fanno ciò che chiedi tu.

lucaeffe

Si entra quindi in discorsi in cui non sono proprio competente.
Infatti avevo estrapolato tutta la parte del codice del menu e ci stavo lavorando in locale.
La cosa che non mi riusciva era appunto quella di far spostare in maniera dinamica la classe "item active open", dinamica nel senso che si spostava a seconda di quale voce clicassi.

emanuele.99

@giapox said:

Se analizzi l'html del sito che hai postato trovi questo:

[html]<li class="item active open">[/html]

La classe active svolge proprio il ruolo che ti accennavamo io e marcocarrieri prima.

Per far visualizzare quella classe dinamicamente sul link relativo alla pagina corrente, devi utilizzare un pò di programmazione lato server (asp o php ad esempio) oppure, se utilizzi CMS tipo WordPress, Drupal o Joomla esistono delle funzioni proprie di questi CMS che fanno ciò che chiedi tu.

Salve mi ricollego anche io alla discussione in quanto ho lo stesso problema solo che uso come piattaforma WordPress potrebbe indicarmi la funzione che dice? Grazie.

Giapox

Ciao emanuele.99, WordPress aggiunge in automatico alle voci dei menu delle classi per indicare la "pagina corrente".

Come ad esempio:

current-menu-item

Ti basterà, quindi, assegnare un colore diverso a questa classe ed il gioco è fatto.