Appliquer un style spécifique à la page en cours dans un menu include ?

Version imprimable

Salut à toutes et tous,

Je suis un complet débutant en javascript et php.
J'utilise un include sur toutes mes pages pour afficher mon menu — chose très classique.
Mon souci est : selon mes pages, l'item de la page en cours dans mon menu doit avoir un background-poisition différent.
Je détaille…
Dans toutes mes pages, j'écris ça :

Code:

<?php include("../../../menu_principal.php"); ?>

Mon menu est :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <ul id="menu" > <li><a class="accueil" href="accueil.php"> </a></li> <li><a class="auteur" href="pages/auteur.php"> </a> <ul class="sousMenu"> <li><a href="pages/auteur/livres.php">Livres</a></li> <li><a href="pages/auteur/articles.php">Articles</a></li> <li><a href="pages/auteur/sciences.php">Sciences</a></li> </ul> </li> <li><a class="bio" href="pages/bio.php"> </a></li> <li><a class="contact" href="pages/contact.php"> </a></li> </ul>
Par exemple, quand on se trouve sur la page d'Accueil, je voudrais que le <li><a class="auteur"> affiche un background-position ordinaire (center top). Mais quand on est sur cette page Auteur, je voudrais que le background-position devienne : center -37px.
Je voudrais le faire en javascript.

Ça doit être simple, mais ça fait des heures que je traîne là-dessus — Quelqu'un peut-il m'aider, s'il vous plaît ?

Par avance, merci…

10/09/2012, 22h35
headmax
Dans toute les pages tu appel la function qui se trouve dans ton menu include et tu leur fournit les bons paramètres.

dans le menu include
Code:

1 2 3 4 function affiche_moi_le_bon_sytle(param){ document.getElementById("zone_ou_appliquer_la_class_css").className = param; }
Dans toutes les pages appeler par ton menu
Code:

1 2 3 4 window.onload = function(){ affiche_moi_le_bon_style("class_auteur"); };
Pas tester mais voilà un principe parmi d'autres...
Bonne soirée ;)

Pour te former correctement : Cours JavaScript
11/09/2012, 07h26
sekaijin

tu fais ça e php
tu crée un autre fichier css pour les style spécifique
et sur la page enquestion tu ajoute un link

A+JYT
11/09/2012, 10h19
supunna
Citation:
Envoyé par headmax

Dans toute les pages tu appel la function qui se trouve dans ton menu include et tu leur fournit les bons paramètres.

dans le menu include

Code:

1 2 3 4 function affiche_moi_le_bon_sytle(param){ document.getElementById("zone_ou_appliquer_la_class_css").className = param; }

Dans toutes les pages appeler par ton menu

Code:

1 2 3 4 window.onload = function(){ affiche_moi_le_bon_style("class_auteur"); };

Pas tester mais voilà un principe parmi d'autres...
Bonne soirée ;)
Merci pour ton aide… J'ai essayé, mais cela ne fonctionne pas :-(
Voici ce que j'ai fait :
Dans mon menu qui est include, à la fin juste avant la balise </body> j'ai mis :
Code:

1 2 3 4 5 6 <script type="text/javascript"> function affiche_moi_le_bon_sytle(param){ document.getElementById("menu_gauche").className = param; } </script>
Et dans ma page principale :
Code:

1 2 3 4 5 6 <script type="text/javascript"> window.onload = function(){ affiche_moi_le_bon_style("menuselected"); }; </script>
Peux-tu me dire ce qui ne va pas, s'il te plaît ?

Citation:
Envoyé par supunna
Salut à toutes et tous,

Je suis un complet débutant en javascript et php.
J'utilise un include sur toutes mes pages pour afficher mon menu — chose très classique.
Mon souci est : selon mes pages, l'item de la page en cours dans mon menu doit avoir un background-poisition différent.
Je détaille…
Dans toutes mes pages, j'écris ça :

Code:

<?php include("../../../menu_principal.php"); ?>

Mon menu est :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <ul id="menu" > <li><a class="accueil" href="accueil.php"> </a></li> <li><a class="auteur" href="pages/auteur.php"> </a> <ul class="sousMenu"> <li><a href="pages/auteur/livres.php">Livres</a></li> <li><a href="pages/auteur/articles.php">Articles</a></li> <li><a href="pages/auteur/sciences.php">Sciences</a></li> </ul> </li> <li><a class="bio" href="pages/bio.php"> </a></li> <li><a class="contact" href="pages/contact.php"> </a></li> </ul>
Par exemple, quand on se trouve sur la page d'Accueil, je voudrais que le <li><a class="auteur"> affiche un background-position ordinaire (center top). Mais quand on est sur cette page Auteur, je voudrais que le background-position devienne : center -37px.
Je voudrais le faire en javascript.

Ça doit être simple, mais ça fait des heures que je traîne là-dessus — Quelqu'un peut-il m'aider, s'il vous plaît ?

Par avance, merci…
je ne comprends pas pourquoi tu cherche à traité un truc que tu génère après l'avoir généré. il est pourtant bien plus simple de le traiter àt la génération
Code:

1 2 <?php $menuActif="accueil"; include("../../../menu_principal.php"); ?>
Mon menu est :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <ul id="menu" > <li><a class="accueil<?php echo ($menuActif=='accueil')?', menuselected':''?>" href="accueil.php"> </a></li> <li><a class="auteur<?php echo ($menuActif=='auteur')?', menuselected':''?>" href="pages/auteur.php"> </a> <ul class="sousMenu<?php echo ($menuActif=='sousMenu')?', menuselected':''?>"> <li><a href="pages/auteur/livres.php">Livres</a></li> <li><a href="pages/auteur/articles.php">Articles</a></li> <li><a href="pages/auteur/sciences.php">Sciences</a></li> </ul> </li> <li><a class="bio<?php echo ($menuActif=='bio')?', menuselected':''?>" href="pages/bio.php"> </a></li> <li><a class="contact<?php echo ($menuActif=='contact')?', menuselected':''>" href="pages/contact.php"> </a></li> </ul>
du coup tu n'as plus à te casser la tête pour après coup indiquer quel est le menu actif
il a déjà le css menuselected

A+JYT

Merci beaucoup… Ça marche mais ça ne marche pas… :aie:
Je m'explique : je suis obligé de définir le background dans ma class menuselected, sinon le background ne s'affiche pas.
En fait, le menuselected vient effacer la précédente déclaration de style où figurait ce background.

Code:

1
2
3
4
.menuselected {
	background:url(../images/menu_pages/politique.png) no-repeat center -37px;
	height: 37px;
}

Ça, cela marche bien.… Mais mes items du menu ont tous des backgrounds différents. Là, ils vont tous afficher le même background :-(
Voici les styles CSS des items du menu :

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
35
36
37
38
39
40
41
42
#bandeau_haut li a.accueil {
	background:url(../images/menu_pages/accueil.png) no-repeat top center;
	height: 37px;
}
#bandeau_haut li a.accueil:hover {
	background:url(../images/menu_pages/accueil.png) no-repeat center -37px;
}
#bandeau_haut li a.politique {
	background:url(../images/menu_pages/politique.png) no-repeat top center;
	height: 37px;
}
#bandeau_haut li a.politique:hover {
	background:url(../images/menu_pages/politique.png) no-repeat center -37px;
}
#bandeau_haut li a.militant {
	background:url(../images/menu_pages/militant.png) no-repeat top center;
	height: 37px;
}
#bandeau_haut li a.militant:hover {
	background:url(../images/menu_pages/militant.png) no-repeat center -37px;
}
#bandeau_haut li a.auteur {
	background:url(../images/menu_pages/auteur.png) no-repeat top center;
	height: 37px;
}
#bandeau_haut li a.auteur:hover {
	background:url(../images/menu_pages/auteur.png) no-repeat center -37px;
}
#bandeau_haut li a.bio {
	background:url(../images/menu_pages/bio.png) no-repeat top center;
	height: 37px;
}
#bandeau_haut li a.bio:hover {
	background:url(../images/menu_pages/bio.png) no-repeat center -37px;
}
#bandeau_haut li a.contact {
	background:url(../images/menu_pages/contact.png) no-repeat top center;
	height: 37px;
}
#bandeau_haut li a.contact:hover {
	background:url(../images/menu_pages/contact.png) no-repeat center -37px;
}

Salut à tous,
Comme a dit sekajin il serait préférable de le gérer en php.

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
 
<?php
$page_css = $_GET['page_css'];
?>
<style>
<?php
switch($page_css){
        case  "accueil" :
?>
#bandeau_haut li a.accueil {
	background:url(../images/menu_pages/accueil.png) no-repeat top center;
	height: 37px;
}
#bandeau_haut li a.accueil:hover {
	background:url(../images/menu_pages/accueil.png) no-repeat center -37px;
}	
<?php 
                break;
        case "politique" :
?>
 
#bandeau_haut li a.politique {
	background:url(../images/menu_pages/politique.png) no-repeat top center;
	height: 37px;
}
#bandeau_haut li a.politique:hover {
	background:url(../images/menu_pages/politique.png) no-repeat center -37px;
}
<?php 
                break;
        case "militant" : 
?>
#bandeau_haut li a.militant {
	background:url(../images/menu_pages/militant.png) no-repeat top center;
	height: 37px;
}
#bandeau_haut li a.militant:hover {
	background:url(../images/menu_pages/militant.png) no-repeat center -37px;
}
<?php 
                break;
        case "auteur" :
?>
#bandeau_haut li a.auteur {
	background:url(../images/menu_pages/auteur.png) no-repeat top center;
	height: 37px;
}
#bandeau_haut li a.auteur:hover {
	background:url(../images/menu_pages/auteur.png) no-repeat center -37px;
}
<?php 
                break;
        case "bio" :
?>
#bandeau_haut li a.bio {
	background:url(../images/menu_pages/bio.png) no-repeat top center;
	height: 37px;
}
#bandeau_haut li a.bio:hover {
	background:url(../images/menu_pages/bio.png) no-repeat center -37px;
}
<?php 
                break;
        case "contact" :
?>
#bandeau_haut li a.contact {
	background:url(../images/menu_pages/contact.png) no-repeat top center;
	height: 37px;
}
#bandeau_haut li a.contact:hover {
	background:url(../images/menu_pages/contact.png) no-repeat center -37px;
}
<?php 
                break;
       default:
}
?>
#bandeau_haut li a.accueil {
	background:url(../images/menu_pages/accueil.png) no-repeat top center;
	height: 37px;
}
#bandeau_haut li a.accueil:hover {
	background:url(../images/menu_pages/accueil.png) no-repeat center -37px;
}
</style>
<body>
<a href="pages/auteur/livres.php?page_css=auteur">test</a>
</body>

C'est un peu trash comme méthode, mais ça le don de marcher, comme as dit sekajin, php est appelé avant même que ta page se charge donc, c plus pratique et plus adapté, car il est pas nécessaire de faire ça en js.
NB: j'ai passer un paramètre sur le click de ton menu en mettant le bon paramètre en GET tu le récupéra dans ton switch dès la lecture du style page ton code...

Bonne chance A+

12/09/2012, 01h39
supunna

Un peu trash, c'est vrai… Ce qui m'embête en fait, c'est que je dois mettre du php dans mes liens :

Code:

<a href="pages/auteur/livres.php?page_css=auteur">test</a>

Or, plus tard, ce site doit être géré par quelqu'un qui s'y connait encore moins que moi, qui ne connait rien de rien. Il éditera ses pages avec un éditeur html wysiwyg. Mettre du php sera au-dessus de ses forces 8O
Ce qui était séduisant dans la tentative de sekajin, c'est qu'on ne touchait pas au lien, juste au class.
C'est pour cela que je cherche une solution à base de javascript, qui automatisera l'opération, sans devoir ajouter quoi que ce soit au lien.
Ça doit être possible de faire ça en javascript.

J'ai trouvé ce script qui fonctionne, mais pas tout à fait…

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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].className = 'menuselected';
    //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].className = 'menuselected';	
    }
}
}
 
highlightMenu();

La class menuselected {color:orange} est bien chargée, mais avant ma class .menus li a qui définit la couleur ordinaire de mes liens. Elle est donc annulée. Je ne comprends pas pourquoi. Dans ma feuille de style, je la place en dernier, et j'ai essayé toutes les places sur ma page php pour le script : dans le head, en fin de page, rien n'y fait…

En fait, même en CSS tout simplement, le souci est le même :
EN suivant les cours CSS , dans le head, après le lien vers ma feuille de styles, je place une balise <style> pour déclarer un nouveau style… Normalement, il devrait annuler le style précédent (déclaré dans me feuille CSS) mais c'est le contraire qui se passe.
La feuille CSS chargée avant écrase le nouveau style. 8O
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-language" content="fr" /> <title>Test</title> <link rel="shortcut icon" href="../../../images/favicon.png" type="image/png" /> <link rel="alternate" type="application/rss+xml" href="http://www.xxxxxx/rss.xml" title="Les dernières parutions" /> <link href="../../../styles/styles_pages.css" rel="stylesheet" type="text/css" media="screen" /> <style type="text/css"> a.politique { background-position: 0px -37px; } </style> </head> <body>

12/09/2012, 14h17
Bovino
Ca n'a rien à voir, c'est juste une notion de "poids" d'une déclaration par rapport à une autre.
En gros, plus tu indiques de sélecteurs dans une règle, plus elle aura de poids par rapport aux autres quel que soit l'ordre des déclarations (même si concrètement, c'est un peu plus complexe que ça puisque le type de sélecteur : identifiant, classe ou balise est primordial).

Par exemple :
Code:

1 2 3 4 5 6 div .classe{ background-color: blue; } .classe{ background-color: green; }
ici, le fond sera bleu bien que la déclaration soit faite avant car le sélecteur à un poids plus important.
12/09/2012, 15h22
supunna

Ah mais si, ça a tout à voir, parce que cela a même réglé mon problème !! C'était exactement ça qu'il fallait faire, tout simplement.
Un grand merci pour les réponses et aussi pour les cours et tutoriels CSS : http://css.developpez.com/cours/ :ccool: