18041 sujets

Questions générales et questions de débutants

Menu CSS avec onglet "en cours" d'une couleur différente

Bonjour à tous,

J'ai créé un menu qui apparaît en haut de toutes mes pages (je ne reproduis pas le menu sur chaque page, c'est simplement le contenu de ma div "section" qui change).
Je cherche à ce que l'onglet "actif" (en cours) de ce menu prenne une autre couleur quand on est sur la section concernée.
J'ai déjà regardé de nombreux forums, on conseille soit de créer une classe "en cours" pour l'onglet en cours (impossible pour moi, car cela suppose d'inclure le menu à chaque page en modifiant l'onglet en classe "en cours"); soit d'utiliser le langage PHP, que je ne connais pas.
J'ai pourtant l'impression que c'est possible avec CSS : voilà ce que je cherche : http://andreasviklund.com/files/demo/cv-template-brg/

Mais quand j'utilise le même format de code css, cela ne marche pas.

Voilà mes codes :
HTML :
<ul style="height: 50px;" id="menu" align="center">
<li><a href="#accueil" title="Accueil">Accueil</a></li>
<li><a class="enjeux" href="#enjeux" title="Enjeux">Enjeux</a></li>
<li><a class="demarche" href="#demarche" title="Démarche">Démarche</a></li>
<li><a class="equipe" href="#equipe" title="équipe">Equipe</a></li>
<li><a class="documents" href="#documents" title="Publications">Publications</a></li>
</ul>

CSS :
#menu {
margin-top:0px;
margin-bottom:0px; padding-bottom: 0px; padding-top: 0px;
margin-left : 0;}


#menu li {
display:block;
float:left;
width: 19%; text-align: center; height: 42px;
margin-left:1%;
position:relative;
}

#menu li a {
display:block;
height:40px;
line-height:42px;
color:#333;
font-size:18px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
margin-top:0px;
margin-bottom:0px;
background-color:#e6e6e6;
}
#menu li:active a.enjeux { background-color:#737373; }

Merci pour votre attention !

Quitterie
C'est fou ça je viens justement d'implémenter l'idée à la différence que je n'agit pas sur la couleur de fond mais sur un élément créé par la pseudo classe :after.

Que de confusion avec la pseudo classe :active qui ne fait pas référence à un élément activé mais à un élément en cours d'activation (instant t entre le clic et son relâchement).

Un menu statique ne permet pas ce genre de process uniquement en codant du HTML et du CSS ; tu es obligé d'y inclure du post-traitement (aka PHP).

Pour ma part j'ai créé une variable (en PHP) unique par page. Au moment du post-traitement, le script vérifie la page en cours et associe la variable correspondant à la page en cours de chargement.

Cette variable est ensuite testée au sein de mon menu (toujours en PHP) par une conditionnelle. Si la variable correspond à l'élément de mon menu alors la condition ajoute une classe à l'élément sinon, l'élément de mon menu reste sans classe de définie.

Ce n'est qu'après que je fais intervenir le CSS. Dans ma feuille de style je cible la classe (celle susceptible d'être renvoyée par ma conditionnelle) et la personnalise afin d'obtenir mon marqueur visuel (un fond, couleur, style etc...).

Tu pourrais bien sûr obtenir ce résultat en JavaScript mais perso j'évite l'usage de JS car il reste désactivable côté client. Alors que pour désactiver PHP... tatin :-P

C'est pourquoi l'apprentissage (même partiel) du php semble indispensable au fur et à mesure où on progresse en html (et css par extension).
Modifié par Greg_Lumiere (29 Oct 2014 - 18:02)
Salut quitterie,

Pour compléter la réponse de Greg_Lumiere qui est pertinente tu peux typiquement utiliser ce modèle de code suivant. Bien sûr plein de solutions sont envisageables, mais celle-ci est simple et fait le minimum appel à PHP.
Cependant, ce script ne fonctionne que si tu changes de page (pas de système d'ancres sur une "One Page").
Dans ton fichier contenant ton menu (renommé par exemple menu.php) :
<ul class="<?php echo $page; ?>" style="height: 50px;" id="menu" align="center">
  <li><a class="accueil" href="/" title="Accueil">Accueil</a></li>
  <li><a class="enjeux" href="enjeux.php" title="Enjeux">Enjeux</a></li>
  <li><a class="demarche" href="demarche.php" title="Démarche">Démarche</a></li>
  <li><a class="equipe" href="equipe.php" title="équipe">Equipe</a></li>
  <li><a class="documents" href="documents.php" title="Publications">Publications</a></li>
</ul>

Au début de chaque page (enjeux.php par exemple) tu insères ce code à l'endroit exact où tu veux ton menu :
<?php $page = 'enjeux'; //le nom de la page
include('menu.php'); //on insère le menu
?>

Ensuite dans ton fichier CSS tu remplaces
#menu li:active a.enjeux { background-color:#737373; }

par
.accueil a.accueil,
.enjeux a.enjeux,
.demarche a.demarche,
.equipe a.equipe,
.documents a.documents{
  background-color:#737373;
}


Si tu veux conserver ton modèle de "One Page", il faudra passer par JS (et jQuery pour faciliter la chose).

Voilà, n'hésite pas à faire un retour sur ce code Smiley cligne
Bonne soirée
Matthieu
Bonjour à tous,

Merci pour vos réponses. Par manque de temps, j'ai finalement choisi de renoncer au "One page" et j'ai simplement définie une classe "en cours" que j'ai appliqué à chaque fois au bouton correspondant à la page en cours.
Je n'ai malheureusement pas pu tester vos codes, j'espère qu'ils pourront l'être prochainement !
Merci encore,

Quitterie
Sujet clos
Aller à