it-swarm.com.de

CSS: So ändern Sie die Farbe des aktiven Navigationsseitenmenüs

Ich versuche, die Farbe des aktiven oder aktuellen Seitennavigationslinks zu ändern, der vom Benutzer auf meiner Website ausgewählt wird. Was mache ich falsch? Vielen Dank.

Bisher sieht das CSS so aus:

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

Und mein HTML ruft eine Seitenvorlage für das Navigationsmenü mit der Funktion include PHP auf:

<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>
11
Steven

Ich denke, Sie werden verwirrt darüber, was die a:active CSS-Selektor funktioniert. Dies ändert nur die Farbe Ihres Links, wenn Sie darauf klicken (und nur für die Dauer des Klicks, d. H. Wie lange Ihre Maustaste gedrückt bleibt). Sie müssen lediglich eine neue Klasse einführen, z. .selected in Ihr CSS ein, und wenn Sie einen Link auswählen, aktualisieren Sie das ausgewählte Menüelement mit einer neuen Klasse, z.

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

Sie müssen Ihre Vorlagenseite aktualisieren, um einen selectedPage -Parameter aufzunehmen.

22
James

Das CSS :active state bedeutet den aktiven Zustand des angeklickten Links - zum Beispiel den Moment, in dem Sie darauf geklickt, aber die Maustaste noch nicht losgelassen haben. Es weiß nicht, auf welcher Seite Sie sich befinden, und kann keine Stile auf die Menüelemente anwenden.

Um Ihr Problem zu beheben, müssen Sie eine Klasse erstellen und diese manuell zum Menü der aktuellen Seite hinzufügen:

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>
5
Zoltan Toth

ID hinzufügen current für aktive/aktuelle Seite:

<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; }
3
Nikola K.