Plusieurs pages html appellent le même menu. Possible svp ?

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Plusieurs pages html appellent le même menu. Possible svp ?

snowden

Bonjour,

Actuellement en train d'ajouter quelques pages et bientôt quelques autres dans le futur, j'aimerai m'éviter de change le menu de toutes mes pages au fur et à mesure de mes ajouts.
J'ai cherché mais pas trouvé, peut-être que je cherche avec les mauvais mots-clés

Est-il svp possible d'appeler un menu sur plusieurs pages HTML et que si modification il y a, je puisse le faire que sur un seul menu et que toutes les pages prennent en compte ce menu ?

Merci par avance pour votre aide.

Mon menu actuel ressemble à ça au niveau du code :

HTML :

Code :

<nav role="navigation" class="nav">
<ul class="nav-items">
<li class="nav-item">
<a href="#" class="nav-link"><span>Accueil</span></a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link"><span>Menu1</span></a>
<nav class="submenu">
<ul class="submenu-items">
<li class="submenu-item"><a href="#" class="submenu-link">xxxx</a></li>
<li class="submenu-item"><hr class="submenu-seperator" /></li>
<li class="submenu-item"><a href="#" class="submenu-link">yyyyy</a></li>
<li class="submenu-item"><hr class="submenu-seperator" /></li>
<li class="submenu-item"><a href="#" class="submenu-link">zzzzzz</a></li>
</ul>
</nav>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link"><span>Menu2</span></a>
<nav class="submenu">
<ul class="submenu-items">
<li class="submenu-item"><a href="#" class="submenu-link">Tuto x</a></li>
<li class="submenu-item"><hr class="submenu-seperator" /></li>
<li class="submenu-item"><a href="#" class="submenu-link">Tuto y</a></li>
<li class="submenu-item"><hr class="submenu-seperator" /></li>
<li class="submenu-item"><a href="#" class="submenu-link">Tuto z</a></li>
</ul>
</nav>
</li>
<li class="nav-item">
<a href="#" class="nav-link"><span>A propos</span></a>
</li>
<li class="nav-item">
<a href="#" class="nav-link"><span>Contact</span></a>
</li>
</ul>
</nav>

CSS :

Code :

/* Menu */
.nav {
width: 550px;
margin: 30px auto 30px auto;
text-align: center;
}
.nav {
font-family: Georgia, Arial, sans-serif;
font-size: 14px;
}
.nav-items {
padding: 0;
list-style: none;
}
.nav-item {
display: inline-block;
margin-right: 25px;
}
.nav-item:last-child {
margin-right: 0;
}
.nav-link,
.nav-link:link,
.nav-link:visited,
.nav-link:active,
.submenu-link,
.submenu-link:link,
.submenu-link:visited,
.submenu-link:active {
display: block;
position: relative;
font-size: 14px;
letter-spacing: 1px;
cursor: pointer;
text-decoration: none;
outline: none;
}
.nav-link,
.nav-link:link,
.nav-link:visited,
.nav-link:active {
color: #fff;
font-weight: bold;
}
.nav-link::before {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 3px;
background: rgba(0,0,0,0.2);
opacity: 0;
-webkit-transform: translate(0, 10px);
transform: translate(0, 10px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.nav-link:hover::before,
.nav-link:hover::before {
opacity: 1;
-webkit-transform: translate(0, 5px);
transform: translate(0, 5px);
}
.dropdown {
position: relative;
}
.dropdown .nav-link {
padding-right: 15px;
height: 17px;
line-height: 17px;
}
.dropdown .nav-link::after {
content: "";
position:absolute;
top: 6px;
right: 0;
border: 5px solid transparent;
border-top-color: #fff;
}
.submenu {
position: absolute;
top: 100%;
left: 50%;
z-index: 100;
width: 270px;
margin-left: -140px;
background: #fff;
border-radius: 3px;
line-height: 1.46667;
margin-top: -5px;
box-shadow: 0 0 8px rgba(0,0,0,.3);
opacity:0;
-webkit-transform: translate(0, 0) scale(.85);
transform: translate(0, 0)scale(.85);
transition: transform 0.1s ease-out, opacity 0.1s ease-out;
pointer-events: none;
}
.submenu::after,
.submenu::before {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -10px;
border: 10px solid transparent;
height: 0;
}
.submenu::after {
border-bottom-color: #fff;
}
.submenu::before {
margin-left: -13px;
border: 13px solid transparent;
border-bottom-color: rgba(0,0,0,.1);
-webkit-filter:blur(1px);
filter:blur(1px);
}
.submenu-items {
list-style: none;
padding: 10px 0;
}
.submenu-item {
display: block;
text-align: left;
}
.submenu-link,
.submenu-link:link,
.submenu-link:visited,
.submenu-link:active {
color: #3498db;
padding: 10px 20px;
}
.submenu-link:hover {
text-decoration: underline;
}
.submenu-seperator {
height: 0;
margin: 12px 10px;
border-top: 1px solid #eee;
}
.show-submenu .submenu {
opacity: 1;
-webkit-transform: translate(0, 25px) scale(1);
transform: translate(0, 25px) scale(1);
pointer-events: auto;
}

Cript JS :

Code :

[].slice.call(document.querySelectorAll('.dropdown .nav-link')).forEach(function(el){
el.addEventListener('click', onClick, false);
});
function onClick(e){
e.preventDefault();
var el = this.parentNode;
el.classList.contains('show-submenu') ? hideSubMenu(el) : showSubMenu(el);
}
function showSubMenu(el){
el.classList.add('show-submenu');
document.addEventListener('click', function onDocClick(e){
e.preventDefault();
if(el.contains(e.target)){
return;
}
document.removeEventListener('click', onDocClick);
hideSubMenu(el);
});
}
function hideSubMenu(el){
el.classList.remove('show-submenu');
}

Message édité par snowden le 30-01-2019 à 11:42:21

---------------
« A l’origine de toute erreur attribuée à l’ordinateur, vous trouverez au moins deux erreurs humaines. Dont celle consistant à attribuer l’erreur à l’ordinateur. »

Publicité

snowden

A force de recherche, je suis tombé là-dessus.
N'y a-t-il pas possibilité d'éviter JS svp ?

https://www.w3schools.com/howto/howto_html_include.asp

---------------
« A l’origine de toute erreur attribuée à l’ordinateur, vous trouverez au moins deux erreurs humaines. Dont celle consistant à attribuer l’erreur à l’ordinateur. »

MaybeEijOrNot

but someone at least

Bonjour,

Tu peux te passer de JS en utilisant un langage serveur (ex : PHP) qui va construire la page HTML avant de l'envoyer.
Sinon il existe les frames HTML mais qui ne font plus parti de la spécification HTML 5 et qui de toute manière sont à proscrire.

Message édité par MaybeEijOrNot le 30-01-2019 à 13:35:37

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

snowden

Sauf que je veux un petit site perso uniquement en HTML. J'en suis pas encore à apprendre PHP

---------------
« A l’origine de toute erreur attribuée à l’ordinateur, vous trouverez au moins deux erreurs humaines. Dont celle consistant à attribuer l’erreur à l’ordinateur. »

MaybeEijOrNot

but someone at least

Sinon, si ton éditeur le permet, tu utilises l'outil de remplacement pour remplacer l'ancien menu par le nouveau dans tous les fichiers.

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

snowden

Ça, ça doit pouvoir se faire même si je ne vois pas ça comme une "solution".

---------------
« A l’origine de toute erreur attribuée à l’ordinateur, vous trouverez au moins deux erreurs humaines. Dont celle consistant à attribuer l’erreur à l’ordinateur. »

MaybeEijOrNot

but someone at least

Les solutions il y en a, c'est juste que tu ne peux/veux pas les mettre en place.
Ce que reçoit l'utilisateur c'est déjà une requête construite au niveau du serveur. Le fichier HTML n'est qu'une ressource utilisée par le serveur. Donc soit tu dis au serveur de l'utiliser différemment soit tu dis au client de l'interpréter différemment. Pour cela il faut utiliser un langage de programmation (par exemple PHP côté serveur et JS côté client), le HTML n'est pas en soit un langage de programmation.

Message édité par MaybeEijOrNot le 30-01-2019 à 15:00:42

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

snowden

Ok, là maintenant, je comprend bien le soucis. Merci pour ton apport. Je vais donc me pencher sur JS

Merci encore.

---------------
« A l’origine de toute erreur attribuée à l’ordinateur, vous trouverez au moins deux erreurs humaines. Dont celle consistant à attribuer l’erreur à l’ordinateur. »

rufo

Pas me confondre avec Lycos!

Autre solution : utiliser un CMS pour faire ton site, du genre Wordpress. C'est un peu "bourrin" mais si tu n'es pas dév web, tu risques fort de tomber sur d'autres soucis pour faire ton "petit site". Du coup, Wordpress pourrait te faire gagner du temps au final.

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta

snowden

Oui mais Wordpress est bien trop lourd pour ce que je veux faire et puis j'aime apprendre.

Sauf que je peux pas tout apprendre en une fois et quand je bloque alors je demande aux connaisseurs comme d'autres le font avec moi dans d'autres domaines

---------------
« A l’origine de toute erreur attribuée à l’ordinateur, vous trouverez au moins deux erreurs humaines. Dont celle consistant à attribuer l’erreur à l’ordinateur. »

Publicité

mathieuu

Salut,

Le web c'est très orienté Client/Serveur, c'est un peu dommage de se contenter d'apprendre juste "l'affichage" coté Client : /
A ta place je commencerais à regarder aussi une techno serveur en même temps.

Tu peux par exemple te mettre aux bases du php relativement facilement :
- Installer un serveur (WAMP / LAMP / MAMP par exemple en fonction de ton systeme d'exploitation)
- Configurer pour que apache reponde sur localhost (je me demande si ce n'est pas le cas par defaut)
- Faire des pages "php" pour pouvoir faire des includes ce qui devrait résoudre ton problème rapidement.
- Penser a passer par le navigateur web via http://localhost/... et non pas par file://XXX. pour que les fichiers php soient interprétés

Bonne journée

rufo

Pas me confondre avec Lycos!

Wamp est déjà tout configuré, prêt à l'emploi

snowden

Je vais y réfléchir

Message cité 1 fois

---------------
« A l’origine de toute erreur attribuée à l’ordinateur, vous trouverez au moins deux erreurs humaines. Dont celle consistant à attribuer l’erreur à l’ordinateur. »

mathieuu

snowden a écrit :

Je vais y réfléchir

Va pas te blesser :whistle:

(surtout quand il y a la fonction include en php qui permet de faire ce que tu veux directement )

snowden

Oui oui. Après, j'ai du temps vu le boulot que j'ai commencé à entreprendre sur ce site.
Merci

---------------
« A l’origine de toute erreur attribuée à l’ordinateur, vous trouverez au moins deux erreurs humaines. Dont celle consistant à attribuer l’erreur à l’ordinateur. »

R-a-p-h2

Hello,
avec Laravel ou Symphony c'est très facile de dupliquer tes menus (merci twig)
La doc est tres bien faite, et t'as plein de tuto sur youtube.
Alors oui ça va te prendre peu etre une semaine le temps de voir comment ça fonctionne, mais ça te fera gagner du temps par la suite.

snowden

Ok, merci pour le conseil. Il faut que je me penche sur ce que c'est car autant je sais ce qu'est html, ajax, php etc... Autant je connais pas du tout Laravel et Symphony.

---------------
« A l’origine de toute erreur attribuée à l’ordinateur, vous trouverez au moins deux erreurs humaines. Dont celle consistant à attribuer l’erreur à l’ordinateur. »

FORUM HardWare.fr

Programmation

HTML/CSS

Plusieurs pages html appellent le même menu. Possible svp ?

Sujets relatifs
[MySQL] Plusieurs tables ou une seule grosse dans ce cas?	Plusieurs tableaux mais avec couleurs différentes ?
Exécuter une fonction en PHP avec un bouton HTML	[RESOLU] menu déroulant qui fonctionne en tactile
[Resolu][HTML/CSS]	Menu qui ne veut pas se fixer.
[RÉSOLU] [Javascript/HTML] Uncaught ReferenceError: x is not defined	copier coller plusieurs feuilles dans une feuille
code HTML d'un bouton bas / haut de page dans Google site	Calcul points de plusieurs events et membres
Plus de sujets relatifs à : Plusieurs pages html appellent le même menu. Possible svp ?

Page générée en 0.094 secondes