CSS: Jak zmienić kolor aktywnego menu strony nawigacyjnej

Question

Próbuję zmienić kolor aktywnego lub bieżącego łącza nawigacyjnego strony wybranego przez użytkownika w mojej witrynie. Co ja robię źle? Dzięki.

Dotychczas CSS wygląda następująco:

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;} 

A mój HTML wywołuje szablon strony dla menu nawigacji za pomocą włączenia funkcji PHP:

<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

myślę, że są coraz mylić co robi selektor a:active CSS. Spowoduje to zmianę koloru łącza tylko wtedy, gdy go klikniesz (i tylko przez czas trwania kliknięcia, tj. Jak długo przycisk myszy pozostaje w pozycji dolnej). Musisz wprowadzić nową klasę, np. .selected do swojego CSS, a po wybraniu łącza zaktualizuj wybrany element menu o nową klasę, np.

<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; } 

Trzeba będzie zaktualizować szablon strony do podjęcia w parametrze selectedPage.

Answer 2

Dodaj ID current dla strony aktywnej/bieżącej:

<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

Stan CSS :active oznacza stan aktywny klikniętego łącza - moment, w którym został kliknięty, ale nie został jeszcze zwolniony przycisk myszy. Nie wie, która strona jest włączona i nie może zastosować żadnych stylów do elementów menu.

Aby rozwiązać problem trzeba utworzyć klasę i dodać go ręcznie do menu bieżącej strony za:

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>