Discussion :

[gregius]

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

[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.

[gregius]

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 :

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

[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.

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

[gregius]

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