Styliser le lien d'un menu de la page d'accueil

**rodolphebrd** · 31/07/2013, 16h27

Un petit soucis me turlupine depuis un certain temps sans que j'ai trouvé de réponse.

Ma question fait suite cette discussion de sorte que tous les codes sont fournis.

J'utilise actuellement un script similaire qui fonctionne très bien sur ma page d'accueil (monSite.com/index.html) mais pas sur ma home page (monSite.com) sur laquelle on accède via Google par exemple.

Merci pour vos réponses

Invité · 31/07/2013, 16h30

... et la question est...

**rodolphebrd** · 31/07/2013, 16h38

Ça fonctionne sur : monSite.com/index.html mais pas quand la page s'ouvre avec l'URL : monSite.com.

Ma question : comment faire pour que l'item ACCUEIL du menu soit styliser dans les deux cas.

Invité · 31/07/2013, 16h52

en définissant un style au menu "Accueil" SI aucune page (autre que index.php) n'est trouvée.

En PHP, il est très facile de définir les "pages autorisées" dans un array().

Code :

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

$array_allowed_pages = array('...','...',.........);

La liste peut aussi être construite à partir de cet array() ;
ou mieux encore : enregistrer le menu dans une table en BdD.

N.B. Mais ici, on n'est plus dans le cas "Surligner sur le onclick" !

On est plutôt sur : "personnaliser le lien de la page en cours"

**rodolphebrd** · 31/07/2013, 16h56

Le site n'est pas en PHP

Invité · 31/07/2013, 16h58

Envoyé par rodolphebrd

Le site n'est pas en PHP

Petit cachotier...

Tu démarres avec ça :

Code :

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

1
2
3
4
5
6
7
8
            <div id="nav">
              <ul>
                <li id="menu_index" class="current"><a href="index.html">Lien 1</a></li>
                <li id="menu_page2" class=""><a href="page2.html">Lien 2</a></li>
                <li id="menu_page3" class=""><a href="page3.html">Lien 3</a></li>
                <li id="menu_page4" class=""><a href="page4.html">Lien 4</a></li>
              </ul>
            </div>

**JérémieL** · 31/07/2013, 17h01

Je suis allé voir l'autre topic, il s'agit du code montré dans ton deuxième message ?

En utilisant document.location.pathname plutôt que document.location.href pour retrouver le nom de la page actuelle, tu devrais obtenir index.html quand t'es sur l'accueil, non ?

**rodolphebrd** · 31/07/2013, 19h47

Bon désolé je n'arrive pas à l'adapter à mon menu dont les items ne comportent ni d'ID ni de Classes.

Code html :

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

1
2
3
4
5
6
7
8
<div id="nav">
<ul>
  <li><a href="mainpage.html">Accueil</a></li>
  <li><a href="page2.html">page 2</a></li>
  <li><a href="page3.html">page 3</a></li>
  <li><a href="page4.html">page 4</a></li>
</ul>
<script language="javascript">setPage()</script>

J'ai ce script actuellement:

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
function extractPageName(hrefString)
{
	var arr = hrefString.split('/');
	return  (arr.length<2) ? hrefString : arr[arr.length-2].toLowerCase() + arr[arr.length-1].toLowerCase();               
}
 
function setActiveMenu(arr, crtPage)
{
	for (var i=0; i<arr.length; i++)
	{
		if(extractPageName(arr[i].href) == crtPage)
		{
			if (arr[i].parentNode.tagName != "DIV")
			{
				arr[i].className = "current";
				arr[i].parentNode.className = "current";
			}
		}
	}
}
 
function setPage()
{
	hrefString = document.location.href ? document.location.href : document.location;
 
	if (document.getElementById("nav")!=null)
		setActiveMenu(document.getElementById("nav").getElementsByTagName("a"), extractPageName(hrefString));
}

Invité · 31/07/2013, 21h59

tu ne peux pas ajouter de code html ? (comme je l'ai indiqué ci-dessus)
et ainsi adapter tes scripts ?

N.B. Une solution jQuery est aussi plus facile à ecrire.
ex. :

Code :

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

$(#nav ul li a).each(function() {...});

N.B.2 pas de site/page online ?

N.B.3 je peux te faire un script demain (là, je suis sur smartphone !)

**NoSmoking** · 31/07/2013, 22h50

Bonjour,
j'ai l'impression que tu te compliques la vie
- lecture de la HREF et de la page

Code :

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

1
2
var ref=document.location.href.split('/');
ref = ref[ref.length-1] || 'index.html';

on notera que si ref est vide c'est index.html qui est pris en compte
- récupération des liens du menu
- test si la ref est contenu dans le lien SI OUI on ajoute la classe active

Invité · 31/07/2013, 23h00

@NoSmoking
tu tues la poule dans l'oeuf ! ( ou le contraire ?)

**NoSmoking** · 31/07/2013, 23h34

Je rajouterais qu'il est intéressant de supprimer le lien( balise A) se qui éviterait comme on le voit de temps en temps un lien sur la page affichée
En entrée

Code html :

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

1
2
3
4
5
6
7
<div id="nav">
<ul>
  <li><a href="index.html">Accueil</a></li>
  <li><a href="page2.html">page 2</a></li>
  <li><a href="page3.html">page 3</a></li>
  <li><a href="page4.html">page 4</a></li>
</ul>

En sortie

Code html :

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

1
2
3
4
5
6
7
<div id="nav">
<ul>
  <li class="page_active">Accueil</li>
  <li><a href="page2.html">page 2</a></li>
  <li><a href="page3.html">page 3</a></li>
  <li><a href="page4.html">page 4</a></li>
</ul>

**rodolphebrd** · 01/08/2013, 15h18

Merci pour vos réponses

Bon je compile :

jreaux62 : le code que j'ai donné est exactement celui du site.
Charger une bibliothèque Jquery juste pour un effet de menu c'est pas un peu trop non ?

JérémieL : j'allais essayer ce que vous proposez jusqu'à l'intervention de NoSmoking sur les (href) que je ne saisis pas

Envoyé par NoSmoking

Je rajouterais qu'il est intéressant de supprimer le lien( balise A) se qui éviterait comme on le voit de temps en temps un lien sur la page affichée

Je suis d'accord avec ça mais, je le place comment ?

**NoSmoking** · 01/08/2013, 16h50

Je te mets un petit exemple de la méthode, j’utilise pour cette exemple location.search, pas de page à créer

, mais le principe est le même.

Code html :

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
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>CSS style sur lien Menu</title>
<style type="text/css">
#menu a,#menu li {
  font-family:Verdana,Arial;
  width:200px;
  line-height:25px;
  display:block;
  text-decoration:none;
}
#menu a: {
  background-color:#ffffff;
  font-size:15px;
}
#menu a:hover {
  color:#00f;
  background-color:#e0e0e0;
}
.lien_inactif {
  color:#000;
  font-weight:bold;
  font-size:18px;
  font-style:italic;
  background-color:#f0f0f0;
}
.lien_inactif:hover {
  color:#00f;
  background-color: #e0e0f0;
}
</style>
</head>
<body>
<ul id ="menu">
  <li><a href="?index=accueil">Accueil</a></li>
  <li><a href="?index=contact">Contact</a></li>
  <li><a href="?index=news">Toutes les news</a></li>
</ul>
 
<script type="text/javascript">

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
if( window.location.search){
  // recup paramètre
  var sParam = window.location.search;
  // recup l'element menu
  var oMenu = document.getElementById('menu');
  // recup des liens
  var oLien = oMenu.getElementsByTagName('a');
  // parcours des liens
  for( var i=0, nb=oLien.length; i<nb; i++){
    // si contient le paramètre
    if( oLien[i].href.indexOf( sParam) > -1){
      //affecte la classe au parent
      oLien[i].parentNode.className = "lien_inactif";
      // désactive le lien à l'emporte pièces
      oLien[i].parentNode.innerHTML = oLien[i].innerHTML
      // on quitte
      break;
    }
  }
}

Code html :

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

1
2
3
</script>
</body>
</html>

on ne discutera pas du style mis en oeuvre

**rodolphebrd** · 01/08/2013, 18h27

Merci NoSmoking,

Dans ton exemple il y a " ' " qui apparait dans la console d'inspection de code juste après BODY <body>` <style type="text/css">Ça donne ça :

Nom : Capture d’écran 2013-08-01 à 18.24.32.png
Affichages : 104
Taille : 9,9 Ko

**NoSmoking** · 01/08/2013, 19h38

Je suppute que c'est une poussière sur ton écran

Perso je n'observe rien après avoir reconstruit le code.

**rodolphebrd** · 01/08/2013, 19h46

Non c'est pas mes yeux (testé sur 4 navigateurs).

Je n'ai que CC ton code.

Code html :

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
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document sans nom</title>`
<style type="text/css">
#menu a,#menu li {
  font-family:Verdana,Arial;
  width:200px;
  line-height:25px;
  display:block;
  text-decoration:none;
}
#menu a: {
  background-color:#ffffff;
  font-size:15px;
}
#menu a:hover {
  color:#00f;
  background-color:#e0e0e0;
}
.lien_inactif {
  color:#000;
  font-weight:bold;
  font-size:18px;
  font-style:italic;
  background-color:#f0f0f0;
}
.lien_inactif:hover {
  color:#00f;
  background-color: #e0e0f0;
}
</style>
</head>
 
<body>
<ul id ="menu">
  <li><a href="?index=accueil">Accueil</a></li>
  <li><a href="?index=contact">Contact</a></li>
  <li><a href="?index=news">Toutes les news</a></li>
</ul>
 
<script type="text/javascript">
if( window.location.search){
  // recup paramètre
  var sParam = window.location.search;
  // recup l'element menu
  var oMenu = document.getElementById('menu');
  // recup des liens
  var oLien = oMenu.getElementsByTagName('a');
  // parcours des liens
  for( var i=0, nb=oLien.length; i<nb; i++){
    // si contient le paramètre
    if( oLien[i].href.indexOf( sParam) > -1){
      //affecte la classe au parent
      oLien[i].parentNode.className = "lien_inactif";
      // désactive le lien à l'emporte pièces
      oLien[i].parentNode.innerHTML = oLien[i].innerHTML
      // on quitte
      break;
    }
  }
}
</script>
</body>
</html>