Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
795 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°2328373
snowden
Posté le 30-01-2019 à 11:41:35  profilanswer
 

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 :
  1. <!-- Menu -->
  2.     <nav role="navigation" class="nav">
  3.     <ul class="nav-items">
  4.         <li class="nav-item">
  5.             <a href="#" class="nav-link"><span>Accueil</span></a>
  6.         </li>
  7.         <li class="nav-item dropdown">
  8.             <a href="#" class="nav-link"><span>Menu1</span></a>
  9.             <nav class="submenu">
  10.                 <ul class="submenu-items">
  11.                     <li class="submenu-item"><a href="#" class="submenu-link">xxxx</a></li>
  12.                     <li class="submenu-item"><hr class="submenu-seperator" /></li>
  13.                     <li class="submenu-item"><a href="#" class="submenu-link">yyyyy</a></li>
  14.                     <li class="submenu-item"><hr class="submenu-seperator" /></li>
  15.                     <li class="submenu-item"><a href="#" class="submenu-link">zzzzzz</a></li>
  16.                 </ul>
  17.             </nav>
  18.         </li>
  19.         <li class="nav-item dropdown">
  20.             <a href="#" class="nav-link"><span>Menu2</span></a>
  21.             <nav class="submenu">
  22.                 <ul class="submenu-items">
  23.                     <li class="submenu-item"><a href="#" class="submenu-link">Tuto x</a></li>
  24.                     <li class="submenu-item"><hr class="submenu-seperator" /></li>
  25.                     <li class="submenu-item"><a href="#" class="submenu-link">Tuto y</a></li>
  26.                     <li class="submenu-item"><hr class="submenu-seperator" /></li>
  27.                     <li class="submenu-item"><a href="#" class="submenu-link">Tuto z</a></li>
  28.                 </ul>
  29.             </nav>
  30.         </li>
  31.         <li class="nav-item">
  32.             <a href="#" class="nav-link"><span>A propos</span></a>
  33.         </li>
  34.         <li class="nav-item">
  35.             <a href="#" class="nav-link"><span>Contact</span></a>
  36.         </li>
  37.     </ul>
  38. </nav>


 
CSS :
 

Code :
  1. /* Menu */
  2. .nav {
  3.     width: 550px;
  4.     margin: 30px auto 30px auto;
  5.     text-align: center;
  6. }
  7. .nav {
  8.     font-family: Georgia, Arial, sans-serif;
  9.     font-size: 14px;
  10. }
  11. .nav-items {
  12.     padding: 0;
  13.     list-style: none;
  14. }
  15. .nav-item {
  16.     display: inline-block;
  17.     margin-right: 25px;
  18. }
  19. .nav-item:last-child {
  20.     margin-right: 0;
  21. }
  22. .nav-link,
  23. .nav-link:link,
  24. .nav-link:visited,
  25. .nav-link:active,
  26. .submenu-link,
  27. .submenu-link:link,
  28. .submenu-link:visited,
  29. .submenu-link:active {
  30.     display: block;
  31.     position: relative;
  32.     font-size: 14px;
  33.     letter-spacing: 1px;
  34.     cursor: pointer;
  35.     text-decoration: none;
  36.     outline: none;
  37. }
  38. .nav-link,
  39. .nav-link:link,
  40. .nav-link:visited,
  41. .nav-link:active {
  42.     color: #fff;
  43.     font-weight: bold;
  44. }
  45. .nav-link::before {
  46.     content: "";
  47.     position: absolute;
  48.     top: 100%;
  49.     left: 0;
  50.     width: 100%;
  51.     height: 3px;
  52.     background: rgba(0,0,0,0.2);
  53.     opacity: 0;
  54.     -webkit-transform: translate(0, 10px);
  55.     transform: translate(0, 10px);
  56.     transition: opacity 0.3s ease, transform 0.3s ease;
  57. }
  58. .nav-link:hover::before,
  59. .nav-link:hover::before {
  60.     opacity: 1;
  61.     -webkit-transform: translate(0, 5px);
  62.     transform: translate(0, 5px);
  63. }
  64. .dropdown {
  65.     position: relative;
  66. }
  67. .dropdown .nav-link {
  68.     padding-right: 15px;
  69.     height: 17px;
  70.     line-height: 17px;
  71. }
  72. .dropdown .nav-link::after {
  73.     content: "";
  74.     position:absolute;
  75.     top: 6px;
  76.     right: 0;
  77.     border: 5px solid transparent;
  78.     border-top-color: #fff;
  79. }
  80. .submenu {
  81.     position: absolute;
  82.     top: 100%;
  83.     left: 50%;
  84.     z-index: 100;
  85.     width: 270px;
  86.     margin-left: -140px;
  87.     background: #fff;
  88.     border-radius: 3px;
  89.     line-height: 1.46667;
  90.     margin-top: -5px;
  91.     box-shadow: 0 0 8px rgba(0,0,0,.3);
  92.     opacity:0;
  93.     -webkit-transform: translate(0, 0) scale(.85);
  94.     transform: translate(0, 0)scale(.85);
  95.     transition: transform 0.1s ease-out, opacity 0.1s ease-out;
  96.     pointer-events: none;
  97. }
  98. .submenu::after,
  99. .submenu::before {
  100.     content: "";
  101.     position: absolute;
  102.     bottom: 100%;
  103.     left: 50%;
  104.     margin-left: -10px;
  105.     border: 10px solid transparent;
  106.     height: 0;
  107. }
  108. .submenu::after {
  109.     border-bottom-color: #fff;
  110. }
  111. .submenu::before {
  112.     margin-left: -13px;
  113.     border: 13px solid transparent;
  114.     border-bottom-color: rgba(0,0,0,.1);
  115.     -webkit-filter:blur(1px);
  116.     filter:blur(1px);
  117. }
  118. .submenu-items {
  119.     list-style: none;
  120.     padding: 10px 0;
  121. }
  122. .submenu-item {
  123.     display: block;
  124.     text-align: left;
  125. }
  126. .submenu-link,
  127. .submenu-link:link,
  128. .submenu-link:visited,
  129. .submenu-link:active {
  130.     color: #3498db;
  131.     padding: 10px 20px;
  132. }
  133. .submenu-link:hover {
  134.     text-decoration: underline;
  135. }
  136. .submenu-seperator {
  137.     height: 0;
  138.     margin: 12px 10px;
  139.     border-top: 1px solid #eee;
  140. }
  141. .show-submenu .submenu {
  142.     opacity: 1;
  143.     -webkit-transform: translate(0, 25px) scale(1);
  144.     transform: translate(0, 25px) scale(1);
  145.     pointer-events: auto;
  146. }


 
Cript JS :
 

Code :
  1. [].slice.call(document.querySelectorAll('.dropdown .nav-link')).forEach(function(el){
  2.     el.addEventListener('click', onClick, false);
  3. });
  4. function onClick(e){
  5.     e.preventDefault();
  6.     var el = this.parentNode;
  7.     el.classList.contains('show-submenu') ? hideSubMenu(el) : showSubMenu(el);
  8. }
  9. function showSubMenu(el){
  10.     el.classList.add('show-submenu');
  11.     document.addEventListener('click', function onDocClick(e){
  12.         e.preventDefault();
  13.         if(el.contains(e.target)){
  14.             return;
  15.         }
  16.         document.removeEventListener('click', onDocClick);
  17.         hideSubMenu(el);
  18.     });
  19. }
  20. function hideSubMenu(el){
  21.     el.classList.remove('show-submenu');
  22. }


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. »
mood
Publicité
Posté le 30-01-2019 à 11:41:35  profilanswer
 

n°2328375
snowden
Posté le 30-01-2019 à 12:00:43  profilanswer
 

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. »
n°2328379
MaybeEijOr​Not
but someone at least
Posté le 30-01-2019 à 13:35:07  profilanswer
 

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.
n°2328385
snowden
Posté le 30-01-2019 à 14:00:38  profilanswer
 

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. »
n°2328388
MaybeEijOr​Not
but someone at least
Posté le 30-01-2019 à 14:20:23  profilanswer
 

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.
n°2328391
snowden
Posté le 30-01-2019 à 14:46:57  profilanswer
 

Ç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. »
n°2328392
MaybeEijOr​Not
but someone at least
Posté le 30-01-2019 à 15:00:21  profilanswer
 

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.
n°2328409
snowden
Posté le 30-01-2019 à 17:40:07  profilanswer
 

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. »
n°2328416
rufo
Pas me confondre avec Lycos!
Posté le 30-01-2019 à 18:40:38  profilanswer
 

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 Cantine Calandreta : http://sourceforge.net/projects/canteen-calandreta
n°2328417
snowden
Posté le 30-01-2019 à 19:18:04  profilanswer
 

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. »
mood
Publicité
Posté le 30-01-2019 à 19:18:04  profilanswer
 

n°2328822
mathieuu
Posté le 06-02-2019 à 14:17:22  profilanswer
 

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

n°2328823
rufo
Pas me confondre avec Lycos!
Posté le 06-02-2019 à 14:18:31  profilanswer
 

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


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Cantine Calandreta : http://sourceforge.net/projects/canteen-calandreta
n°2328831
snowden
Posté le 06-02-2019 à 15:50:46  profilanswer
 

Je vais y réfléchir :)


---------------
« 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. »
n°2328836
mathieuu
Posté le 06-02-2019 à 17:12:34  profilanswer
 

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 :p )

n°2328849
snowden
Posté le 06-02-2019 à 18:27:54  profilanswer
 

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. »
n°2328916
R-a-p-h2
Posté le 08-02-2019 à 13:17:21  profilanswer
 

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.

n°2328918
snowden
Posté le 08-02-2019 à 13:53:09  profilanswer
 

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

Aller à :
Ajouter une réponse
  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 definedcopier coller plusieurs feuilles dans une feuille
code HTML d'un bouton bas / haut de page dans Google siteCalcul points de plusieurs events et membres
Plus de sujets relatifs à : Plusieurs pages html appellent le même menu. Possible svp ?


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR