Bonjour a tous. Ca fait un mois que je me casse la tête car le client aimerait bien lorsqu'il clique sur un élément du menu celui reste activé par exemple par un changement de couleur. Pour l'instant, si on clique et on relache un "bouton" du menu, on perd l'activation du "bouton". J'ai utilisé la technologie CSS avec les pseudo-frames. En fait, l'en-tete,le menu et le pied de page reste figé, seule le contenu central de la page change selon le lien cliqué du menu.
voici une partie du code de ma page index.php
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="index.php?page=accueil">Accueil</a></li>
<li><a href="index.php?page=news">Actualité</a></li>
<li><a href="index.php?page=references">Références</a></li>
<li><a href="index.php?page=telechargement">Téléchargement</a></li>
<li><a href="index.php?page=contact">Contact</a></li>
</ul>
</div>

<DIV class=frame>
<?php 
$tab=array('index'=>'index.php', 'accueil'=>'accueil.php, 'news'=>'news.php', 'references'=>'references.php','telechargement'=>'telechargement.php','contact'=>'contact.php');

if (isset($_GET['page'])  && isset($tab[$_GET['page']])) {
	include($tab[$_GET['page']]);
}
else include('accueil.php');
?>
</DIV>


voici une partie de mon css : le menu
#navlist {
color : white; 
background : #17a; 
border-bottom : 0.2em solid #17a; 
border-right : 0.2em solid #17a; 
padding : 0 1px; 
margin-left : 0; 
position : absolute; 
font : normal 0.6em Verdana, sans-serif; 
text-align : left; 
padding-left : 8px; 
list-style-type : none; 
} 
#navlist li {
list-style : none; 
margin : 0; 
font-size : 0.5em; 
font-weight : bold; 
} 
#navlist a {
display : block; 
text-decoration : none; 
margin-bottom : 0.1em; 
margin-top : 0.1em; 
color : white; 
background : #39c; 
border-width : 1px; 
border-style : solid; 
border-color : #5bd #035 #068 #6cf; 
border-left : 1em solid #fc0; 
padding : 0.25em 0.5em 0.4em 0.75em; 
} 
#navlist a {
font-size : 10px; 
voice-family : "\"}\""; 
voice-family : inherit; 
width : 92px; 
height : 20px; 
} 
#navlist a:hover {
background : #28b; 
border-color : #069 #6cf #5bd #fc0; 
padding : 0.4em 0.35em 0.25em 0.9em; 
} 
#navlist a:active {
background : #17a; 
border-color : #069 #6cf #5bd white; 
padding : 0.4em 0.35em 0.25em 0.9em; 
} 

#navlist a:focus {
background : #17a; 
border-color : #069 #6cf #5bd white; 
padding : 0.4em 0.35em 0.25em 0.9em; 
} 

Modifié par Laurent Denis (04 Jan 2006 - 13:08)
Bonjour,

ça se gère avec une classe ou un id générés via PHP et appliqués au lien correspondant... à la page en cours.

<politiquement totalement incorrect>C'est tout de même un petit peu gênant de ne pas savoir le faire et d'avoir des clients.</>
Modifié par Laurent Denis (04 Jan 2006 - 13:11)
Merci pour cette réponse mais je ne comprends pas comment gèrer cela avec une classe ou un id générés par PHP. As tu un exemples à me donner ou un tutorial sur ce sujet.
SAlut, Utilises le moteur de recherche du forum, tu tape include et tu aurai pu trouver une de ces pages la qui te donne la réponse pour le php, pour apporter une id a chaque page.

http://forum.alsacreations.com/topic-2-10115-1-Remplacement-iframes.html#p82680

Apres pour que tu ai ton menu d'actif, tu peux regarder la css des site qui ont ce systeme.

Ca donne ceci :

body#accueil a#accueilnav,
body#localisation a#localisationnav

{

text-decoration : underline overline;
color:#9900CC;
}



Ca c'est à mettre dans ta css. Il represente une id, c'est pour cela que le lien que tu voudras voir comme actif devra etre codé comme ceci :

<ul class="menusite">
		
					<li><a href="index.php" id="accueilnav">Accueil</a></li>
		
					<li><a href="localisation.php" id="localisationnav">Localisation</a></li>

</ul>


Bonne chance
j'ai essayé mais ca ne fonctionne pas. Peut-on vraiment activer un élément du menu juste avec des CSS sachant que je charge toujours la meme feuille? Ce serait cool si quelqu'un puisse m'écrire une partie du code a partir du code source tout en haut. Merci
jeprog a écrit :
j'ai essayé mais ca ne fonctionne pas. Peut-on vraiment activer un élément du menu juste avec des CSS sachant que je charge toujours la meme feuille? Ce serait cool si quelqu'un puisse m'écrire une partie du code a partir du code source tout en haut. Merci


Bonjour et bienvenue,

Une recherche dans le forum ou bien un rapide tour dans la faq donne ceci: Comment marquer la page en cours comme active dans le menu ?, soient trois solutions différentes présentées Smiley cligne .

Ceci dit il me semble que tu fait quelques confusions d'une part avec les "id" et les "pseudo-class" en particulier avec ":active" dont la définition est:
a écrit :
La pseudo-classe :active, qui est appliquée quand l'utilisateur active un élément. Par exemple, entre le moment où l'utilisateur presse le bouton de la souris et le relâche.

5.11.3 Les pseudo-classes dynamiques : :hover, :active et :focus
J'avais effectivement été voir tous les liens que vous m'avez cité. Je ne suis pas non plus un gros débutant. Il y apparemment 3 techniques pour activer un élément du menu. Celle que je veux utiliser ce sont les css pas le javascript. Et l'exemple qui est donné est réalisé sur des pages différentes. J'ai bien noté dans mon premier message à l'aide que je travaille toujours sur la meme page et là est le probleme.
Merci.
En m'inspirant de la technique css du forum, j'ai réussi en ajoutant du php a activer les éléments du menu après clic. Pour ceux que ca pourrait interesser voici le code ( voir aussi le code tout en haut de la page)
//dans ma page d'index
<?
if (isset($_GET['page'])) $var=$_GET['page'];
else $var="acceuil";
?>

<BODY id="<? print("$var"); ?>">
...................................................
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="index.php?page=accueil" id="acceuilnav">Accueil</a></li>
<li><a href="index.php?page=entreprise" id="entreprisenav">Entreprise</a></li>
</ul>
</div>

//mon css
body#accueil a#acceuilnav, body#entreprise a#entreprisenav{
background : #17a;
border-color : #069 #6cf #5bd white;
padding : 0.4em 0.35em 0.25em 0.9em;
}

Encore merci à toute l'équipe d'alsacreations!!
Bonjour,
Je ne pense pas que ta méthode soit la meilleure :
problème de référencement
et si tu as plus de 2 liens ça risque d'être compliqué.
J'ai essayé ceci. J'aimerai faire la mème chose pour un menu multiniveaux, mais je n'ai pas trouvé.
Salut,
Pour l'instant ma page d'index est toujours référencé sur google. Si les autres pages sont pas référencés ce n'est pas trop grave.
Mais si j'écris ma balise title de cette manière :
<title> <? $page ?> </title>
a chaque fois qu'on clique sur un lien different du menu comme par exemple
<a href="index.php?page=entreprise" "entreprisenav">Entreprise</a>
le titre de la page changera de maniere dynamique et les pages les plus visitées seront aussi référencées. Je pense donc pas que ca pose probleme au référencement.
salut, apparemment c'est ce que j'ai fait mais je suis pas sur que les pages seront bien référencées.