Menu javascript devrait rester ouvert..

Version imprimable

13/06/2006, 17h55
gregius

Menu javascript devrait rester ouvert..

Hello,

Je suis en train de créer un site avec un menu en javascript qui est développable c'est-à dire que quand on clique sur une rubrique, les autres rubriques descendent et les submenu apparaissent.
Le problème c'est que lorsque je clique sur un lien submenu, la page entière se recharge et le menu est à nouveau complètement fermé...
C'est le cas en html et j'ai vu qu'en php c'est le même cas étant donné qu'il recharge égalemetn toute la page...
J'ai vu en cherchant qu'il faudrait utiliser AJAX... ça à l'air compliqué et je me demandais si quelqu'un n'avait pas déjà réalisé un site où l'en-tête, le menu et le pied de page reste et qu'il n'y a que la partie centrale qui change?
MErci

Greg
14/06/2006, 00h35
Eric Berger

Tu n'auras pas forcément besoin d'ajax... Ajax te permettrait juste d'obtenir des informations du serveur sans recharger la page entière. Ce dont tu ne devrais pas avoir besoin si la quantités totale d'informations de ton menu n'est pas trop importante. Dans ce cas, une gestion dynamique du menu à l'aide de javaScript devrait être suffisante.

Citation:

Envoyé par Eric Berger

Tu n'auras pas forcément besoin d'ajax... Ajax te permettrait juste d'obtenir des informations du serveur sans recharger la page entière. Ce dont tu ne devrais pas avoir besoin si la quantités totale d'informations de ton menu n'est pas trop importante. Dans ce cas, une gestion dynamique du menu à l'aide de javaScript devrait être suffisante.

Il existe donc des menu javascript qui lorsqu'on clique sur un lien, rechargent la page et se souviennent de l'architecture?
J'ai ajouté mon code ci-dessous...
N'y connaissant rien à javascript... quelqu'un pourrait-il m'aider pour ajouter les lignes nécessaires?

Un grand merci d'avance

Greg

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
 
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");
}
 
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("menu"));
	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.onfocus = function(){this.blur()};
	}
}
if(document.createElement) window.onload = initMenu;
function MenuDisplay()
{
	document.write('<ul id="menu">');
		document.write('<li class="puce_noeud">Présentation');
		  document.write('<ol>');
		    document.write('<li class="puce_sous_cat"><a href=index.php?page=objectifs#>Missions et Objectifs</a></li>');
		    document.write('<li class="puce_sous_cat"><a href=index.php?page=accueil#>accueil</a></li>');
		  document.write('</ol>');
		  document.write('<div class="separateur"></div>');
		document.write('</li>');
 
 
	document.write('</ul>');
}

14/06/2006, 09h45
Eric Berger

Dans ce cas, Ajax ne sera pas plus efficace, si tu recharges une page, Ajax ne sera pas à même de maintenir l'état.

Citation:

Envoyé par gregius

N'y connaissant rien à javascript... quelqu'un pourrait-il m'aider pour ajouter les lignes nécessaires?

Et on n'est pas là pour faire les corrections à ta place, mais pour t'aider à les faire ;)
14/06/2006, 10h15
gregius

Citation:

Envoyé par Eric Berger

Dans ce cas, Ajax ne sera pas plus efficace, si tu recharges une page, Ajax ne sera pas à même de maintenir l'état.

Et on n'est pas là pour faire les corrections à ta place, mais pour t'aider à les faire ;)

Même pas une idée des fonctions que je devrais utiliser?
Vous êtes rudes... snif snif