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

Plusieurs pages html appellent le même menu. Possible svp ? - HTML/CSS - Programmation

Marsh Posté le 30-01-2019 à 11:41:35    

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


 
CSS :
 

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


 
Cript JS :
 

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


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

Marsh Posté le 30-01-2019 à 11:41:35   

Reply

Marsh Posté le 30-01-2019 à 12:00:43    

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

Marsh Posté le 30-01-2019 à 13:35:07    

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

Marsh Posté le 30-01-2019 à 14:00:38    

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

Marsh Posté le 30-01-2019 à 14:20:23    

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

Marsh Posté le 30-01-2019 à 14:46:57    

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

Marsh Posté le 30-01-2019 à 15:00:21    

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

Marsh Posté le 30-01-2019 à 17:40:07    

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

Marsh Posté le 30-01-2019 à 18:40:38    

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
Reply

Marsh Posté le 30-01-2019 à 19:18:04    

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

Marsh Posté le 30-01-2019 à 19:18:04   

Reply

Marsh Posté le 06-02-2019 à 14:17:22    

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

Reply

Marsh Posté le 06-02-2019 à 14:18:31    

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 Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 06-02-2019 à 15:50:46    

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

Marsh Posté le 06-02-2019 à 17:12:34    

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 )

Reply

Marsh Posté le 06-02-2019 à 18:27:54    

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

Marsh Posté le 08-02-2019 à 13:17:21    

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.

Reply

Marsh Posté le 08-02-2019 à 13:53:09    

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

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed