Discussion :

[Aspic]

Bonjour,

Dans monsite, j'ai un menu de navigation et je voudrais quand l'utilisateur clique sur une section que dans la page qui s'affiche le menu qu'il a selectionné à la page précédente soit d'une autre couleur comme ca il sait qu'il est dans la section choisie.

Exemple : J'ai un menu avec "Site", "Contact", "NEws" Si il veut aller dans "COntact", la page qui s'affiche doit montrer qu'il est bien dans cette section et donc est ce possible de changer la couleur du texte du menu par exemple ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<style type="text/css">
.menu {
  font-family:Verdana;
  font-size:10pt;
  text-decoration:none;
  font-weight: bold;
  color:#333333;
}
 
.menu:link {
 font-family:Verdana;
  font-size:10pt;
  text-decoration:none;
  font-weight: bold;
  color:#333333;
}
 
.menu:hover {
  font-family:Verdana;
  font-size:10pt;
  text-decoration:underline;
  color:#FF0000;
}
 
.menu:active {
  font-family:Verdana;
  font-size:10pt;
  text-decoration:none;
  font-weight:bold;
  color:yellow;
}

Voila mon code CSS pour les menus

Merci et désolé si je m'exprime mal ^^

[Korko Fain]

Je me trompe peut etre mais en CSS c'est impossible de "savoir". Fait le en js avec les id.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<?php
 
echo('<script language="javascript">document.getElementById("'.$this->nompage.'").class = "thismenu";</script>');
 
?>

[Aspic]

Salut, j'ai essayer mais ca marche pas...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
  .test
  {
  color:#CCFF00;
  }

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script language="JavaScript">document.getElementById("'.$this->nompage.'").class = "test";</script>

Peut etre ai je oublier de modifier quelque chose...

PS: j'ai enlever la balaise "php" car toutes mes pages sont en Htm

[Korko Fain]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<ul id="menu">
<li id="index">Index</li>
<li id="contacts">Contacts</li>
</ul>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
#menu li {
// Regles CSS pour chaque élément du menu
}
 
.current_menu {
// Regles CSS pour la page actuelle
}

Supposons que nous soyons sur la page contacts

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script language="javascript">document.getElementById('contacts').class='current_menu';</script>

Sachant qu'a ce moment là, il faut que la partie ('contacts') soit générée par le php.

Ou alors tu fait ça par php lorsque tu génère ton menu.

Pour l'automatiser en JS, tu doit mettre comme id pour CHAQUE lien du menu le NOM de la page :

exemple : la page contacts.html. La balise (<li>, <a> ou autre) doit avoir comme id la valeur "contacts" tout en minuscule.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<script language="javascript">var page = document.URL;
var vecteur = page.split(".");
var nomPage = vecteur[vecteur.length-2].toLowerCase();
document.getElementById(nomPage).class='current_menu';</script>

[Aspic]

j'ai pas tout compris, je suis obliger d'utiliser du PHP ? car je peux pas ... mes pages sont en Htm et toutes issus d'un meme modele en Htm...

Et je peux pas modifier le modèle en PHP car l'extension n'est pas la meme

PS : mes menus sont crée comme ca :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
  <div align="center"><span class="menu"> Bases du Software</span><br>
                                                      <span class="menu"><a href="../Pages/Software/Tutos/Tutos.htm" class="menu">Tutos de quelques logiciels</a></span><br>
                                                      <span class="menu"><a href="../Pages/Software/Prog/index.htm" class="menu">Programmation (.NET)</a></span><br>
                                                      <span class="menu"><a href="../Pages/Software/Windows/Windows.htm" class="menu">Windows XP / Vista</a></span><br>
                                                      <span class="menu"><a href="../Pages/Software/Troubles/Problemes.htm" class="menu">En cas de probl&egrave;mes ?</a></span><br>
                                  </div></td>

[Korko Fain]

Ton Menu :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div align="center">
<span class="menu"> Bases du Software</span><br />
<span><a href="../Pages/Software/Tutos/Tutos.htm" class="menu" id="tutos">Tutos de quelques logiciels</a></span><br />
<span><a href="../Pages/Software/Prog/index.htm" class="menu" id="index">Programmation (.NET)</a></span><br />
 <span><a href="../Pages/Software/Windows/Windows.htm" class="menu" id="windows">Windows XP / Vista</a></span><br />
<span><a href="../Pages/Software/Troubles/Problemes.htm" class="menu" id="problemes">En cas de probl&egrave;mes ?</a></span><br />
</div>
<script language="javascript">
var page = document.URL;
var vecteur = page.split(".");
var nomPage = vecteur[vecteur.length-2].toLowerCase();
document.getElementById(nomPage).class='current_menu';
</script>
</td>

Maintenant ajoute cette classe ci dans ton css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.current_menu {
  font-family:Verdana;
  font-size:10pt;
  text-decoration:none;
  font-weight: bold;
  color:#FFF;
}
 
.current_menu:hover {
  font-family:Verdana;
  font-size:10pt;
  text-decoration:underline;
  color:#F00;
}

Par exemple