[Résolu] Trop de pages pour un menu accordeon

Bonjour à tous
J'ai créé un menu accordéon en css qui fonctionne mais le problème est que j'ai plus de 200 pages et quand je modifie le menu sur une page ii faut modifier sur les 200 pages. Existe t'il un moyen ou un autre langage pour éviter ce problème?

merci d'avance pour vos réponse

J'aurais aimer t'aider mais j'en suis incapable, mais je pense qu'il doit y avoir un moyen de relier ton menu a toute tes pages comme on relis un fichier css a plusieurs fichiers html, en tous cas j'ai hâte de savoir la réponse sa m’intéresse aussi mais pas pour 200 pages, seulement une dizaines

Voili Voilou, sur ce moi je vais dormir je te shouaite une bonne nuit ou bonne journée

Bonjour,
il faut utiliser un langage serveur, par exemple le PHP,
le menu sera dans un fichier nommé menu.php
et il sera appelé sur les pages à l'endroit adéquat ainsi :
<?php include('menu.php'); ?>
C'est l'un des intérêts des langages serveur

farang
Merci pour ta réponse mais je ne peux pas mettre du php, car ces page ne sont pas prévu pour mettre sur un serveur mais mettre dans un fichier zip pour que tout le monde puisse l'utilser chez lui, donc pas de serveur

Alors il y a moyen de faire quelque chose en Javascript, c'est-à-dire un script appelé sur toutes les pages, ce script afficherait le menu, et il suffira de modifier ce script pour que le menu soit modifié sur toutes les pages où il est appelé
Le javascript permet de modifier le DOM, par exemple de changer le contenu de tel ou tel élément HTML de la page

oui j'avais pensé, j'ai eu beau chercher 2 jour sur qwant (Moteur de recherche français équivalent à google mais ou on n'est pas pister)
mais impossible de trouver un modèle très bien expliqué
alors si quelqu'un en a un car je ne connais pas le Javascript

Ah si tu ne connais pas du tout le Javascript, ça va être compliqué,
quelques pistes pour apprendre à modifier le HTML avec Javascript,
"javascript modifier DOM menu" dans ton moteur de recherche,
et quelques liens :
https://www.pierre-giraud.com/javascript/cours-complet/javascript-modification-contenu-html.php
https://openclassrooms.com/fr/courses/1916641-dynamisez-vos-sites-web-avec-javascript/1918282-manipuler-le-code-html-partie-1-2
http://www.aliasdmc.fr/dom_javascript_html/javascript_html_element_innerhtml.html

je n'ai rien trouvé encore comme exemple de menu créé par un script, mais le principe général est bien la modification du HTML par un script

je vais essayé de te montrer un exemple ce week end

ce post doit être déplacé vers la section javascript

merci pour tes liens je vais regarder tout cela.
Comment on fait pour déplacer dans la section javascript ?

comment déplacer? aucune idée ! ce qui serait bien, c'est que tu postes ici le code HTML de ton menu, pas en entier s'il est volumineux, mais quelques onglets, que je puisse travailler avec

tu as de la chance, j'ai retrouvé un exemple simple que j'avais créé l'année dernière, première version :

HTML

<div id="menu">
</div>

JAVASCRIPT (un fichier séparé appelé menu.js, et placé dans un répertoire 'js', c'est plus propre)

	var items = '<ul class="navigation">';
	items = items + '<li><a href="index.html">Accueil</a></li>';
	items = items + '<li><a href="textes.html">Textes</a></li>';
	items = items + '<li><a href="contact.html">Contact</a></li>';
	items = items + '</ul>';
	document.getElementById('menu').innerHTML = items;

appel du javascript juste avant la balise </body>

<script type='text/javascript' src="js/menu.js"></script>

j'ai une version avec changement de background de l'onglet de la page courante mais c'est pour plus tard

Explications : au chargement de la page, le script est appelé et exécuté, il va modifier le contenu de l'élément d'ID menu par le contenu de la variable "items" qu'on a construit dans le script.
on voit la manière dont "items" est construite, avec <ul> et les <li> du menu,
ensuite on utilise document.getElementById('menu').innerHTML pour remplir la div d'ID menu

merci de toutes tes réponses
beaucoup de travaille pendant quelque jours
voici une partie de mon menu

<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html lang="fr">
<head>
<title>Tourelles: Mitrialleuses</title>
<LINK rel="stylesheet" href="../Menu.css">
<LINK rel="stylesheet" href="../general.css">
</head>
<body>
<div>
		<ul id="menu">
			<li><a href="#"><img src="../Icônes/Boutons/Structures_Base.gif" alt="" />Structures de la Base</a>
				<ul>
					<li><a href="../Structures/Commandement.html">Commandement</a></li>
					<li><a href="../Structures/Energie.html">Energie</a></li>
					<li><a href="../Structures/Usines.html">Usines</a></li>
					<li><a href="../Structures/Recherche.html">Recherche</a></li>
					<li><a href="../Structures/Autres.html">Autres</a></li>
					<li><a href="../Structures/Optimisation_du_Materiel.html">Optimisation du Materiel</a></li>
            </ul>
			</li>
			<li><a href="#"><img src="../Icônes/Boutons/Défense_Base.gif" alt="" />Défense de la base</a>
				<ul>
					<li><a href="../Défenses/Surveillance.html">Surveillance</a></li>
					<li><a href="../Défenses/Tour_de_Défense.html">Tour de Défense</a></li>
					<li><a href="../Défenses/Défense_Passive.html">Défense Passive</a></li>
					<li><a href="../Défenses/Pont_Défensif.html">Pont Défensif</a></li>
					<li><a href="../Défenses/Défense_avec_des_Bunkers.html">Défense avec des Bunkers</a></li>
					<li><a href="../Défenses/Emplacement_de_Défense.html">Emplacement de Défense</a></li>
					<li><a href="../Défenses/Fossé_de_Défense.html">Fossé de Défense</a></li>
					<li><a href="../Défenses/Site_de_Défense.html">Site de Défense</a></li>
					<li><a href="../Défenses/Défense_par_Satellite_et_Forteresse.html">Défense par Satellite et Forteresse</a></li>
					<li><a href="../Défenses/Optimisation_du_Matériel.html">Optimisation du Matériel</a></li>
				</ul>
			</li>
			<li><a href="#"><img src="../Icônes/Boutons/Tourelles.gif" alt="" />Tourelles</a>
				<ul>
					<li><a href="../Tourelles/Surveillance.html">Surveillance</a></li>
					<li><a href="../Tourelles/Réparation.html">Réparation</a></li>
					<li><a href="../Tourelles/Commandement.html">Commandement</a></li>
					<li><a href="../Tourelles/Mitrailleuses.html">Mitrailleuses</a></li>
					<li><a href="../Tourelles/Optimisation_des_Mitrailleuses.html">Optimisation des Mitrailleuses</a></li>
					<li><a href="../Tourelles/Canons.htlm">Canons</a></li>
					<li><a href="../Tourelles/Optimisation_des_Canons.html">Optimisation des Canons</a></li>
				</ul>
			</li>
         <li><a href="#"><img src="../Icônes/Boutons/Propulsions_et_Carrosseries.gif" alt="" />Propulsions et Carrosseries</a>
				<ul>
					<li><a href="../Propulsions_et_Carrosseries/Propulsions.html">Propulsions</a></li>
					<li><a href="../Propulsions_et_Carrosseries/Tourelles.html">Carrosseries Bassique</a></li>
					<li><a href="../Propulsions_et_Carrosseries/Carrosseries_Optimissées.html">Carrosseries optimissées</a></li>
					<li><a href="../Propulsions_et_Carrosseries/Carrosseries_de_Transport_de_Troupe.html">Carrosseries de Transport de Troupe</a></li>
					<li><a href="../Propulsions_et_Carrosseries/Carrosseries_NEXUX.html">Carrosseries NEXUX</a></li>
					<li><a href="../Propulsions_et_Carrosseries/Carrosseries_Super-Lourd.html">Carrosseries Super-Lourd</a></li>
					<li><a href="../Propulsions_et_Carrosseries/Optimisation_du_Materiel.html">Optimisation du Materiel</a></li>
				</ul>
			</li>
ect.....
et oui c'est pour un jeu [smile] Warzone 2100

bon c'est pas compliqué, peu importe le nombres de <li>, essaie avec le petit code que je t'ai donné, sur une page de test, et ensuite on modifiera le script pour qu'il affiche ton menu

et bien pour moi cela est compliqué j'ai créé un fichier menujs.html avec

<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html lang="fr">
<head>
</head>
<script type='text/javascript' src="teste.js"></script>
<body>
<div id="menu">
</div>
 </body>
</html>>

aussi avec <script type='text/javascript' src="teste.js"></script>entre <head></head> mais rien ne s'affiche
j'ai essayé de comprendre pourquoi mais je ne trouve pas

le fichier doit d'appeller : menu.js
il ne doit contenir QUE le code que j'ai indiqué :

var items = '<ul class="navigation">';
items = items + '<li><a href="index.html">Accueil</a></li>';
items = items + '<li><a href="textes.html">Textes</a></li>';
items = items + '<li><a href="contact.html">Contact</a></li>';
items = items + '</ul>';
document.getElementById('menu').innerHTML = items;

rien d'autre, ce n'est pas du HTML mais du Javascript, et tu le mets dans le répertoire appelé js, c'est une manière de mettre les scripts tous ensemble dans leur répertoire, qu'on appelle "js" pour "javascript", tu vas retrouver ceci très très souvent,
et tu l'appelles en bas de page avant </body> avec seulement cette ligne :

<script type='text/javascript' src="js/menu.js"></script>

le déboger de firefox me donne une erreur
TypeError: document.getElementById(...) is null
<anonyme> file:///home/menu/js/menu.js:6
donc le fichier js est lu mais comment corriger l'erreur ?

trouver il faut mettre <script type='text/javascript' src="js/menu.js"></script>
dans le body et non pas avant

oui je l'ai dit : juste avant la balise </body>, pas avant la balise <body>...
bon tu avances bien

j'ai crois que j'ai trouvé quelque chose
https://www.alsacreations.com/tuto/lire/602-Creer-un-menu-accordeon-avec-jQuery.html

leur fichier html doit être séparé de toutes mes pages, mais comment l'appeler ?

à ma connaissance, javascript ne peut pas, ce que PHP fait très bien, d'où l'utilisation d'un script qui va insérer le menu dans le HTML, et qui fonctionne bien

mais jQuery, je dis pas ... je n'y avais pas pensé, je regarde

c'est bien ce qu'il me semblait, javascript interdit pour des raisons de sécurité d'aller lire des fichiers sur l'ordi, donc il va falloir utiliser la méthode standard : les pages appellent un javascript qui va afficher le menu
Modifié par farang (03 Aug 2019 - 15:52)

Je crois avoir trouvé 2 choses
1/ la classe objet
2/ les iframe
je travail actuellement sur les iframe mais je suis bloqué

<li><iframe><a href="Défense_Base.html"=target="name_iframe"></iframe>Lien vers l'iframe</a>/a></li>
.
.
.
<iframe name="name_iframe" src="matériels.txt" height="900px" width="550px"> </body>

j'ouvre bien une iframe mais dedans je me retrouve avec le menu et matériels.txt