Figer le menu (Javascript)

Herve_be Messages postés 1094 Date d'inscription mercredi 4 août 2010 Statut Membre Dernière intervention 9 avril 2025 - Modifié le 2 févr. 2025 à 16:39
mamiemando Messages postés 33653 Date d'inscription jeudi 12 mai 2005 Statut Modérateur Dernière intervention 3 mai 2025 - 3 févr. 2025 à 14:27

Bonjour,
Je suis nul en JS, j'utilise depuis des années un système de menus écrit en js.
Presque pour chaque page j'utilisais un menu différent ce qui est devenu fastidieux à maintenir, alors j'ai décidé d'utiliser le même menu global partout, l'inconvénient est que lorsqu'on consulte une "sous-page" on ne voit que le menu global, il est difficile de savoir où on est.
Pourriez-vous m'aider pour que, lorsqu'on sélectionne un sous-menu le sous-menu reste affiché dans la nouvelle page ?
Exemple : lorsque je survole l'entrée "Aquarium" du menu principal le sous-menu s'ouvre; si je clique sur "Mon aquarium récifal" une sous-page s'ouvre en affichant seulement le menu principal, je voudrais que le sous-menu "Aquarium" reste ouvert.
Je vous joins le code, merci

var menus = [];

// --- menu class ---
function menu (item_struct, pos, styles) {
	// browser check
	this.item_struct = item_struct;
	this.pos = pos;
	this.styles = styles;
	this.id = menus.length;
	this.items = [];
	this.children = [];
	
	this.add_item = menu_add_item;
	this.hide = menu_hide;
	
	this.onclick = menu_onclick;
	this.onmouseout = menu_onmouseout;
	this.onmouseover = menu_onmouseover;
	this.onmousedown = menu_onmousedown;
	
	var i;
	for (i = 0; i < this.item_struct.length; i++)
		new menu_item(i, this, this);
	for (i = 0; i < this.children.length; i++)
		this.children[i].visibility(true);
	menus[this.id] = this;
}
function menu_add_item (item) {
	var id = this.items.length;
	this.items[id] = item;
	return (id);
}
function menu_hide () {
	for (var i = 0; i < this.items.length; i++) {
		this.items[i].visibility(false);
		this.items[i].switch_style('onmouseout');
	}
}
function menu_onclick (id) {
	var item = this.items[id];
	return (item.fields[1] ? true : false);
}
function menu_onmouseout (id) {
	this.hide_timer = setTimeout('menus['+ this.id +'].hide();',
		this.pos['hide_delay'][this.active_item.depth]);
	if (this.active_item.id == id)
		this.active_item = null;
}
function menu_onmouseover (id) {
	this.active_item = this.items[id];
	clearTimeout(this.hide_timer);
	var curr_item, visib;
	for (var i = 0; i < this.items.length; i++) {
		curr_item = this.items[i];
		visib = (curr_item.arrpath.slice(0, curr_item.depth).join('_') ==
			this.active_item.arrpath.slice(0, curr_item.depth).join('_'));
		if (visib)
			curr_item.switch_style (
				curr_item == this.active_item ? 'onmouseover' : 'onmouseout');
		curr_item.visibility(visib);
	}
}
function menu_onmousedown (id) {
	this.items[id].switch_style('onmousedown');
}
// --- menu item Class ---
function menu_item (path, parent, container) {
	this.path = new String (path);
	this.parent = parent;
	this.container = container;
	this.arrpath = this.path.split('_');
	this.depth = this.arrpath.length - 1;
	// get pointer to item's data in the structure
	var struct_path = '', i;
	for (i = 0; i <= this.depth; i++)
		struct_path += '[' + (Number(this.arrpath[i]) + (i ? 2 : 0)) + ']';
	eval('this.fields = this.container.item_struct' + struct_path);
	if (!this.fields) return;
	
	// assign methods	
	this.get_x = mitem_get_x;
	this.get_y = mitem_get_y;
	// these methods may be different for different browsers (i.e. non DOM compatible)
	this.init = mitem_init;
	this.visibility = mitem_visibility;
	this.switch_style = mitem_switch_style;
	
	// register in the collections
	this.id = this.container.add_item(this);
	parent.children[parent.children.length] = this;
	
	// init recursively
	this.init();
	this.children = [];
	var child_count = this.fields.length - 2;
	for (i = 0; i < child_count; i++)
		new menu_item (this.path + '_' + i, this, this.container);
	this.switch_style('onmouseout');
}
function mitem_init() {
	document.write (
		'<a id="mi_' + this.container.id + '_'
			+ this.id +'" class="m' + this.container.id + 'l' + this.depth 
			+'o" href="' + this.fields[1] + '" style="position: absolute; top: '
			+ this.get_y() + 'px; left: '	+ this.get_x() + 'px; width: '
			+ this.container.pos['width'][this.depth] + 'px; height: '
			+ this.container.pos['height'][this.depth] + 'px; visibility: hidden;'
			+' background: black; color: white; z-index: ' + this.depth + ';" '
			+ 'onclick="return menus[' + this.container.id + '].onclick('
			+ this.id + ');" onmouseout="menus[' + this.container.id + '].onmouseout('
			+ this.id + ');" onmouseover="menus[' + this.container.id + '].onmouseover('
			+ this.id + ');" onmousedown="menus[' + this.container.id + '].onmousedown('
			+ this.id + ');"><div class="m'  + this.container.id + 'l' + this.depth + 'i">'
			+ this.fields[0] + "</div></a>\n"
		);
	this.element = document.getElementById('mi_' + this.container.id + '_' + this.id);
}
function mitem_visibility(make_visible) {
	if (make_visible != null) {
		if (this.visible == make_visible) return;
		this.visible = make_visible;
		if (make_visible)
			this.element.style.visibility = 'visible';
		else if (this.depth)
			this.element.style.visibility = 'hidden';
	}
	return (this.visible);
}
function mitem_get_x() {
	var value = 0;
	for (var i = 0; i <= this.depth; i++)
		value += this.container.pos['block_left'][i]
		+ this.arrpath[i] * this.container.pos['left'][i];
	return (value);
}
function mitem_get_y() {
	var value = 0;
	for (var i = 0; i <= this.depth; i++)
		value += this.container.pos['block_top'][i]
		+ this.arrpath[i] * this.container.pos['top'][i];
	return (value);
}
function mitem_switch_style(state) {
	if (this.state == state) return;
	this.state = state;
	var style = this.container.styles[state];
	for (var i = 0; i < style.length; i += 2)
		if (style[i] && style[i+1])
			eval('this.element.style.' + style[i] + "='" 
			+ style[i+1][this.depth] + "';");
}

menu_tpl.js

/* --- geometry and timing of the menu --- */
var MENU_POS = new Array();

    // item sizes for different levels of menu
    MENU_POS['height']     = [22, 22, 22];
    MENU_POS['width']      = [150, 250, 200];

    // menu block offset from the origin:
    //  for root level origin is upper left corner of the page
    //  for other levels origin is upper left corner of parent item
    MENU_POS['block_top']  = [50, 5, 5];
    MENU_POS['block_left'] = [15, 110, 210];

    // offsets between items of the same level
    MENU_POS['top']        = [23, 23, 23];
    MENU_POS['left']       = [0, 0, 0];

    // time in milliseconds before menu is hidden after cursor has gone out
    // of any items
    MENU_POS['hide_delay'] = [200, 200, 200];

/* --- dynamic menu styles ---
note: you can add as many style properties as you wish but be not all browsers
are able to render them correctly. The only relatively safe properties are
'color' and 'background'.
*/

var MENU_STYLES = new Array();

    // default item state when it is visible but doesn't have mouse over
    MENU_STYLES['onmouseout'] = [
        'color', ['#ffffff', '#ffffff', '#000000'],
        'background', ['#336699', '#6699cc', '#99ccff'],
    ];

    // state when item has mouse over it
    MENU_STYLES['onmouseover'] = [
        'color', ['#ffff00', '#ffff00', '#000000'],
        'background', ['#336699', '#6699cc', '#99ccff'],
    ];

    // state when mouse button has been pressed on the item
    MENU_STYLES['onmousedown'] = [
        'color', ['#ffffff', '#ffffff', '#000000'],
        'background', ['#336699', '#6699cc', '#99ccff'],
    ];

menu_items.js

// menu_items.js file
var MENU_ITEMS =[
    ["Marottes", "/Marottes.htm"],
    ["Aquarium", "/Aquarium/index.php",
        ["Mon aquarium récifal", "/Aquarium/MonBac.php"],
        ["Eclairage Alpheus", "/Aquarium/Alpheus/Alpheus.htm"],
        ["Questions fréquentes", "/Aquarium/FAQ.php"],
        ["Historique", "/Aquarium/Historique.php",
            ["2002 : Premier bac", "/Aquarium/Description/1erBac.htm"],
            ["2004 : 750 litres", "/Aquarium/750/index.php"],
            ["2014 : Nouveau décor", "/Aquarium/Refection2014/Refection2014.htm"],
            ["2018 : 750 bis", "/Aquarium/750bis/750bis.php"]
        ],
        ["Reef Tools", "/Aquarium/RVRT/RVRT.php",
            ["Mode d'emploi", "/Aquarium/RVRT/RVRT.php"],
            ["Quoi de neuf ?", "/Aquarium/RVRT/RVRTVersions.php"],
            ["Questions fréquentes", "/Aquarium/RVRT/RVRT-FAQ.php"],
            ["Forum", "https://www.LeForumRecifal.com"],
            ["Méthode", "/Aquarium/Method.php"],
            ["Salinity Converter", "/Aquarium/RVRT/RVSC.php"],
            ["Calcul osmoseur", "/Aquarium/RVRT/RVosmo.php"],
            ["Avis des utilisateurs", "/Aquarium/RVRT/RVRTCredits.php"],
            ["Statistiques", "/Aquarium/RVRT/RVRTstats.php"],
            ["Rapports d'erreur", "/Aquarium/RVRT/RVRTerror.php"],
            ["Exemples Log Books", "/Aquarium/RVRT/LogBooks.php"],
            ["Exemples Rampes DIY", "/Aquarium/RVRT/DIY.php"],
            ["Exemples Ca/Mg/KH", "/Aquarium/RVRT/CaMgKHExemples.php"]
        ],
        ["Articles", "/Aquarium/Articles/Articles.htm",
            ["Base de connaissances", "/Aquarium/Articles/Base%20de%20connaissances.pdf"],
            ["Salinité", "/Aquarium/Articles/Salinite.pdf"],
            ["Réacteur A Carbonates", "/Aquarium/Articles/RAC.pdf"],
            ["Nitrates et Phosphates", "/Aquarium/Articles/NO3PO4/NO3PO4.htm"],
            ["La lumière", "/Aquarium/Articles/Lumiere.pdf"],
            ["Conception d'une rampe LED", "/Aquarium/Articles/LED.pdf"],
            ["Sécurité électrique", "/Aquarium/Articles/EauALaTerre.php"],
            ["Porte à faux", "/Aquarium/Articles/Portafo/Portafo.htm"],
            ["Anémones", "/Aquarium/Articles/Anemones/Anemones.htm"],
            ["Choix d'un écumeur", "/Aquarium/Articles/ChoixEcumeur.pdf"]
        ],
        ["Bricolages", "/Aquarium/Bricolages/Brico.htm",
            ["Brassage - Osmolation", "/Aquarium/Bricolages/BrasOsmo/Description.htm"],
            ["Pousse seringue", "/Aquarium/Bricolages/Seringue/Description.htm"],
            ["Raclette aimantée", "/Aquarium/Bricolages/Raclette/Raclette.htm"],
            ["Thermostat", "/Aquarium/Bricolages/Thermostat/Thermostat.html"],
            ["Robinet de surverse", "/Aquarium/Bricolages/Robinet/Robinet.htm"],
            ["Crépine de pompe", "/Aquarium/Bricolages/Crepine/Crepine.htm"],
            ["Filtre fluidisé", "/Aquarium/Bricolages/Filtre/Filtre.htm"],
            ["Eclairage 150 => 250 W", "/Aquarium/Bricolages/150 a 250/150 a 250.htm"],
            ["Eclairage LED", "/Aquarium/Bricolages/EclairageLED/EclairageLED.htm"],
            ["Réacteur à carbonates", "/Aquarium/Bricolages/RAC/RAC.htm"],
            ["Gestion de l'eau", "/Aquarium/Bricolages/Zelio/Zelio.htm"]
        ],
        ["Album photo", "/Aquarium/Album.php"],
        ["Photos récifales", "/Galerie/index.php"],
        ["Images", "/Aquarium/Images.php"]
    ],

    ["Pilote privé","/PilotePrive/Agenda.php",
        ["Agenda des vols", "/PilotePrive/Agenda.php"],
        ["Destinations", "/PilotePrive/Destinations.php"],
        ["Album photo", "/PilotePrive/Album.php"],
        ["Mes avions", "/PilotePrive/Avions.php"],
        ["Robin DR400", "/PilotePrive/DR400.php"],
        ["Diamond DA40", "/PilotePrive/DA40.php"],
        ["Maquette DR400", "/PilotePrive/F-GMXM.php"],
        ["Maquette DA-40", "/PilotePrive/F-HABL.php"],
        ["Aéroclub de Maubeuge", "http://www.aeroclubmaubeuge.com/"]
        ["Take Off ATO", "https://www.takeoff-ato.com/"]
    ],

    ["Modélisme","/Modelisme/index.htm",
        ["Album photo", "/Modelisme/Historique.php"],
        ["Mes avions", "/Modelisme/Avions.php"],
        ["Meetings", "/Modelisme/Meetings.php"],
        ["Mesure du centre de gravité", "/Modelisme/CG/CG.htm"]
    ],

    ["Randonnées", ,
        ["Proches", "/Hiking/Rando.php"],
        ["Lointaines", "/Hiking/Walk.php"]
    ],

    ["Vélo", "/VTT/Agenda.php",
        ["Agenda", "/VTT/Agenda.php", 
            ["2016-2017", "/VTT/agenda2016.php"],
            ["2015-2016", "/VTT/agenda2015.php"],
            ["2014-2015", "/VTT/agenda2014.php"],
            ["2013-2014", "/VTT/agenda2013.php"],
            ["2012-2013", "/VTT/agenda2012.htm"],
            ["2011-2012", "/VTT/agenda2011.htm"],
            ["2010-2011", "/VTT/agenda2010.htm"],
            ["2009-2010", "/VTT/agenda2009.htm"],
            ["2008-2009", "/VTT/agenda2008.htm"],
            ["2007-2008", "/VTT/agenda2007.htm"],
            ["2006-2007", "/VTT/agenda2006.htm"],
            ["2005-2006", "/VTT/agenda2005.htm"],
            ["2004-2005", "/VTT/agenda2004.htm"]
        ],
        ["Itinéraires", ,
            ["VTT", "/VTT/VTT-Pad.htm"],
            ["Route", "/VTT/Road-Pad.htm"]
        ],
        ["Galerie photo", "/VTT/Galerie/index.php"],
        ["Mémoires d'une bande de joyeux lurons", "/VTT/Lurons.php"],
        ["Formulaire d'inscription","/VTT/Formulaires/Inscription.pdf"],
        ["Petites annonces", "/VTT/annonces.htm"],
        ["Liens", "/VTT/Links.htm"]
    ],

    ["Moto", ,
        ["Album photo", "/Moto/Album.php"],
        ["Itinéraires", ,
            ["45 km autour de Jurbise", "/OSM/Map.html?map=Moto/Tourdelentite.xml"],
            ["57 km Chièvres Meslin", "/OSM/Map.html?map=Moto/081219.xml"],
            ["90 km vers Enghien", "/OSM/Map.html?map=Moto/90kmMoto.xml"],
            ["100 km pour une péniche", "/OSM/Map.html?map=Moto/Peniche.xml"],
            ["125 km Pays des Collines", "/OSM/Map.html?map=Moto/125 km Renaix Herne.xml"],
            ["140 km Pays des Collines", "/OSM/Map.html?map=Moto/140 km Herne Renaix.xml"],
            ["150 km Plaines de l'Escaut", "/OSM/Map.html?map=Moto/PlainesEscaut.xml"],
            ["196 km Wallonie picarde", "/OSM/Map.html?map=Moto/196 km Wallonie picarde.xml"],
            ["214 km Charleroi", "/OSM/Map.html?map=Moto/214 km Charleroi.xml"],
            ["230 km Avesnois", "/OSM/Map.html?map=Moto/230 km Avesnois.xml"],
            ["233 km Valenciennes", "/OSM/Map.html?map=Moto/233 km autour de Valenciennes.xml"],
            ["235 km vers Chimay", "/OSM/Map.html?map=Moto/080824.xml"],
            ["240 km Napoléon", "/OSM/Map.html?map=Moto/240 km Napoleon.xml"],
            ["240 km Val Joly Avesnois", "/OSM/Map.html?map=Moto/240 km ValJolyAvesnois.xml"],
            ["300 km Semois - Meuse", "/OSM/Map.html?map=Moto/100706.xml"],
            ["300 km au fil de la Semois", "/OSM/Map.html?map=Moto/120916.xml"],
            ["350 km Château de Limé", "/OSM/Map.html?map=Moto/Lime.xml"],
            ["350 km Thiérache", "/OSM/Map.html?map=Moto/350 km Tierache.xml"],
            ["516 km Ardennes françaises", "/OSM/Map.html?map=Moto/516 km Ardennes francaises.xml"],
            ["666 km Baie de Somme", "/OSM/Map.html?map=Moto/Baie de Somme.xml"],
            ["782 km Eifel", "/OSM/Map.html?map=Moto/Eifel retour.xml"],
            ["1.300 km Normandie", "/OSM/Map.html?map=Moto/Normandie.xml"],
            ["1.650 km Bourgogne", "/OSM/Map.html?map=Moto/Bourgogne.xml"]
        ],
        ["Xénon", "/Moto/Xenon.gif"],
    ],

    ["Voyages",,
        ["Grands voyages", ,
            ["Carte", "/Voyages/WorldMap.html"],
            ["1996 Île Maurice", "/Voyages/1996 1 Maurice/Album.html"],
            ["1996 Vietnam", "/Voyages/1996 2 Viet Nam/Album.html"],
            ["1997 Egypte", "/Voyages/1997 1 Egypte/Album.html"],
            ["1997 New York - Mexique", "/Voyages/1997 2 NY Mexique/Album.html"],
            ["1998 Birmanir", "/Voyages/1998 0 Birmanie/Album.html"],
            ["1999 Costa Rica", "/Voyages/1999 0 Costa Rica/Album.html"],
            ["2000 Martinique", "/Voyages/2000 1 Martinique/Album.html"],
            ["2000 Malaisie", "/Voyages/2000 2 Malaisie/Album.html"],
            ["2001 Laos", "/Voyages/2001 0 Laos/Album.html"],
            ["2002 Cambodge", "/Voyages/2002 0 Cambodge/Album.html"]
        ],
        ["Plongées", ,
            ["Carte", "/Voyages/Plongees.html"],
            ["Album", "/Plongee/index.htm"]
        ],
    ],


    ["Electronique", "/Electronique/index.htm",
        ["Ampli à tubes 2A3", "/Electronique/2A3/Album.html"],
        ["Préampli RIAA", "/Electronique/RIAA/index.htm"],
        ["Turn table", "/Electronique/Turn%20Table/Album.html"],
        ["MLTL", "/Electronique/MLTL/index.htm"],
        ["SV811a2", "/Electronique/SV811A2/index.htm"],
        ["e86C845", "/Electronique/e86c845/Album.php"]
    ],
    ["Nécrologie", "/Necrologie.php"],
    ["Météo", "/Meteo/Meteo.htm"],

    ["Smiley", "/gif.php"]
    
];

A voir également:

Figer le menu (Javascript)
Menu déroulant excel - Guide
Figer les volets - Guide
Telecharger javascript - Télécharger - Langages
Windows 11 menu démarrer classique - Guide
Réinitialiser menu démarrer windows 10 - Guide

3 réponses

Réponse 1 / 3

mamiemando Messages postés 33653 Date d'inscription jeudi 12 mai 2005 Statut Modérateur Dernière intervention 3 mai 2025 7 846
3 févr. 2025 à 12:59

Bonjour,

Je pense que tu devrais partir sur un code plus simple et plus moderne que celui que tu proposes en te basant sur cet exemple.

Bonne chance

Réponse 2 / 3

Herve_be Messages postés 1094 Date d'inscription mercredi 4 août 2010 Statut Membre Dernière intervention 9 avril 2025 10
Modifié le 3 févr. 2025 à 14:19

Mon code n'est certes pas nouveau, je l'utilise depuis longtemps, il a 2 avantages

menu à plusieurs niveaux (sous-menu, sous-sous menu, ...
il est facile d'ajouter des entrées, voir fichier menu_items.js

Le seul défaut est que si je clique sur un élément qui ouvre une nouvelle page celle-ci affiche évidemment le menu du plus haut niveau; il me semble qu'avec l'équivalent de Session en php on devrait pouvoir transmettre à la nouvelle page où on en est et ouvrir l'arborescence au même niveau, mais comme je l'ai dit je suis nul en Javascript, raison pour laquelle j'ai besoin d'aide.

Réponse 3 / 3

mamiemando Messages postés 33653 Date d'inscription jeudi 12 mai 2005 Statut Modérateur Dernière intervention 3 mai 2025 7 846
3 févr. 2025 à 14:27

Bonjour,

Tu peux sans doute repartir de cet exemple alors pour avoir une solution purement en javascript. L'idée est de récupérer l'adresse courante pour en déduire d'où repartir. Par contre le code proposé dans cette discussion suppose que le menu est hiérarchisé par l'arbre DOM -i.e., les balises HTML-, comme dans l'exemple que je t'avais donné dans #1. L'énorme avantage c'est que tu as d'emblée des notions de parents, tu peux retrouver un nœud de l'arbre DOM avec son identifiant (voir document.getElementById), bref c'est beaucoup plus pratique et "fait pour".

Toutefois, si tu souhaites conserver le code actuel, tu peux repartir de la variable location.pathname, comme le propose cet exemple, et en fonction de cette valeur, déterminer le bon nœud dans ta liste hiérarchique pour afficher le menu en conséquence.

Bonne chance

Discussions similaires

menu caché

Déblocage du mode hôtel Philips 20HF5234/10

Javascript Arrondi à 2 chiffres après la virgule

java script error in the main process

Votre réponse

Discussions similaires