Discussion :

[Guignon]

Bien le bonjour,

Bon, j'ai du faire 15 forums, avant de venir vous voir et d'être sur que je trouverais la solution ici, héhé. ^^

Voilà, ça ne doit pas être la mer à boire mais je n'arrive pas à changer la class d'un menu.

Voici le HTML :

Code html :

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

1
2
3
4
5
6
7
<ul id="nav_ad">
  <li class="cur"><a href="accueil.php" class="lien_Menu"><strong>Accueil</strong></a></li>
  <li><a href="dada.php" class="lien_Menu">Lien A</a></li>
  <li><a href="dodo.php" class="lien_Menu">Lien B</a></li>
  <li><a href="dudu.php" class="lien_Menu">Lien C</a></li>
  <li><a href="dede.php" class="lien_Menu">Lien D</a></li>
</ul>

Donc le menu est quasiment sous la même forme que celui de développer.com, et lorsque l'on clique sur un des onglets sur menu, le css change selon l'onglet que l'on à cliquer.

Voilà mon javascript :

Code javascript :

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
function rollover()
{
  if(!document.getElementById || !document.createTextNode){return;}
  var n=document.getElementById('nav_ad');
  if(!n){return;}
  var lis=n.getElementsByTagName('li');
  for (var i=0;i<lis.length;i++)
  {
    lis[i].onmouseover=function()
    {
      this.className=this.className?'cur':'over';
    }
    lis[i].onmouseout=function()
    {
       this.className=this.className=='cur'?'cur':'';
    }
  }
}
window.onload=rollover;

La class ne bouge pas, elle veut rester sur Accueil. Pas moyen de la faire bouger !!! erf erf erf

Merci pour votre aide.

[SylvainPV]

Là tu utilises onmouseover, c'est à dire le passage de la souris par dessus un élément sans cliquer. Ce qui peut être fait simplement en CSS

Code css :

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

1
2
3
4
5
6
7
8
 
#nav_ad li {
    background:red;
}
 
#nav_ad li:hover {
    background:green;
}

Si tu veux changer la classe du menu après un clic, et donc après un changement de page, je suppose que le plus simple serait de mettre un HTML différent pour le menu dans chaque page.

[Guignon]

Merci pour la réponse, mais oui il y a changement de page donc il faut que les "li" du menu se mettent à jour.

Et donc il faudrait mettre un style différent pour chaque page, pourquoi pas !

Donc on récupére l'URL, et suite à l'identification de l'URL on marque la "li" avec un style particulier ?

EDIT:

Voici mon CSS de départ :

Code css :

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
#nav_ad li.cur,
#nav_ad li.over,
#nav_ad li:hover
{
  background:url("../images/menu vertical/tabblue.gif") #3375b2 top left no-repeat;
  border-bottom:1px solid #036;
}
 
#nav_ad li strong,
ul#nav_ad li.cur a,
ul#nav_ad li.over a,
ul#nav_ad li:hover a
{
  display:block;
  color:#fff;
  padding-left: 0px;
  padding-right: 2px;
  padding-top: 0px;
  text-decoration:none;
  background:url("../images/menu vertical/tabblue.gif") transparent top right no-repeat;
}

Donc il y a bien du CSS, mais je veux que lorsque l'on clique sur un onglet, la class "cur" se mette automatiquement sur l'onglet cliquer

[Guignon]

Du JAVASCRIPT s'il vous plait

[SylvainPV]

Pourquoi vouloir à tout prix du Javascript quand ce n'est pas approprié ?

Sur dada.php, tu mets

Code html :

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

1
2
3
4
5
6
7
<ul id="nav_ad">
  <li><a href="accueil.php" class="lien_Menu"><strong>Accueil</strong></a></li>
  <li><a href="dada.php" class="lien_Menu cur">Lien A</a></li>
  <li><a href="dodo.php" class="lien_Menu">Lien B</a></li>
  <li><a href="dudu.php" class="lien_Menu">Lien C</a></li>
  <li><a href="dede.php" class="lien_Menu">Lien D</a></li>
</ul>

et sur dodo.php, tu mets

Code html :

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

1
2
3
4
5
6
7
<ul id="nav_ad">
  <li><a href="accueil.php" class="lien_Menu"><strong>Accueil</strong></a></li>
  <li><a href="dada.php" class="lien_Menu">Lien A</a></li>
  <li><a href="dodo.php" class="lien_Menu cur">Lien B</a></li>
  <li><a href="dudu.php" class="lien_Menu">Lien C</a></li>
  <li><a href="dede.php" class="lien_Menu">Lien D</a></li>
</ul>

[Guignon]

Le menu est hors page ^^

Il est juste appelé donc pas possible ton truc

Code :

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

include('menu.php');