28173 sujets

CSS et mise en forme, CSS3

Optimisation d'un menu horizontal

Bonjour,
je cherche à améliorer un de mes menus horizontaux.
Il est composé de deux images qui m'autorisent un effet de rollover :

#menu_bar {
  height:40px;
  clear: both;
}

#menu_bar ul {
  margin-top: 0px;
  padding-left: 0px;
  margin-left: 0px;
  background: #FF6600 url('../img/menu_bg.gif') top left repeat-x;
  color: White;
  float: left;
  width: 100%;
  font-family: verdana, arial, sans-serif;
  font-size:14px;
  font-weight: bold;
}

#menu_bar ul li { display: inline; }

#menu_bar ul li a
{
  padding-top:5px;
  padding-bottom:5px;
  padding-left:15px;
  padding-right:15px;
  background: #FF6600 url('../img/menu_bg.gif') top left repeat-x;
  color: #EFEFEF;
  text-decoration: none;
  float: left;
  border-right: 1px solid #fff;
}

#menu_bar ul li a:hover
{
  background: #FF6600 url('../img/menu_hover_bg.gif') top left repeat-x;
  color: #FFFFFF;
}

#menu_bar ul li img
{
  padding-top:1px;
  padding-bottom:0px;
  padding-left:15px;
  padding-right:15px;
  color: #FFFFFF;
  float: left;
}


Donc pour le moment, j'ai un signal visuel lorsque le mulot passe sur un item de menu.
Je voudrais maintenant que lorsqu'on se trouve sur la page correspondant à l'item choisi par l'internaute, il y ait un signal visuel supplémentaire sur ce menu : une couleur de police différente par exemple, ou une autre image de fond.

Mais comment faire le lien entre le contenu de la page et l'item du menu correspondant, sachant que j'utilise aussi un include php pour inclure ce menu ?

J'ai imaginé que je devrai donner un ID au body de la page, par lequel je déclarerai dans le css la configuration graphique particulière quand on se trouve dessus et faire réagir l'item de menu.

Mais mon imagination a ses limites...

Merci pour vos lumières.
Bonjour,

S'il s'agit de modifier le style de tous le menu suivant la page ou la rubrique sur laquelle on se trouve: on donnera un identifiant ou une classe soit à body, soit au menu lui-même, et on adaptera le CSS en fonction.

S'il s'agit de marquer dans un menu le lien qui correspond à la page ou à la rubrique en cours... c'est un sujet traité maintes fois sur le forum, donc je te laisse faire une petite recherche (notamment dans la FAQ...). Smiley cligne
Florent V. a écrit :


S'il s'agit de marquer dans un menu le lien qui correspond à la page ou à la rubrique en cours... c'est un sujet traité maintes fois sur le forum, donc je te laisse faire une petite recherche (notamment dans la FAQ...). Smiley cligne


Bonjour,
c'est ce cas-là qui m'intéresse effectivement.
J'ai trouvé 
http://forum.alsacreations.com/faq/faq-30-Comment-marquer-la-page-en-cours-comme-active-dans-le-menu-.html
dans la faq, mais sans la faire fonctionner correctement.

Mettons que je veuille un "menu bar" avec chaque item marqué selon la page où l'on se trouve, le texte du lien concerné passera du blanc au noir :

#menu_bar {
  height:40px;
  background: #FFFFFF;
  clear: both;
}

#menu_bar ul {
  margin-top: 0px;
  padding-left: 0px;
  margin-left: 0px;
  background: #FF6600;
  color: White;
  float: left;
  width: 100%;
  font-family: verdana, arial, sans-serif;
  font-size:14px;
  font-weight: bold;
}

#menu_bar ul li { display: inline; }

#menu_bar ul li a
{
  padding-top:5px;
  padding-bottom:5px;
  padding-left:15px;
  padding-right:15px;
  background: #FF6600;
  color: #EFEFEF;
  text-decoration: none;
  float: left;
  border-right: 1px solid #fff;
}

#menu_bar ul li a:hover
{
  background: #FF6600;
  color: #FFFFFF;
}

#menu_bar ul li a:active {
  color: Black;
/* propriétés CSS spécifiques au lien actif ; */
}


Dans le html :

<div id="menu_bar">
<ul>
  <li><a href="index.php" title="Retour au d&eacute;but" id="active">Accueil<br />
    </a></li>
<ul/>
</div>

(ce menu est inséré grâce à un include php)

Ca n'a aucun effet. Qu'est-ce qui ne va pas ?
JJJ a écrit :
Ca n'a aucun effet. Qu'est-ce qui ne va pas ?

Ce qui ne va pas, c'est que tu as lu l'item de la FAQ que tu as trouvé en diagonale. Je cite:

a écrit :
La pseudo-classe a:active est souvent sujette à mauvaise interprétation.
a:active permet de provoquer un changement d'état au moment de l'activation du lien (état très temporaire). Mais une fois activé, le lien est considéré comme visité.
a:active n'est pas prévu pour permettre de marquer une page comme active dans un menu.


Dans ton code HTML, tu génère un identifiant "active" sur un li en particulier (celui correspondant à la page ou rubrique en cours, je suppose). C'est une erreur d'avoir choisi ce nom d'identifiant, car tu entretiens la méprise entre:
- je modifie mon code HTML à la volée pour avoir une indication concrète permettant de cibler le lien à mettre en valeur (vraie solution);
- j'utilise la pseudo-classe :active (fausse solution, cf. la FAQ).

Tu as le code CSS suivant:
#menu_bar ul li a:active {
  color: Black;
/* propriétés CSS spécifiques au lien actif ; */
}


Et il te faudrait plutôt:
#menu_bar ul li a#active {
  color: black;
/* propriétés CSS spécifiques au lien actif ; */
}

(Attention à la différence entre pseudo-classe et identifiant, ça n'a rien à voir.)

Mais je conseille tout de même de changer l'identifiant "active" en quelque chose de moins perturbant, par exemple "encours" ou (si on veut de l'anglais) "current". Ce qui donnera côté CSS:
#menu_bar ul li a#encours {
  color: black;
/* propriétés CSS spécifiques au lien actif ; */
}
Bonjour,
merci beaucoup pour la précision et le coup de main.
Alors graphiquement, c'est correct et ça semble fonctionner.

Le souci de dernière minute, c'est que si j'attribue cet id="actuel" ou "encours" à tous les liens de mon menu, celà affecte tous ces liens en même temps. Je resignale que ce menu apparaît sur toutes les pages grâce à un include php, à toute fin utile.

Il me semblait que si je me trouvais simplement sur la page machin.php, alors le lien correspondant dans le menu serait affecté par l'effet. Ce n'est pas le cas dans les faits, tous les liens sont affectés avant naviguation dès lors que j'inclue l'ID.
Mon menu inclu par php est ainsi :

<div id="menu_bar">
<ul>
  <li><a href="index.php" title="Retour au d&eacute;but" id="actuel">Accueil<br />
    </a></li>
  <li><a href="carte.php" title="Lien 2" id="actuel">Lien 2<br />
    </a></li>
  <li><a href="pratique.php" title="Lien 3" id="actuel">Lien 3<br />
    </a></li>
</ul>
</div>

Modifié par JJJ (27 Nov 2007 - 14:43)
JJJ a écrit :
Le souci de dernière minute, c'est que si j'attribue cet id="actuel" ou "encours" à tous les liens de mon menu, celà affecte tous ces liens en même temps.

Euh... ben oui, le principe est justement de n'avoir qu'un seul identifiant (rappel: les identifiants sont uniques pour un document donné), sur le bon lien ou le bon li, et pas ailleurs.

JJJ a écrit :
Je resignale que ce menu apparaît sur toutes les pages grâce à un include php, à toute fin utile.

Il faut pouvoir, en PHP, générer l'attribut id="actuel" au bon endroit, en fonction de la page en cours (identifiée par un moyen ou un autre).
Si tu ne sais pas faire ça... eh bien, comme disent nos amis anglo-saxons: well, you're fucked. Smiley smile

JJJ a écrit :
Il me semblait que si je me trouvais simplement sur la page machin.php, alors le lien correspondant dans le menu serait affecté par l'effet.

Ça serait bien, mais la programmation ça n'est pas la magie. Smiley smile
Concrètement, la notion de «lien pointant vers la page en cours» n'existe pas dans les navigateurs, et on ne peut donc pas faire appel à cette notion en CSS. Il faut pouvoir dire explicitement «ceci correspond à la page en cours, et pas le reste» dans le code HTML.

À la rigueur, il y a peut-être aussi une piste à creuser en Javascript.

JJJ a écrit :
Ce n'est pas le cas dans les faits

Ni dans les faits, ni en théorie (oui je sais, j'en rajoute un peu... mais un peu de répétition ne fait pas de mal...).
Florent V. a écrit :

Euh... ben oui, le principe est justement de n'avoir qu'un seul identifiant (rappel: les identifiants sont uniques pour un document donné), sur le bon lien ou le bon li, et pas ailleurs.


C'est bien ce qui me pose des problèmes, avec ce foutu include.

a écrit :
Il faut pouvoir, en PHP, générer l'attribut id="actuel" au bon endroit, en fonction de la page en cours (identifiée par un moyen ou un autre).
Si tu ne sais pas faire ça... eh bien, comme disent nos amis anglo-saxons: well, you're fucked. Smiley smile


Je dirais plutôt... Read The Fucking Manuel

Conclusion : j'ai abandonné mon inclusion php, pourtant bien pratique, et tout correctement codé en dur dans le html.

a écrit :
Ça serait bien, mais la programmation ça n'est pas la magie. Smiley smile

C'est bien pourquoi je suis en quête de pistes... Smiley cligne Je ne parle pas encore à mon écran pour lui faire produire ce que j'attends.

a écrit :
À la rigueur, il y a peut-être aussi une piste à creuser en Javascript.


Je serais preneur, mais je m'en méfie. Le javascript n'est jamais garanti d'être forcément activé sur le naviguateur client, et en abuser pour un menu (outil d'usage du site majeur) c'est risqué à mon sens.
Sujet clos
Aller à