web-dev-qa-db-fra.com

CSS: Comment changer la couleur du menu de la page de navigation active

J'essaie de changer la couleur du lien de navigation de page actif ou actuel qui est sélectionné par l'utilisateur sur mon site Web. Qu'est-ce que je fais mal? Merci.

Jusqu'à présent, le CSS ressemble à ceci:

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

Et mon HTML appelle un modèle de page pour le menu de navigation en utilisant la fonction include 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>
cssnavigation
11
Steven

Je pense que vous vous trompez sur ce que le a:active Le sélecteur CSS le fait. Cela ne changera la couleur de votre lien que lorsque vous cliquez dessus (et uniquement pendant la durée du clic, c'est-à-dire pendant combien de temps le bouton de votre souris reste enfoncé). Ce que vous devez faire, c'est introduire une nouvelle classe, par ex. .selected dans votre CSS et lorsque vous sélectionnez un lien, mettez à jour l'élément de menu sélectionné avec une nouvelle classe, par exemple.

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

Vous devrez mettre à jour votre page de modèle pour intégrer un paramètre selectedPage.

22
James

Le CSS :active état signifie l'état actif du lien cliqué - le moment où vous avez cliqué dessus, mais pas encore relâché le bouton de la souris, par exemple. Il ne sait pas sur quelle page vous vous trouvez et ne peut appliquer aucun style aux éléments de menu.

Pour résoudre votre problème, vous devez créer une classe et l'ajouter manuellement au menu de la page actuelle:

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

Ajoutez l'ID current pour la page active/actuelle:

<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.