Bonjour,

J'ai fais un menu avec des li et ul et des hovers pour le style et je voulais savoir comme fait-on pour faire en sortes que le bouton dans le menu soit en couleur quand je suis sur la page du bouton. C'est dur à expliquer mais en gros comme sur OC avec les boutons Forum cours prénium, on voit qui 'il est en couleur quand on est dessus.

/*Bouton dans le Header.php*/
#menu-demo2, #menu-demo2 ul{
padding:0px;
margin:0px;
list-style:none;
text-align:center;
}
#menu-demo2 li{
display:inline-block;
position:relative;
border-radius:0px 0px 0 0;
}
#menu-demo2 ul li{
display:inherit;
border-radius:0;
}
#menu-demo2 ul li:hover{
border-radius:0;
}
#menu-demo2 ul li:last-child{
border-radius:0 0 0px 0px;
}
#menu-demo2 ul{
position:absolute;
z-index: 1000;
max-height:0px;
left: 0;
right: 0;
margin-right: 0px;
overflow:hidden;
-moz-transition: .8s all .3s;
-webkit-transition: .8s all .3s;
transition: .8s all .3s;
}
#menu-demo2 li:hover ul{
max-height:15em;
}
/* background des liens menus */
#menu-demo2 li:first-child{
background-color: black;
}
#menu-demo2 li:nth-child(2){
background-color: black;
}
#menu-demo2 li:nth-child(3){
background-color: black;
}
#menu-demo2 li:nth-child(4){
background-color: black;
}
#menu-demo2 li:last-child{
background-color: black;
}
/* background des liens sous menus */
#menu-demo2 li:first-child li{
background:rgb(0,0,0);
}
#menu-demo2 li:nth-child(2) li{
background:rgb(0,0,0);
}
#menu-demo2 li:nth-child(3) li{
background:rgb(0,0,0);
}
#menu-demo2 li:nth-child(4) li{
background:rgb(0,0,0);
}
#menu-demo2 li:last-child li{
background:rgb(0,0,0);
}
/* background des liens menus et sous menus au survol */
#menu-demo2 li:first-child:hover, #menu-demo2 li:first-child li:hover{
background:rgb(134,0,3);

}
#menu-demo2 li:nth-child(2):hover, #menu-demo2 li:nth-child(2) li:hover{
background:rgb(134,0,3);

}
#menu-demo2 li:nth-child(3):hover, #menu-demo2 li:nth-child(3) li:hover{
background:rgb(134,0,3);

}
#menu-demo2 li:nth-child(4):hover, #menu-demo2 li:nth-child(4) li:hover{
background:rgb(134,0,3);

}
#menu-demo2 li:last-child:hover, #menu-demo2 li:last-child li:hover{
background:rgb(134,0,3);

}

#menu-demo2 li:first-child:active, #menu-demo2 li:first-child li:active{
background:rgb(134,0,3);

}
#menu-demo2 li:nth-child(2):active, #menu-demo2 li:nth-child(2) li:active{
background:rgb(134,0,3);

}
#menu-demo2 li:nth-child(3):active, #menu-demo2 li:nth-child(3) li:active{
background:rgb(134,0,3);

}
#menu-demo2 li:nth-child(4):active, #menu-demo2 li:nth-child(4) li:active{
background:rgb(134,0,3);

}
#menu-demo2 li:last-child:active, #menu-demo2 li:last-child li:active{
background:rgb(134,0,3);

}
/* les a href */
#menu-demo2 a{
text-decoration:none;
display:block;
padding:8px 32px;
color:#fff;
font-family:arial;
}
#menu-demo2 ul a{
padding:8px 0;
}
#menu-demo2 li:hover li a{
color:#fff;
text-transform:inherit;
}
#menu-demo2 li:hover a, #menu-demo2 li li:hover a{
color:#000;
}
/*Fin des boutons */

Voila le code des mes boutons et les boutons en question. Après il faut peut être utiliser JavaScript, mais je ne sais pas du tout

Merci pour votre aide cordialement.

-
Edité par Clément.Pa 15 juin 2018 à 16:06:13

Bonjour,

avez vous essayer ceci ? 

https://developer.mozilla.org/fr/docs/Web/CSS/:focus

en CSS ça doit ressembler a 

a:focus {

    propriété

}

Cordialement

-
Edité par KévinH 15 juin 2018 à 16:08:10

Oui le focus j'ai essayer, mais sa ne fonctionne pas

ça fonctionne que sur les inputs il me semble ( je ne suis pas sur )

Merci pour votre réponse

-
Edité par Clément.Pa 15 juin 2018 à 16:13:38

As tu essayer avec a:active ?

Ces deux liens devrait t’intéresser :

https://www.alsacreations.com/astuce/lire/28-styles-lien-page-en-cours.html

https://itx-technologies.com/blog/810-lien-actif-dun-menu-en-php-et-css

Affaire à suivre

-
Edité par KévinH 15 juin 2018 à 16:46:33

Oui également j'ai tester ces deux fonction mais a:active c'est en faite quand on appuie sur le bouton qu'il fonctionne.

Merci pour les liens je vais regarder ça

-
Edité par Clément.Pa 15 juin 2018 à 16:49:02

Bonjour,

Une discussion et des solutions à ce sujet ici:

https://openclassrooms.com/forum/sujet/question-simple-css-js

Bonjour,

Je pense qu'il y a incompréhension.

A mon avis c'est lorsque tu génères ta page (en PHP je suppose) que tu dois affecter une classe CSS spécifique à ton bouton si c'est celui de la page actuelle ...

Par exemple :

<?php
	foreach( $boutons as $bouton ) {
?>
		<a class="<?php $pageActuelle == $bouton->nom ? 'bouton-actif' : ''; ?>" href="<?php bouton->url; ?>"><?php $bouton->libelle; ?></a>
<?php
	}
?>

Et côté CSS tu as :

.bouton-actif {
    background: #CCC;
}