Outils pour utilisateurs
menu_prototype
Différences
Ci-dessous, les différences entre deux révisions de la page.
| Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédente | ||
| menu_prototype [2024/01/06 10:18] – créée "Menu (prototype en HTML, CSS et JavaScript)" Oberon | menu_prototype [2026/10/04 15:59] (Version actuelle) – Suppression du prototype de menu : il nécessitait d'activer l'interprétation du HTML/JS brut, déconseillé pour des raisons de sécurité. Anrow | ||
|---|---|---|---|
| Ligne 1: | Ligne 1: | ||
| - | ~~NOTOC~~ | ||
| - | ~~NOCACHE~~ | ||
| - | ====== Menu ====== | ||
| - | |||
| - | < | ||
| - | < | ||
| - | IMPORTANT : L' | ||
| - | Il faut que l' | ||
| - | |||
| - | DESCRIPTION : Menu plus robuste et complet, avec un arbre de navigation dynamique, qui garde les sections ouvertes en mémoire même lors de la fermeture du navigateur ou d'un refresh de la page. | ||
| - | Permets d' | ||
| - | --> | ||
| - | </ | ||
| - | |||
| - | **Affiché le menu :**\\ | ||
| - | **[[https:// | ||
| - | |||
| - | ---- | ||
| - | |||
| - | ===== Code (HTML, CSS, JavaScript) ===== | ||
| - | |||
| - | < | ||
| - | < | ||
| - | <meta charset=" | ||
| - | <meta name=" | ||
| - | < | ||
| - | < | ||
| - | /* General styling for body and menu elements */ | ||
| - | body, .tree-menu, .tree-menu a { | ||
| - | font-family: | ||
| - | font-size: 14px; | ||
| - | color: darkred; | ||
| - | background-color: | ||
| - | } | ||
| - | |||
| - | /* Adjusting the position of the menu frame */ | ||
| - | # | ||
| - | margin-left: | ||
| - | } | ||
| - | |||
| - | /* Styling for the menu */ | ||
| - | .tree-menu { | ||
| - | list-style: none; | ||
| - | padding: 0; | ||
| - | margin: 20px 0 0; | ||
| - | } | ||
| - | |||
| - | /* Styling for menu links */ | ||
| - | .tree-menu a { | ||
| - | text-decoration: | ||
| - | display: block; | ||
| - | margin-bottom: | ||
| - | } | ||
| - | |||
| - | /* Styling for nested lists */ | ||
| - | .tree-menu ul { | ||
| - | list-style: square; | ||
| - | padding-left: | ||
| - | margin: 0; | ||
| - | color: grey; /* Set the color for link markers */ | ||
| - | } | ||
| - | |||
| - | /* Hover effect for menu links and section text */ | ||
| - | .tree-menu a:hover, .section-text: | ||
| - | color: rgb(200, 1, 1); /* Set the color for mouse-over effect */ | ||
| - | } | ||
| - | |||
| - | /* Styling for each menu item */ | ||
| - | .tree-menu > li { | ||
| - | margin-bottom: | ||
| - | } | ||
| - | |||
| - | /* Margin adjustment for nested lists */ | ||
| - | .tree-menu > li > ul, .tree-menu > li: | ||
| - | margin: 10px 0; | ||
| - | } | ||
| - | |||
| - | /* Bold styling for section text */ | ||
| - | .section-text { | ||
| - | font-weight: | ||
| - | color: black; /* Set the color for section text */ | ||
| - | } | ||
| - | |||
| - | /* Hover effect for section links */ | ||
| - | tree-menu li span.section-text: | ||
| - | color: rgb(200, 1, 1); /* Set the color for mouse-over effect */ | ||
| - | } | ||
| - | |||
| - | /* Cursor style for toggle button */ | ||
| - | .toggle-btn { | ||
| - | cursor: pointer; | ||
| - | } | ||
| - | |||
| - | /* Styling for the menu text */ | ||
| - | #menu-text { | ||
| - | font-size: 1.5em; | ||
| - | font-weight: | ||
| - | margin-bottom: | ||
| - | color: black; | ||
| - | } | ||
| - | |||
| - | /* Styling for closed markers */ | ||
| - | .tree-menu > li::marker { | ||
| - | content: " | ||
| - | font-size: 10px; /* Set the font size for open markers */ | ||
| - | color: grey; /* Set the color for closed markers */ | ||
| - | } | ||
| - | |||
| - | /* Styling for open markers */ | ||
| - | .tree-menu > li.open:: | ||
| - | content: " | ||
| - | font-size: 10px; /* Set the font size for open markers */ | ||
| - | color: grey; /* Set the color for open markers */ | ||
| - | } | ||
| - | |||
| - | /* Hide nested lists by default */ | ||
| - | .tree-menu > li > ul { | ||
| - | display: none; | ||
| - | } | ||
| - | |||
| - | /* Display nested lists when the parent is open */ | ||
| - | .tree-menu > li.open > ul { | ||
| - | display: block; | ||
| - | } | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | < | ||
| - | <div id=" | ||
| - | <div id=" | ||
| - | <ul class=" | ||
| - | <!-- Main --> | ||
| - | <li class=" | ||
| - | <span class=" | ||
| - | <span class=" | ||
| - | </ | ||
| - | <ul> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </ul> | ||
| - | </li> | ||
| - | <!-- Médias --> | ||
| - | <li class=" | ||
| - | <span class=" | ||
| - | <span class=" | ||
| - | </ | ||
| - | <ul> | ||
| - | < | ||
| - | < | ||
| - | </ul> | ||
| - | </li> | ||
| - | <!-- Boutique --> | ||
| - | <li class=" | ||
| - | <span class=" | ||
| - | <span class=" | ||
| - | </ | ||
| - | <ul> | ||
| - | < | ||
| - | < | ||
| - | </ul> | ||
| - | </li> | ||
| - | <!-- Vitrine des reskins --> | ||
| - | <li class=" | ||
| - | <span class=" | ||
| - | <span class=" | ||
| - | </ | ||
| - | <ul> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </ul> | ||
| - | </li> | ||
| - | <!-- Guides --> | ||
| - | <li class=" | ||
| - | <span class=" | ||
| - | <span class=" | ||
| - | </ | ||
| - | <ul> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </ul> | ||
| - | </li> | ||
| - | <!-- Classes de personnages --> | ||
| - | <li class=" | ||
| - | <span class=" | ||
| - | <span class=" | ||
| - | </ | ||
| - | <ul> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </ul> | ||
| - | </li> | ||
| - | <!-- Quêtes --> | ||
| - | <li class=" | ||
| - | <span class=" | ||
| - | <span class=" | ||
| - | </ | ||
| - | <ul> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </ul> | ||
| - | <!-- Sorts et compétences --> | ||
| - | <li class=" | ||
| - | <span class=" | ||
| - | <span class=" | ||
| - | </ | ||
| - | <ul> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </ul> | ||
| - | <!-- Objets --> | ||
| - | <li class=" | ||
| - | <span class=" | ||
| - | <span class=" | ||
| - | </ | ||
| - | <ul> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </ul> | ||
| - | <!-- Arcanisation --> | ||
| - | <li class=" | ||
| - | <span class=" | ||
| - | <span class=" | ||
| - | </ | ||
| - | <ul> | ||
| - | < | ||
| - | < | ||
| - | </ul> | ||
| - | <!-- Instances --> | ||
| - | <li class=" | ||
| - | <span class=" | ||
| - | <span class=" | ||
| - | </ | ||
| - | <ul> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </ul> | ||
| - | <!-- Boss --> | ||
| - | <li class=" | ||
| - | <span class=" | ||
| - | <span class=" | ||
| - | </ | ||
| - | <ul> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </ul> | ||
| - | <!-- Prisonnier du temps --> | ||
| - | <li class=" | ||
| - | <span class=" | ||
| - | <span class=" | ||
| - | </ | ||
| - | <ul> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </ul> | ||
| - | <!-- Bestiaire --> | ||
| - | <li class=" | ||
| - | <span class=" | ||
| - | <span class=" | ||
| - | </ | ||
| - | <ul> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </ul> | ||
| - | <!-- PNJs --> | ||
| - | <li class=" | ||
| - | <span class=" | ||
| - | <span class=" | ||
| - | </ | ||
| - | <ul> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </ul> | ||
| - | <!-- Cartographie --> | ||
| - | <li class=" | ||
| - | <span class=" | ||
| - | <span class=" | ||
| - | </ | ||
| - | <ul> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </ul> | ||
| - | <!-- Histoire --> | ||
| - | <li class=" | ||
| - | <span class=" | ||
| - | <span class=" | ||
| - | </ | ||
| - | <ul> | ||
| - | < | ||
| - | < | ||
| - | </ul> | ||
| - | <!-- Liens --> | ||
| - | <li class=" | ||
| - | <span class=" | ||
| - | <span class=" | ||
| - | </ | ||
| - | <ul> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </ul> | ||
| - | </li> | ||
| - | <!-- Développement --> | ||
| - | <li class=" | ||
| - | <span class=" | ||
| - | <span class=" | ||
| - | </ | ||
| - | <ul> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </ul> | ||
| - | </li> | ||
| - | <!-- Anciens joueurs ? --> | ||
| - | <li class=" | ||
| - | <span class=" | ||
| - | <span class=" | ||
| - | </ | ||
| - | <ul> | ||
| - | < | ||
| - | </ul> | ||
| - | </li> | ||
| - | <!-- Autres --> | ||
| - | <li class=" | ||
| - | <span class=" | ||
| - | <span class=" | ||
| - | </ | ||
| - | <ul> | ||
| - | < | ||
| - | < | ||
| - | </ul> | ||
| - | </li> | ||
| - | </ul> | ||
| - | </ | ||
| - | |||
| - | < | ||
| - | // Array to store open sections | ||
| - | var openSections = JSON.parse(localStorage.getItem(' | ||
| - | |||
| - | // Function to save open sections in local storage | ||
| - | function saveOpenSections() { | ||
| - | localStorage.setItem(' | ||
| - | } | ||
| - | |||
| - | // Function to toggle the open state of a section | ||
| - | function toggleSection(sectionId) { | ||
| - | var section = document.getElementById(sectionId); | ||
| - | |||
| - | if (openSections.includes(sectionId)) { | ||
| - | section.classList.remove(' | ||
| - | openSections = openSections.filter(id => id !== sectionId); | ||
| - | } else { | ||
| - | section.classList.add(' | ||
| - | openSections.push(sectionId); | ||
| - | } | ||
| - | |||
| - | saveOpenSections(); | ||
| - | } | ||
| - | |||
| - | // Restore open sections on page load | ||
| - | window.onload = function () { | ||
| - | openSections.forEach(function (sectionId) { | ||
| - | var section = document.getElementById(sectionId); | ||
| - | if (section) { | ||
| - | section.classList.add(' | ||
| - | } | ||
| - | }); | ||
| - | }; | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||
menu_prototype.1704532708.txt.gz · Dernière modification : 2024/01/06 10:18 de Oberon
Outils de la page
