CSS: Come cambiare il colore del menu della pagina di navigazione attiva

Question

Sto provando a cambiare il colore del link di navigazione della pagina attivo o corrente che è selezionato dall'utente sul mio sito web. Che cosa sto facendo di sbagliato? Grazie.

Finora il CSS si presenta così:

div.menuBar 
{ 
    font-family: BirchStd; 
    font-size: 40px; 
    line-height: 40px; 
    font-weight: bold; 
    text-align: center; 
    letter-spacing: -0.1em; 
} 

div.menuBar li{list-style:none; display: inline;} 
div.menuBar li a:active{color:#FF0000;} 
div.menuBar ul{margin:0;} 

E il mio HTML chiama un modello di pagina per il menu di navigazione utilizzando la funzione PHP includono:

<div class="menuBar"> 
    <ul> 
    <li><a href="index.php">HOME</a></li> 
    <li><a href="two.php">PORTFOLIO</a></li> 
    <li><a href="three.php">ABOUT</a></li> 
    <li><a href="four.php">CONTACT</a></li> 
    <li><a href="five.php">SHOP</a></li> 
</ul> 

Answer 1

penso che hai trovato confuso su ciò che il selettore CSS a:active fa. Questo cambierà solo il colore del tuo link quando lo fai clic (e solo per la durata del click, cioè per quanto tempo il tuo pulsante del mouse rimane inattivo). Quello che devi fare è introdurre una nuova classe, ad es. .selected nel tuo CSS e quando selezioni un collegamento, aggiorna la voce di menu selezionata con la nuova classe, ad es.

<div class="menuBar"> 
    <ul> 
     <li class="selected"><a href="index.php">HOME</a></li> 
     <li><a href="two.php">PORTFOLIO</a></li> 
     .... 
    </ul> 
</div> 

// specific CSS for your menu 
div.menuBar li.selected a { color: #FF0000; } 
// more general CSS 
li.selected a { color: #FF0000; } 

Sarà necessario aggiornare il modello di pagina a prendere in un parametro selectedPage.

Answer 2

Aggiungi ID current per pagina attiva/corrente:

<div class="menuBar"> 
    <ul> 
    <li id="current"><a href="index.php">HOME</a></li> 
    <li><a href="two.php">PORTFOLIO</a></li> 
    <li><a href="three.php">ABOUT</a></li> 
    <li><a href="four.php">CONTACT</a></li> 
    <li><a href="five.php">SHOP</a></li> 
</ul> 

#current a { color: #ff0000; } 

Answer 3

Lo stato del CSS :active indica lo stato attivo del collegamento cliccato - il momento in cui è stato cliccato su di esso, ma non ancora rilasciato il pulsante del mouse, ad esempio. Non sa su quale pagina ci si trova e non è possibile applicare alcuno stile agli elementi del menu.

Per risolvere il problema è necessario creare una classe e aggiungerlo manualmente al menu della pagina corrente:

a.active { color: #f00 } 

<ul> 
    <li><a href="index.php" class="active">HOME</a></li> 
    <li><a href="two.php">PORTFOLIO</a></li> 
    <li><a href="three.php">ABOUT</a></li> 
    <li><a href="four.php">CONTACT</a></li> 
    <li><a href="five.php">SHOP</a></li> 
</ul>