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 [2024/02/14 01:00] (Version actuelle) – Ajustement des catégories du menu Oberon | ||
|---|---|---|---|
| Ligne 1: | Ligne 1: | ||
| - | ~~NOTOC~~ | ||
| - | ~~NOCACHE~~ | ||
| - | |||
| ====== Menu ====== | ====== Menu ====== | ||
| + | <WRAP left round info 80%> | ||
| + | L' | ||
| + | Il faut que l' | ||
| - | < | + | Menu plus robuste |
| - | <!-- | + | Permets d' |
| - | IMPORTANT : L' | + | |
| - | Il faut que l'équipe de développement de Neerya qui a accès aux options de configuration du DokuWiki active | + | |
| - | DESCRIPTION | + | **[[https:// |
| - | Permets d' | + | </WRAP> |
| - | --> | + | |
| - | </HTML> | + | |
| - | **Affiché le menu :**\\ | + | ---- |
| - | **[[https://black-emlynne-85.tiiny.site/ | + | ===== 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/après en basculant | ||
| - | ---- | + | ^ Pages |
| + | |\\ \\ \\ \\ **<color darkred> | ||
| + | ^ ^ ^ ^ | ||
| + | |\\ \\ \\ \\ **<color darkred> | ||
| + | ^ ^ ^ ^ | ||
| + | |\\ \\ \\ \\ **<color darkred> | ||
| + | ^ ^ ^ ^ | ||
| + | |\\ \\ \\ \\ **<color darkred> | ||
| + | ^ ^ ^ ^ | ||
| + | ---- | ||
| ===== Code (HTML, CSS, JavaScript) ===== | ===== Code (HTML, CSS, JavaScript) ===== | ||
| - | |||
| < | < | ||
| < | < | ||
| Ligne 29: | Ligne 35: | ||
| /* General styling for body and menu elements */ | /* General styling for body and menu elements */ | ||
| body, .tree-menu, .tree-menu a { | body, .tree-menu, .tree-menu a { | ||
| - | font-family: | + | font-family: |
| - | font-size: 14px; | + | font-size: 14px; /* Set the font size for menu links */ |
| - | color: darkred; | + | color: darkred; |
| background-color: | background-color: | ||
| } | } | ||
| Ligne 40: | Ligne 46: | ||
| } | } | ||
| - | /* Styling for the menu */ | + | /* Cursor |
| - | .tree-menu { | + | .toggle-btn { |
| - | list-style: none; | + | |
| - | padding: 0; | + | |
| - | margin: 20px 0 0; | + | |
| - | } | + | |
| - | + | ||
| - | /* Styling | + | |
| - | .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:last-child > ul { | + | |
| - | | + | |
| } | } | ||
| Ligne 81: | Ligne 55: | ||
| font-weight: | font-weight: | ||
| color: black; /* Set the color for section text */ | 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; | ||
| } | } | ||
| Ligne 98: | Ligne 62: | ||
| font-weight: | font-weight: | ||
| margin-bottom: | margin-bottom: | ||
| - | color: black; | + | color: black; |
| + | } | ||
| + | |||
| + | /* 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 */ | /* Styling for closed markers */ | ||
| .tree-menu > li::marker { | .tree-menu > li::marker { | ||
| - | content: " | + | content: " |
| - | font-size: 10px; /* Set the font size for open markers */ | + | font-size: 10px; /* Set the font size for closed |
| color: grey; /* Set the color for closed markers */ | color: grey; /* Set the color for closed markers */ | ||
| } | } | ||
| Ligne 110: | Ligne 84: | ||
| /* Styling for open markers */ | /* Styling for open markers */ | ||
| .tree-menu > li.open:: | .tree-menu > li.open:: | ||
| - | content: " | + | content: " |
| font-size: 10px; /* Set the font size for open markers */ | font-size: 10px; /* Set the font size for open markers */ | ||
| color: grey; /* Set the color 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; | ||
| } | } | ||
| Ligne 138: | Ligne 144: | ||
| <ul> | <ul> | ||
| < | < | ||
| - | < | + | < |
| < | < | ||
| - | < | + | < |
| < | < | ||
| </ul> | </ul> | ||
| Ligne 151: | Ligne 157: | ||
| <ul> | <ul> | ||
| < | < | ||
| - | < | + | < |
| </ul> | </ul> | ||
| </li> | </li> | ||
| Ligne 161: | Ligne 167: | ||
| <ul> | <ul> | ||
| < | < | ||
| - | < | + | < |
| </ul> | </ul> | ||
| </li> | </li> | ||
| Ligne 229: | Ligne 235: | ||
| </ | </ | ||
| <ul> | <ul> | ||
| - | < | + | < |
| < | < | ||
| < | < | ||
| Ligne 266: | Ligne 272: | ||
| </ | </ | ||
| <ul> | <ul> | ||
| - | < | + | < |
| - | < | + | < |
| </ul> | </ul> | ||
| <!-- Instances --> | <!-- Instances --> | ||
| Ligne 308: | Ligne 314: | ||
| </ | </ | ||
| <ul> | <ul> | ||
| - | < | ||
| < | < | ||
| < | < | ||
| Ligne 322: | Ligne 327: | ||
| </ | </ | ||
| <ul> | <ul> | ||
| - | < | ||
| < | < | ||
| < | < | ||
| Ligne 359: | Ligne 363: | ||
| </ | </ | ||
| <ul> | <ul> | ||
| - | < | + | < |
| - | < | + | < |
| - | < | + | < |
| - | < | + | < |
| - | < | + | < |
| - | < | + | < |
| - | </ | + | < |
| - | </ | + | |
| - | <!-- Développement --> | + | |
| - | <li class=" | + | |
| - | <span class=" | + | |
| - | <span class=" | + | |
| - | </ | + | |
| - | <ul> | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| </ul> | </ul> | ||
| </li> | </li> | ||
| Ligne 388: | Ligne 382: | ||
| </li> | </li> | ||
| <!-- Autres --> | <!-- Autres --> | ||
| - | <li class=" | + | <li class=" |
| - | <span class=" | + | <span class=" |
| - | <span class=" | + | <span class=" |
| </ | </ | ||
| <ul> | <ul> | ||
| < | < | ||
| - | < | + | < |
| </ul> | </ul> | ||
| </li> | </li> | ||
menu_prototype.1704532708.txt.gz · Dernière modification : 2024/01/06 10:18 de Oberon
Outils de la page
