Onglet sélectionné

Bonjour à Tous !

je voudrais faire en sorte que le visiteur sache où il se trouve en se référant au menu,
plus concrètement, si le visiteur se trouve à la page "divers", je souhaiterai que le bouton "divers" reste dans le même état qu'en actif.

j'ai trouvé deux solutions que je n'arrive pas à adapter : ici et ici

voici un 2 extraits de mon code :

- html

<ul id="menu_2">
<li><a id="lien6" href="index.php?page=raccourcis" title="Raccourcis sous différents navigateurs web">Raccourcis clavier</a></li>
<li><a id="lien7" href="index.php?page=normes" title="Divers r&egrave;gles à suivre, des liens vers des sites sp&eacute;cialis&eacute;s">Normes d'accessibilit&eacute;s</a></li>
</ul>

- css

#menu_2 {
position:relative;	
float:left;
top:5px;
left: 71px;
height:93px;
width: 322px;
text-align:center;
font-weight:bold; 
background-image:url(../images/contraste/menu_2.png);
background-repeat:no-repeat;}

#menu_2 li a {	
display: block;	
width: 160px;
color: #000;
font-size: 11px;
height:90px; 
line-height: 24px;	
text-decoration: none;
}

#menu_2 li a:hover  {
background-image:url(../images/contraste/menu_2.png);
}
a#lien6:hover {background-position: -331px 0px;
background-repeat:repeat-x;}
a#lien7:hover {background-position: -491px 0px;
background-repeat:repeat-x;}

#menu_2 li a:active  {
background-image:url(../images/contraste/menu_2.png);
}
a#lien6:active {background-position: -331px 0px;
background-repeat:repeat-x;}
a#lien7:active {background-position: -491px 0px;
background-repeat:repeat-x;}

auriez vous une solution ??

un grand merci d'avance

Bonjour,

Guim a écrit :
auriez vous une solution ??

La FAQ: Comment marquer la page en cours comme active dans le menu ?

Lien corrigé. Merci Guim de l'avoir relevé.
Modifié par Florent V. (20 May 2008 - 18:39)

j'ai honte !

merci pour votre aide

je suis de retour car je n'arrive pas à comprendre la logique de ce code.
par exemple :

<ul id="navigation">
<li><a href="accueil.html">Accueil</a></li>
<li><a href="page1.html">Première page</a></li>
<li><a href="page2.html" id="active">Deuxième page</a></li>
<li><a href="page3.html">Troisième page</a></li>
</ul>

pourquoi y a t'il un id d'attribué au troisième lien et pas aux autres ?
je me suis dis que c'était un exemple, et qu'il fallait en attribuer un à chacun, ce que j'avais déjà fait.
mais en utilisant cette technique (et c'est là que je coince), le lien est constamment activé.
ce que je veux dire par là, c'est qu'il n'y a aucune différence lorsque la page est sélectionnée ou non.

j'ai également regardé par là et par là

ce qui a rendu mon code comme ça :

<ul id="menu_1">
<li><?php if ($pageName == 'ParcoursPage') { echo '<span>Mon parcours</span>'; } else { echo '<a id="lien1" href="index.php?page=parcours" title="Mon CV et autres">Mon parcours</a>'; } ?></li>
<li><?php if ($pageName == 'MusiquePage') { echo '<span>Ma musique</span>'; } else { echo '<a id="lien2" href="index.php?page=musique" title="Mes projets musicaux, seul et en groupe">Ma musique</a>'; } ?></li>
<li><?php if ($pageName == 'PhotothequePage') { echo '<span>Photothèque</span>'; } else { echo '<a id="lien3" href="index.php?page=phototheque" title="Une galerie d images">Photothèque</a>'; } ?></li>
<li><?php if ($pageName == 'DiversPage') { echo '<span>Divers</span>'; } else { echo '<a id="lien5" href="index.php?page=divers" title="Des liens intéressants">Divers</a>'; } ?></li>
<li><?php if ($pageName == 'ContactPage') { echo '<span>Contactez-moi</span>'; } else { echo '<a id="lien4" href="index.php?page=contact" title="Formulaire de contact">Contactez-moi</a>'; } ?></li>
</ul>

bien entendu, avant cela, j'ai ajouté

<?php $pageName = "xxxxxxPage"; ?>

en premiere ligne de chacune de mes pages de contenu pour identifier la page en question.

je continu mes tentatives,
j'ai la certitude de passer à coté de la logique de vos indications,
il y a forcement un passage que j'oublie de lire.

je deviens !!

Bonjour,

Comme l'indique la FAQ, pour marquer un lien précis du menu comme correspondant à la page en cours ou à la rubrique en cours, il faut avoir, dans le code HTML, quelque chose pour identifier ce lien et pas les autres. Ça peut être un identifiant ou une classe, sur le lien lui-même ou sur un élément LI si le menu est une liste UL.

Imaginons un mini-site avec deux pages: information (index.html), et contact (contact.html).

Dans le code d'index.html, on aura le code HTML suivant pour le menu:

<ul id="navigation">
	<li id="current"><a href="index.html">Information</a></li>
	<li><a href="contact.html">Contact</a></li>
</ul>

Et dans le code de contact.html, on aura le code HTML suivant pour le menu:

<ul id="navigation">
	<li><a href="index.html">Information</a></li>
	<li id="current"><a href="contact.html">Contact</a></li>
</ul>

Chaque page aura donc un code HTML qui lui est propre pour le menu, la différence tenant au placement de id="current" (ou class="en_cours" ou autre marqueur...).

Si tu comprends ce principe, il te reste maintenant à l'appliquer. Si tes pages sont en HTML statique (pas d'utilisation d'un langage serveur tel que PHP, pas de système de template, pas de CMS), il te faut des connaissances de base en HTML et CSS pour comprendre ce que tu fais.
Si tu utilises PHP ou un autre langage côté serveur, il te faut des connaissances de base dans ce langage pour mettre ce principe en oeuvre.

Merci Florent,
tout devient limpide,
donc, étant donné que j'utilise ce type de lien :

href="index.php?page=raccourcis" 

je ne peux pas utiliser cette technique.

bon, au moins, c'est déjà ça,
je vais me griller les neurones sur une méthode différente.

Merci encore

Guim a écrit :
donc, étant donné que j'utilise ce type de lien :

href="index.php?page=raccourcis" 

je ne peux pas utiliser cette technique.

Heu... ben si. Mais là c'est dans ton index.php (ou éventuellement dans le fichier où tu as ton menu) qu'il faut réaliser des tests, par exemple sur $_GET['page']. Là c'est le B.A.-ba de PHP.

je viens de lire une 2nd fois ton texte,
et je tenais à te remercier une nouvelle fois :
tu as pris le temps d'écrire un long texte,
de plus, tu as appuyé ton développement avec un exemple très concret.

merci merci

je vois que tu m'as encore aidé pendant que j'écrivais un nouveau message.
je pense que tu en as suffisamment fait,
pour progresser il me faut cogiter.
une fois la solution trouvée, je la posterai.

merci

me re-voila avec un début de solution,
en effet, j'arrive au résultat voulu avec un menu sur deux.
voici celui qui fonctionne parfaitement :

<ul id="menu_2">
	<li><?php if ($pageName == 'raccourcisPage') { echo '<span>Raccourcis clavier</span>'; } else { echo '<a id="lien6" href="index.php?page=raccourcis" title="Raccourcis sous différents navigateurs web">Raccourcis clavier</a>'; } ?>
    </li>
    <li><?php if ($pageName == 'normesPage') { echo '<span>Normes d accessibilités</span>'; } else { echo '<a id="lien7" href="index.php?page=normes" title="Divers règles à  suivre, des liens vers des sites spécialisés">Normes d accessibilités</a>'; } ?>
    </li>
</ul>

avec sa css :

#menu_2 span {
display: block;	
width: 160px;
font-size: 11px;
height:90px; 
line-height: 24px;	
text-align:center;
font-size:0.7em;
color:#666666;
}	

des petites explications :
en ce qui concerne la css, il m'a fallu reporter la quasi totalité des indications (display, width, height, font-size...) pour ne pas avoir d'erreur d'affichage.
en ce qui concerne le reste, tout premièrement, au sommet de chaque page de contenu, il faut ajouter la ligne suivante :

<?php $pageName = "nomdelapage"; ?>

ensuite, dans le index.php (ou autre page mère), il faut customiser les liens des menus (voir au dessus)

je reviens pour conclure une fois la solution entièrement trouvée !

Si ça marche pour un menu sur deux, je suppose que c'est le premier menu qui ne marche pas et le second qui marche?

Ce qui signifie que dans ton index.php tu as d'abord le code qui génère le premier menu, puis l'appel des contenus spécifiques à la page, puis le deuxième menu. Le problème, c'est que la variable dont tu as besoin pour générer ton premier menu comme il faut est placée dans le fichier appelé après la création de ce menu. Donc au moment de générer le menu, PHP n'a pas connaissance de cette variable.

en fait, à ce niveau, le menu 1 n'a jamais fonctionné.
je pense que ça vient du fait qu'il n'est pas totalement identique aux autres menus,

voici la css du menu 1 :

/* menu 1 */
#menu_1 {
position: relative;	
background-image: transparent url(../images/contraste/menu_1.png);
background-repeat:no-repeat;	
float:left;
top: 3px;
left: 66px;
width: 531px;
height: 90px;
text-align: center;
font-size: 11px;
font-weight:bold; 
padding-bottom:16px;
}

#menu_1 li a {	
display: block;	
width: 106px;
color: #000;
line-height: 196.5px;	
text-decoration: none;
}

#menu_1, li a:hover {
background-image:url(../images/contraste/menu_1.png);}

a#lien1:hover {background-position: -550px 0px;
background-repeat:repeat-x;}
a#lien2:hover {background-position: -656px 0px;
background-repeat:repeat-x;}
a#lien3:hover {background-position: -762px 0px;
background-repeat:repeat-x;}
a#lien5:hover {background-position: -868px 0px;
background-repeat:repeat-x;}
a#lien4:hover {background-position: -974px 0px;
background-repeat:repeat-x;}

#menu_1, li a:active {
background-image:url(../images/contraste/menu_1.png);}

a#lien1:active {background-position: -1102px 0px;
background-repeat:repeat-x;}
a#lien2:active {background-position: -1208px 0px;
background-repeat:repeat-x;}
a#lien3:active {background-position: -1314px 0px;
background-repeat:repeat-x;}
a#lien5:active {background-position: -1420px 0px;
background-repeat:repeat-x;}
a#lien4:active {background-position: -1526px 0px;
background-repeat:repeat-x;}

et voici la css du menu 2 (qui est identique aux autres) :

/* menu 2 */
#menu_2 {
position:relative;	
float:left;
top:5px;
left: 71px;
height:93px;
width: 322px;
text-align:center;
font-weight:bold; 
background-image:url(../images/contraste/menu_2.png);
background-repeat:no-repeat;}

#menu_2 li a {	
display: block;	
width: 160px;
color: #000;
font-size: 11px;
height:90px; 
line-height: 24px;	
text-decoration: none;
}

#menu_2 span {
display: block;	
width: 160px;
font-size: 11px;
height:90px; 
line-height: 24px;	
text-align:center;
font-size:0.7em;
color:#666666;
}	


#menu_2 li a:hover  {
background-image:url(../images/contraste/menu_2.png);
}

a#lien6:hover {background-position: -331px 0px;
background-repeat:repeat-x;}
a#lien7:hover {background-position: -491px 0px;
background-repeat:repeat-x;}

#menu_2 li a:active  {
background-image:url(../images/contraste/menu_2.png);
}

a#lien6:active {background-position: -331px 0px;
background-repeat:repeat-x;}
a#lien7:active {background-position: -491px 0px;
background-repeat:repeat-x;}

comme vous avez pu le remarquer, la différence réside dans la "," du #menu_1, li a:hover & active.
pour x raisons, cette virgule est impérative pour que l'ensemble des menus fonctionne.

c'est pour cela qu'en ce moment j'essaye de trouver une formule du genre

menu_1, span {...

y a bien une formule qui va fonctionner

re-bonjour !

alors,
après moult tentatives,
j'ai constaté que cette technique fonctionnait très bien avec des menus traditionnelles (qu'ils soient 2 et +),
mais dans mon cas, je n'ai pas trouvé de réelle solution. le probleme vient de la satané "," de la css du menu 1.
bref, pour y remédier, j'ai simplement ajouté à mon site un petit logo qui change d'aspect en fonction de la page affiché.
ce n'est pas mieux, mais ce n'est pas moins bien non-plus !

si un jour je trouve une solution, je me ferai un plaisir de la poster dans cette rubrique.

merci pr votre aide !