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

**supunna** · 10/09/2012, 21h06

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 :

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

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

Mon menu est :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<ul id="menu" >
    <li><a class="accueil" href="accueil.php">&nbsp;</a></li>
    <li><a class="auteur" href="pages/auteur.php">&nbsp;</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">&nbsp;</a></li>
    <li><a class="contact" href="pages/contact.php">&nbsp;</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…

**headmax** · 10/09/2012, 22h35

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 :

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

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 :

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

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

**sekaijin** · 11/09/2012, 07h26

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

**supunna** · 11/09/2012, 10h19

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 :

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

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 :

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

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 :

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

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 :

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

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 ?

**sekaijin** · 11/09/2012, 14h40

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

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

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

Mon menu est :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<ul id="menu" >
    <li><a class="accueil" href="accueil.php">&nbsp;</a></li>
    <li><a class="auteur" href="pages/auteur.php">&nbsp;</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">&nbsp;</a></li>
    <li><a class="contact" href="pages/contact.php">&nbsp;</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 html :

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

1
2
<?php $menuActif="accueil";
include("../../../menu_principal.php");  ?>

Mon menu est :

Code html :

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

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">&nbsp;</a></li>
    <li><a class="auteur<?php echo ($menuActif=='auteur')?', menuselected':''?>" href="pages/auteur.php">&nbsp;</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">&nbsp;</a></li>
    <li><a class="contact<?php echo ($menuActif=='contact')?', menuselected':''>" href="pages/contact.php">&nbsp;</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

**supunna** · 11/09/2012, 16h04

Merci beaucoup… Ça marche mais ça ne marche pas…

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

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

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

**headmax** · 11/09/2012, 21h25

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

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

**supunna** · 12/09/2012, 01h39

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 :

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

<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

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.

**supunna** · 12/09/2012, 02h09

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

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

**supunna** · 12/09/2012, 12h08

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.

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

**Bovino** · 12/09/2012, 14h17

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

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

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.

**supunna** · 12/09/2012, 15h22

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/

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

JavaScript

Discussions similaires

Partager

Partager