[CSS] Savoir dans quel menu on est pour mon site

**Aspic** · 17/04/2007, 11h31

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** · 17/04/2007, 11h51

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** · 17/04/2007, 12h51

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** · 17/04/2007, 12h57

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** · 17/04/2007, 13h24

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** · 17/04/2007, 13h35

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

**Strix** · 17/04/2007, 13h49

Salut.

Si ça peut t'aider, j'ai un menu de ce type-là, j'ai mis la source ici.
Il est basé sur des images donc un peu long, mais si tu utilises une seule couleur pour ton current, ça ira plus vite.

Edit : si tu as un template, les current sautent quand tu fais une modif'. Après tu peux passer par le PHP pour éviter cela

**Aspic** · 17/04/2007, 14h04

Salut, j'ai regarder ton menu mais comment puis je le mettre dans mes pages ?

**Aspic** · 17/04/2007, 14h20

Pour Korko Fain :

C'est exactemetn ce que j'avais fais mais ca marche toujours pas...
De plus si j'ai plusieurs pages qui s'apelle "index" il va y avoir des problemes...

**Strix** · 17/04/2007, 14h29

Envoyé par Aspic

Salut, j'ai regarder ton menu mais comment puis je le mettre dans mes pages ?

Essaye avec :

Code :

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

<span class="menu"><a href="../Pages/Software/Tutos/Tutos.htm" class="menu"  id="current">Tutos de quelques logiciels</a></span><br>

ou passe en "mode" UL et LI

**Korko Fain** · 17/04/2007, 14h35

Tu n'a pas 26miliards de façons de faire. Puisque tout est HTML, soit tu passes par du JS soit tu utilises plusieurs menu.

Evidemment, le JS c'est plus leger mais yaura forcement des contraintes. Si tu as plusieurs index, rajoute dans l'id le nom du dossier à la limite.

**Korko Fain** · 17/04/2007, 15h09

Cette fonction javascript là fonctionne :

Code :

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

1
2
3
4
5
6
7
8
9
<script language="Javascript">
<!--
page = document.URL;
vecteur = page.split('\\');
nomPage = vecteur[vecteur.length-1].split(".");
nomPage = nomPage[0].toLowerCase();
document.getElementById(nomPage).className = 'menu_current';
// -->
</script>

Mais elle ne prend pas en compte le dossier a toi de voir si tu as vraiment plusieurs pages qui ont le meme nom.

**Aspic** · 17/04/2007, 15h21

bah j'ai tester ta nouvelle fonction en java et ca marche toujours pas...
Tu as tester chez toi ? comment je peux vérifier que nomPage recuperer bien le nom de la page dans l'URL ?

De plus, j'ai tester en prédéfinissant le nom de la page :

Code :

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

document.getElementById('index').className = 'current_menu';

et sans résultat....

Strix : Marche pas non plus car je suppose qu'on à pas les meme type de menu...

++

**Korko Fain** · 17/04/2007, 15h37

Oui je l'ai testé chez moi et ça fonctionne. Verifie que tu as bien les id qui correspondent.

Regarde ta console Javascript, tu dois avoir les erreurs de décrites.

Sinon essaye de faire un writeln(nomVariable);

**Aspic** · 17/04/2007, 16h30

J'utilise des "alert" pour voir et ca plante oui, on est cencé avec quoi dans NomPage ?

En prédéfinissant le Id, j'obtient le chemin complet de la page (avec file:///) !!!

Edit :

Finalement j'ai reussi à le faire marcher, c'etait des probleme dans les "split". Ensuite le probleme est que si j'etais dans une sous rubrique de la rubrique "prog" et bah ca marchais plus ton script donc j'ai modifié le tout et ca marche !

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
32
33
34
<script language="Javascript" type="text/javascript">
<!--
var page = document.URL;
var vecteur = page.split("/");
var nomPage = vecteur[vecteur.length-1].split(".");
var nomPage1 = nomPage[0].toLowerCase();
 
try 
{
document.getElementById(nomPage1).className = 'current_menu';
}     
catch (e) 
{
var correction =  vecteur[vecteur.length-2].toLowerCase();
 
switch (correction)
   {
      case "news":
	  document.getElementById('news').className = 'current_menu';
	  break; 
	  case "tests":
	  document.getElementById('tests').className = 'current_menu';
	  break; 
	  case "site":
	  document.getElementById('livredor').className = 'current_menu';
	  break; 
      case "prog":
	  document.getElementById('sommaire').className = 'current_menu';
	  break; 
   }
} 
 
-->
</script>

Par contre c'est possible de désactiver le lien quand tu est dans la cétégorie ?

Merci et bonne journée

**Candygirl** · 17/04/2007, 17h22

Perso je pense que je ferais qqch du genre:

Code javascript :

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

1
2
3
4
5
6
7
function getCurrent(idmenu) {
  var pageUrl = document.URL;
  var allA = document.getElementById(idmenu).getElementsByTagName('a');
  for (var i=0;i<allA.length;i++) {
    if(allA[i].href==pageUrl) allA[i].style.color="red";
  }
}

En attribuant l'id "menu" à toute la partie de ton code qui contient ta nav et appelant la fonction depuis l'événement onload du body en passant comme paramètre l'id de ton menu (menu):

Code html :

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

<body onload="getCurrent('menu');">

L'idée est simplement de comparer l'url de la page à celle du href de tes liens. Comparaison limitée aux liens se trouvant à l'intérieur de l'id "menu" pour éviter de passer tous els liens de la page en revue.

Bon je suis loin d'être pro en javascrit donc il y a probablement plus efficace et il faudrait traiter qq cas j'imagine comme le cas de la page index. De même tu peux carrément attribuer un style tout fait mais j'ai fait un test au plus simple en attribuant la couleur rouge au lien

Souhaites-tu que ton poste soit déplacé sur le forum javascript? Tu aurais peut-être d'autres pistes...

**Korko Fain** · 17/04/2007, 18h33

Et si il met un lien relatif dans son url du genre ./toto.html
Ton truc ne fonctionne plus.

**Candygirl** · 17/04/2007, 19h32

Envoyé par Korko Fain

Et si il met un lien relatif dans son url du genre ./toto.html
Ton truc ne fonctionne plus.

J'imagine que tu as testé pour l'affirmer ?

C'est peut-être bien pas très accadémique, voir même faux de mettre directement .href ? Je ne demande pas mieux que d'en apprendre sur javascript et que tu m'expliques de bonnes raisons pour ne pas faire ainsi.

Mais en attendant, d'après mon test, de mettre .href plutôt que getAttribut('href') renvoie l'url absolu quand bien même le lien est adressé en relatif et ça fonctionne sur IE firefox et opera, sans notification d'erreur sur ma console FF.

**MasterOfChakhaL** · 17/04/2007, 20h05

Salut,

Si tu as un menu du style:

Code html :

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

1
2
3
4
5
6
 
<ul id="menu">
  <li id="menu_1"><a href="...">menu 1</a></li>
  <li id="menu_2"><a href="...">menu 2</a></li>
  <li id="menu_3"><a href="...">menu 3</a></li>
</ul>

Alors, il te suffit de donner un id à ta page

Code html :

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

1
2
3
4
5
6
 
<body id="page_1">
ou
<body id="page_2">
ou
<body id="page_3">

Ensuite, il te reste à faire la correspondance entre la page et le menu grâce aux sélecteurs css:

Code :

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

1
2
3
4
5
6
7
 
#page_1 #menu_1 ,
#page_2 #menu_2 ,
#page_3 #menu_3
{
  /* styles pour l'élément du menu correspondant à la page courant */
}

**Korko Fain** · 17/04/2007, 20h16

Candygirl :
document.URL te retournera l'adresse complete du lien tu auras alors
http://monsite/mapage.html
Par opposition au lieu ./mapage.html

Les 2 chaines sont différentes et pourtant c'est le meme fichier.
Mais effectivement, la solution de MasterOfChakal est pas mal aussi et plus souple que la mienne et celle de CandyGirl.

[CSS] Savoir dans quel menu on est pour mon site

CSS

Discussions similaires

Partager

Partager