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

Version imprimable

31/07/2013, 16h27
rodolphebrd

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

:salut:

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
31/07/2013, 16h30
Invité

... et la question est... ;)
31/07/2013, 16h38
rodolphebrd

Ç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.
31/07/2013, 16h52
Invité

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:

$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"
31/07/2013, 16h56
rodolphebrd

Le site n'est pas en PHP :(

Citation:

Envoyé par rodolphebrd

Le site n'est pas en PHP :(

Petit cachotier...

Tu démarres avec ça :

Code:

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>

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

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 ?

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

Code:

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:

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

31/07/2013, 21h59
Invité

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:

$(#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 !)
31/07/2013, 22h50
NoSmoking
Bonjour,
j'ai l'impression que tu te compliques la vie
- lecture de la HREF et de la page
Code:

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
31/07/2013, 23h00
Invité

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

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:

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:

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>

01/08/2013, 15h18
rodolphebrd

Merci pour vos réponses :ccool:
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 :?

Citation:

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 ?

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:

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:

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:

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

on ne discutera pas du style mis en oeuvre :mrgreen:

01/08/2013, 18h27
rodolphebrd

1 pièce(s) jointe(s)

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 :Pièce jointe 124388
01/08/2013, 19h38
NoSmoking

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

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

Non c'est pas mes yeux (testé sur 4 navigateurs). ;)
Je n'ai que CC ton code. :koi:

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

01/08/2013, 19h53
NoSmoking

Citation:

<title>Document sans nom</title>`

il traine bien un petit `après la fermeture de la balise </title>.
01/08/2013, 20h05
rodolphebrd

:mur::mur::fessee:
01/08/2013, 20h20
rodolphebrd

Ton exemple fonctionne très bien :ccool:

Cependant pour le tester sur un site comment je gère ça : "?index=accueil"

J'ai bien précisé que 'était pour l'exemple, si l'on veux faire la même chose en récupérant le fichier il faut donc utiliser document.location.href.

Le code de récupération devient
Code:

1 2 var sRef=document.location.href.split('/'); sRef = sRef[sRef.length-1] || 'index.html';
comme précisé plus haut, et la recherche s’effectue de la même façon
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 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 paramatre if( oLien[i].href.indexOf( sRef) > -1){ //affecte la class au parent oLien[i].parentNode.className = "lien_inactif"; // desative le lien à l'emporte pièces oLien[i].parentNode.innerHTML = oLien[i].innerHTML // on quitte break; } }
les liens du menu sont évidement à modifier du type
Code:

1 2 3 4 5 <ul id ="menu"> <li><a href="index.html">Accueil</a></li> <li><a href="contact.html">Contact</a></li> <li><a href="news.html">Toutes les news</a></li> </ul>
par exemple.

La partie script est à mettre dans toutes les pages, privilégies un fichier JS autonome.

02/08/2013, 08h41
rodolphebrd

Merci à tous pour votre aide. :ccool:
02/08/2013, 10h23
NoSmoking

Est ce utile d'avoir recours à cela, n'est ce pas plus simple de le faire à la main dans chaque fichier?

Une alternative, à l'instar de l'include du PHP, serait de créer entièrement ton menu DOMesquement au chargement de la page.