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

Version imprimable

Voir 40 message(s) de cette discussion en une page

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:

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 ^^

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

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

17/04/2007, 12h51
Aspic
Salut, j'ai essayer mais ca marche pas...
Code:

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

<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

Code:

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

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:

<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:

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>

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 :cry:

PS : mes menus sont crée comme ca :

Code:

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>

Ton Menu :

Code:

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:

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

17/04/2007, 13h49
Strix

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
17/04/2007, 14h04
Aspic

Salut, j'ai regarder ton menu mais comment puis je le mettre dans mes pages ?
17/04/2007, 14h20
Aspic

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...
17/04/2007, 14h29
Strix

Citation:

Envoyé par Aspic

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

Essaye avec :

Code:

<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
17/04/2007, 14h35
Korko Fain

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.

Cette fonction javascript là fonctionne :
Code:

1 2 3 4 5 6 7 8 9 <script language="Javascript">  </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.

17/04/2007, 15h21
Aspic

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:

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...

++
17/04/2007, 15h37
Korko Fain

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);

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:

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">  </script>
Par contre c'est possible de désactiver le lien quand tu est dans la cétégorie ?

Merci et bonne journée :)

Perso je pense que je ferais qqch du genre:
Code:

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:

<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...

17/04/2007, 18h33
Korko Fain

Et si il met un lien relatif dans son url du genre ./toto.html
Ton truc ne fonctionne plus.
17/04/2007, 19h32
Candygirl

Citation:

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.

Salut,

Si tu as un menu du style:
Code:

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:

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:

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 */ }

17/04/2007, 20h16
Korko Fain

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.

Voir 40 message(s) de cette discussion en une page

Fuseau horaire GMT +2. Il est actuellement 05h39.