Discussion :

[Celadon]

Bonjour à tous,
Je développe en ce moment un petit site web. J'ai un menu : c'est une liste <ul></ul>. Chaque élément de menu a un arrière plan dont l'opacité est moyenne :

Code :

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

1
2
3
4
5
6
 
.elem_menu {
	background-color: #FFD6AE;
	opacity:0.5; 
        filter : alpha(opacity=50);
}

Quand je passe sur un élément, l'opacité augmente :

Code :

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

1
2
3
4
5
 
.elem_menu:hover {
	opacity:0.9; 
        filter : alpha(opacity=90);
}

Tout cela fonctionne.

Maintenant, j'ai aussi un script en JS qui repère l'adresse de la page courante, compare les href des liens avec cette adresse et, si le lien a la même adresse que la page courante, lui applique un id, qui s'appelle "actif". Or ce que je voudrais, c'est que cet id soit caractérisé par une opacité élevée, comme :hover :

Code :

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

1
2
3
4
5
 
#actif {
	opacity:0.9; 
        filter : alpha(opacity=90);
}

Eh ben ça marche pas. Il garde toujours l'opacité première, 0.5 ou 50, selon ce que vous lisez.
Alors vous me direz "est-ce qu'avec d'autres propriétés ça fonctionne ?" et la réponse est oui. J'ai pu, par exemple, changer la couleur de police, la couleur de l'arrière plan, etc.
Autre solution : le script JS crée une classe, par exemple menuselected :

Code :

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

1
2
3
4
5
 
.menuselected {
	opacity:0.9; 
        filter : alpha(opacity=90);
}

Le résultat est le même, c'est à dire rien de concluant.

Je pense que le script ne remplace pas la classe par une autre, mais ajoute une 2e classe, ou un id. (Si c'est possible.)

Voici donc le script :

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
function highlightMenu(){
var cettePage = document.location.href;
//pour eviter les liens internes
if(cettePage.indexOf('#') != -1)
   cettePage = cettePage.substring(0,cettePage.indexOf('#'));
 
for(var i=0;i < document.links.length;i++){
 
    var lien = document.links[i].getAttribute('href');
	//IE retourne l'url total du lien tandis que NS retourne que l'attribut href
	//on contourne le probléme en comparant les derniers caractères
    if( cettePage.substring(cettePage.length-lien.length,cettePage.length) == lien ){
         document.links[i].id = 'actif';
    //cas de la homepage appelée depuis la racine /
    }else if( (document.location.pathname == '/') && ( (lien.substring(0,6) == 'index.') || ( (cettePage + 'index.') == lien.substring(0,cettePage.length + 6) ))){
         document.links[i].id = 'actif';	
    }
}
}
highlightMenu();

Il n'est pas de moi. Je suis juste capable de moditier ".id = 'actif' " en '.className = 'menuselected' "...

Au départ dans mes styles, il y avait aussi du padding, mais le padding de la class et le padding (ou non) de l'id (ou le padding des deux classes) s'ajoutaient, alors ça n'allait pas.

Voilà, si vous avez des idées sur toutes ces petites choses... Merci d'avance !

[NoSmoking]

Bonjour,
Rappel : Les ID doivent être unique
Partant de cela il te faut modifier la className par ajout de style spécifique.

[Celadon]

Bonsoir,
L'ID est unique (il n'y a qu'une seule "page courante"). Je crois que le problème vient du fait qu'il y a, pour le même élément, une classe :

Code :

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

1
2
 
<li class="elem_menu">élément de menu</li>

et en même temps un id (id="actif") qui est ajouté par le script en JavaScript. C'est un peu comme si j'écrivais :

Code :

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

1
2
 
<li class="elem_menu" id="actif">élément de menu affiché</li>

Du coup comme l'un dit "opacity: 0.5" et l'autre "opacity: 0.9", le brave navigateur ne sait trop à quel saint (class / id) se vouer. J'aurais préféré qu'il se vouât à l'id, mais il semble choisir la class.

[NoSmoking]

L'ID est unique (il n'y a qu'une seule "page courante").

je te fais confiance
logiquement cela devrait marcher, à quel moment appelles tu la fonction?

[Celadon]

En bas de page, comme dans le modèle que j'ai suivi :

Code :

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

1
2
3
 
<script type="text/javascript" src="SelectMenu.js"> </script>
</body>

À vrai dire, ce que je cherche c'est quelque chose qui me permette d'appliquer un style différent, dans le menu, à la page en cours, comme expliqué ici. Sauf que son modèle ne prend pas les URL du type index.php?page=accueil, d'une part, et que par ailleurs je veux que le style appliqué soit le même qu'habituellement, avec une opacité différente. Le même qu'en :hover, "tout simplement".

[NoSmoking]

dans une URL de ce type index.php?page=accueil, il te faut récupérer
document.location.search, qui te retourneras ?page=accueil, et c'est à partir de cela qu'il te faut faire la recherche dans tes liens.
Si l'occurrence est trouvée tu appliques une classe active, sinon tu appliques une classe inactive