Discussion :

[isma92]

Bonjour,

Bon j le dis des maintenant, mon probleme demande un peu de temps et reflexion

j essaye de faire un menu dynamique a l aide d un script que j ai trouvé sur un site. Il s agit d'un menu vertical, quand on clique sur une des rubrique les sous-rubriques apparaissent en dessous.

voici le code en question (etant debutant c'est est du thailandais pour moi) :

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
 
 
if(!window.Node){
	  var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};
	}
 
	function checkNode(node, filter){
	  return (filter == null || node.nodeType == Node[filter] ||  node.nodeName.toUpperCase() == filter.toUpperCase());
	}
 
	function getChildren(node, filter){
	  var result = new Array();
	  var children = node.childNodes;
	  for(var i = 0; i < children.length; i++){
		if(checkNode(children[i], filter)) result[result.length] = children[i];
	  }
	  return result;
	}
 
	function getChildrenByElement(node){
	  return getChildren(node, "ELEMENT_NODE");
	}
 
	function getFirstChild(node, filter){
	  var child;
	  var children = node.childNodes;
	  for(var i = 0; i < children.length; i++){
		child = children[i];
		if(checkNode(child, filter)) return child;
	  }
	  return null;
	}
 
	function getFirstChildByText(node){
	  return getFirstChild(node, "TEXT_NODE");
	}
 
	function getNextSibling(node, filter){
	  for(var sibling = node.nextSibling; sibling != null; sibling = sibling.nextSibling){
		if(checkNode(sibling, filter)) return sibling;
	  }
	  return null;
	}
	function getNextSiblingByElement(node){
			return getNextSibling(node, "ELEMENT_NODE");
	}
 
	// Menu Functions & Properties
 
	var activeMenu = null;
 
	function showMenu() {
	  if(activeMenu){
		activeMenu.className = "";
		getNextSiblingByElement(activeMenu).style.display = "none";
	  }
	  if(this == activeMenu){
		activeMenu = null;
	  } else {
		this.className = "active";
		getNextSiblingByElement(this).style.display = "block";
		activeMenu = this;
	  }
	  return false;
	}
 
	function initMenu(){
	  var menus, menu, text, a, i;
	  menus = getChildrenByElement(document.getElementById("menua"));
	  for(i = 0; i < menus.length; i++){
		menu = menus[i];
		text = getFirstChildByText(menu);
		a = document.createElement("a");
		menu.replaceChild(a, text);
		a.appendChild(text);
		a.href = "#";
		a.onclick = showMenu;
		a.onfocus = function(){this.blur()};
	  }
	}
 
	if(document.createElement) window.onload = initMenu;

Voici le code html a mettre dans le body

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
 
<ul id="menua">
  <li>rubrique 1
      <ol>
             <li><a href="blabla">sous rubrique 1</a</li>
             <li><a href="blabla">sous rubrique 2</a</li>
             <li><a href="blabla">sous rubrique 3</a</li>
      </ol>     
  </li>
  <li>rubrique 2
      <ol>
             <li><a href="blabla">sous rubrique 1</a</li>
             <li><a href="blabla">sous rubrique 2</a</li>
             <li><a href="blabla">sous rubrique 3</a</li>
      </ol>     
 
</ul>

et le style correspondant au menu

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
 
<style type='text/css'>
ul#menua {
			  width: 100%;
			  list-style-type: none;
			  border-top: solid 1px #b9a894;
			  margin: 0;
			  padding: 0;
}	  
ul#menua ol {
			  display: none;
			  text-align: left;
			  list-style-type: none;
			  margin: 0;
			  padding: 5px;
			}
ul#menua li, ul#menua a {
			  font-family: verdana, sans-serif;
			  font-size: 16px;
			  font-weight:bold;
			  color: #004080;
}
ul#menua li {
			  border-bottom: solid 2px  #626262;
			  line-height: 60px;
}
ul#menua ol li {
			  border-bottom: none;
			  line-height: 40px;
}
ul#menua ol li:before {
			  content: "- ";
}
ul#menua a {
			  text-decoration: none;
			  outline: none;
}
ul#menua a:hover {
			  color: #539dbc;
}
ul#menua a.active {
			  color: #be5028;
}
</style>

Le script marche parfaitement, mais je voudrais ajouter une image a coté de chaque grande rubrique.

Le probleme est que le script prend alors l'image comme une sous rubrique et zappe les vraies sous rubriques.
Le meilleur moyen de comprendre le probleme de c'est de tester le code.

Si vous avez une idée merci bcq

[E.Bzz]

Bonjour,
si tu mets ton image en background (CSS) du <li> concerné, ça n'influencera pas la structure de ta page et tu ne devrais pas avoir le pb ...

A+

[isma92]

d apres ce que j ai compris du code, initmenu() pren le texte de chaque rubrique , le transforme en lien et transforme les element d'apres en sous rubrique.

Ce qu il faudrai c'est qu elle prenne le texte plus l'image, mais comment...

[isma92]

oui c est pa mal mais le probleme c est qu il me faut une image differente par rubrique

[isma92]

de plus il me faudrait une image a coté du texte et non en background

[E.Bzz]

oui c est pa mal mais le probleme c est qu il me faut une image differente par rubrique

Heu ... oui ?
Ben t'as qu'a mettre ... une image différente par rubrique

Code :

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

1
2
3
4
5
#rub1 {
backgroud-image:url(image_rub1.gif);
}
...
<li id="rub1">Rubrique 1....

Ou est le pb ??

A+

[E.Bzz]

de plus il me faudrait une image a coté du texte et non en background

Pourquoi ?

[isma92]

ba en fait c est la charte graphique qui veut sa: le fond de la rubrique est gris , il y a le texte aligné a gauche, et a droite y a l image

[E.Bzz]

ba en fait c est la charte graphique qui veut sa: le fond de la rubrique est gris , il y a le texte aligné a gauche, et a droite y a l image

Ba si tu avais essayé, tu aurais constaté que c'est tout à fait possible avec cette solution ...

A+

[isma92]

sa y est j ai essayé la solution du css et sa marche

pour respecter ma charte graphique j ai mis sa:

Code :

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

1
2
3
4
5
6
 
 #rub1{      
        background-image:url(images/pen2.jpg);
  	background-repeat: no-repeat;
	background-position: right;
}

ainsi l'image est en fond d ecran mais n'est pas repetée et se trouve a droite

merci E.bzz