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/18 04:55] – Ajout de capture d'écrans pour comparaison avant/après 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: | ||
| - | ====== Menu ====== | ||
| - | <WRAP left round info 80%> | ||
| - | L' | ||
| - | Il faut que l' | ||
| - | 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' | ||
| - | |||
| - | **[[http:// | ||
| - | </ | ||
| - | |||
| - | ---- | ||
| - | ===== Aperçu en images ===== | ||
| - | Comparatif visuel avant (menu actuel) et après (menu prototype proposé).\\ | ||
| - | Il suffit de cliquer sur les images pour les afficher en pleine grandeur et faire une rapide comparaison avant/ | ||
| - | |||
| - | ^ Pages | ||
| - | |\\ \\ \\ \\ **<color darkred> | ||
| - | ^ ^ ^ ^ | ||
| - | |\\ \\ \\ \\ **<color darkred> | ||
| - | ^ ^ ^ ^ | ||
| - | |\\ \\ \\ \\ **<color darkred> | ||
| - | ^ ^ ^ ^ | ||
| - | |\\ \\ \\ \\ **<color darkred> | ||
| - | ^ ^ ^ ^ | ||
| - | |||
| - | ---- | ||
| - | ===== 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; /* Set the font size for menu links */ | ||
| - | color: darkred; /* Set the color for menu links */ | ||
| - | background-color: | ||
| - | } | ||
| - | |||
| - | /* Adjusting the position of the menu frame */ | ||
| - | # | ||
| - | margin-left: | ||
| - | } | ||
| - | |||
| - | /* Cursor style for toggle button */ | ||
| - | .toggle-btn { | ||
| - | cursor: pointer; | ||
| - | } | ||
| - | |||
| - | /* Bold styling for section text */ | ||
| - | .section-text { | ||
| - | font-weight: | ||
| - | color: black; /* Set the color for section text */ | ||
| - | } | ||
| - | |||
| - | /* Styling for the menu text */ | ||
| - | #menu-text { | ||
| - | font-size: 1.5em; | ||
| - | font-weight: | ||
| - | margin-bottom: | ||
| - | color: black; /* Set the color for menu text */ | ||
| - | } | ||
| - | |||
| - | /* Hover effect for section links */ | ||
| - | tree-menu li span.section-text: | ||
| - | color: rgb(200, 1, 1); /* Set the color for mouse-over effect (section link) */ | ||
| - | } | ||
| - | |||
| - | /* Hover effect for menu links */ | ||
| - | .tree-menu a:hover, .section-text: | ||
| - | color: rgb(200, 1, 1); /* Set the color for mouse-over effect (menu link) */ | ||
| - | } | ||
| - | |||
| - | /* Styling for closed markers */ | ||
| - | .tree-menu > li::marker { | ||
| - | content: " | ||
| - | font-size: 10px; /* Set the font size for closed 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 */ | ||
| - | } | ||
| - | |||
| - | /* Styling for nested lists */ | ||
| - | .tree-menu ul { | ||
| - | list-style: square; /* Set the list style for nested lists */ | ||
| - | padding-left: | ||
| - | margin: 0; | ||
| - | color: grey; /* Set the color for link markers */ | ||
| - | } | ||
| - | |||
| - | /* 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 each menu item */ | ||
| - | .tree-menu > li { | ||
| - | margin-bottom: | ||
| - | } | ||
| - | |||
| - | /* Margin adjustment for nested lists */ | ||
| - | .tree-menu > li > ul, .tree-menu > li: | ||
| - | margin: 10px 0; | ||
| - | } | ||
| - | |||
| - | /* 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.1705550143.txt.gz · Dernière modification : 2024/01/18 04:55 de Oberon
Outils de la page
