Différences

Ci-dessous, les différences entre deux révisions de la page.

--- menu_prototype [2024/01/06 10:11]
Oberon créée "Menu (prototype en HTML, CSS et JavaScript)"
+++ menu_prototype [2024/02/14 01:00] (Version actuelle)
Oberon Ajustement des catégories du menu
@@ Ligne 1: / Ligne 1: @@
-~~NOTOC~~
-~~NOCACHE~~
 ====== Menu ======
+<WRAP left round info 80%>
+L'inclusion de code HTML et PHP est désactivée dans la configuration par défaut de DokuWiki. Dans ce cas, le code est affiché au lieu d'être exécuté.\\
+Il faut que l'équipe de développement de Neerya qui a accès aux options de configuration du DokuWiki active le code HTML et PHP pour rendre possible l'intégration de ce nouveau menu.\\
-<HTML>
+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'accéder plus facilement à l'intégralité des infos disponibles sur le Wiki.\\
-IMPORTANT : L'inclusion de code HTML et PHP est désactivée dans la configuration par défaut de DokuWiki. Dans ce cas, le code est affiché au lieu d'être exécuté.
-Il faut que l'équipe de développement de Neerya qui a accès aux options de configuration du DokuWiki active le code HTML et PHP pour rendre possible l'intégration de ce nouveau menu.
-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.
+**[[https://black-emlynne-85.tiiny.site/|Cliquez sur ce lien pour voir le menu et le résultat du code]]**
-Permets d'accéder plus facilement à l'intégralité des infos disponibles sur le Wiki.
+</WRAP>
--->
-</HTML>
-**Affiché le menu :**\\
+----
-**[[https://black-emlynne-85.tiiny.site/|Lien d'hébergement temporaire pour voir le résultat du code]]**
+===== 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 d'onglet sur votre navigateur.
-----
+^  Pages   ^  Avant  ^  Après  ^
+|\\ \\ \\ \\ **<color darkred>Toutes les quêtes</color>**|[[https://www.t4c-neerya.com/wiki/_media/wiki/menu_prototype/01a_toutes_les_quetes.png|{{  :wiki:menu_prototype:01a_toutes_les_quetes.png?320  |  Toutes les quêtes (Ancien menu)  }}]]|[[https://www.t4c-neerya.com/wiki/_media/wiki/menu_prototype/01b_toutes_les_quetes.png|{{  :wiki:menu_prototype:01b_toutes_les_quetes.png?320  |  Toutes les quêtes (Menu prototype)  }}]]|
+^  ^  ^  ^
+|\\ \\ \\ \\ **<color darkred>Raccourcis et commandes</color>**|[[https://www.t4c-neerya.com/wiki/_media/wiki/menu_prototype/02a_raccourcis_et_commandes.png|{{  :wiki:menu_prototype:02a_raccourcis_et_commandes.png?320  |  Raccourcis et commandes (Ancien menu)  }}]]|[[https://www.t4c-neerya.com/wiki/_media/wiki/menu_prototype/02b_raccourcis_et_commandes.png|{{  :wiki:menu_prototype:02b_raccourcis_et_commandes.png?320  |  Raccourcis et commandes (Menu prototype)  }}]]|
+^  ^  ^  ^
+|\\ \\ \\ \\ **<color darkred>Compétences</color>**|[[https://www.t4c-neerya.com/wiki/_media/wiki/menu_prototype/03a_competences.png|{{  :wiki:menu_prototype:03a_competences.png?320  |  Compétences (Ancien menu)  }}]]|[[https://www.t4c-neerya.com/wiki/_media/wiki/menu_prototype/03b_competences.png|{{  :wiki:menu_prototype:03b_competences.png?320  |  Compétences (Menu prototype)  }}]]|
+^  ^  ^  ^
+|\\ \\ \\ \\ **<color darkred>PNJs Draconis Sanctum</color>**|[[https://www.t4c-neerya.com/wiki/_media/wiki/menu_prototype/04a_pnjs_draconis_sanctum.png|{{  :wiki:menu_prototype:04a_pnjs_draconis_sanctum.png?320  |  PNJs Draconis Sanctum (Ancien menu)  }}]]|[[https://www.t4c-neerya.com/wiki/_media/wiki/menu_prototype/04b_pnjs_draconis_sanctum.png|{{  :wiki:menu_prototype:04b_pnjs_draconis_sanctum.png?320  |  PNJs Draconis Sanctum (Menu prototype)  }}]]|
+^  ^  ^  ^
+----
 ===== Code (HTML, CSS, JavaScript) =====
 <HTML>
 <head>
@@ Ligne 29: / Ligne 35: @@
     /* General styling for body and menu elements */
     body, .tree-menu, .tree-menu a {
-      font-family: Arial, sans-serif;
+      font-family: Arial, sans-serif; /* Set your desired font family */
-      font-size: 14px;
+      font-size: 14px; /* Set the font size for menu links */
-      color: darkred;
+      color: darkred; /* Set the color for menu links */
+      background-color: rgb(210, 203, 179); /* Set your desired RGB background color */
     }
@@ Ligne 39: / Ligne 46: @@
     }
-    /* Styling for the menu */
+    /* Cursor style for toggle button */
-    .tree-menu {
+    .toggle-btn {
-      list-style: none;
+      cursor: pointer;
-      padding: 0;
-      margin: 20px 0 0;
-    }
-    /* Styling for menu links */
-    .tree-menu a {
-      text-decoration: none;
-      display: block;
-      margin-bottom: 5px;
-    }
-    /* Styling for nested lists */
-    .tree-menu ul {
-      list-style: square;
-      padding-left: 15px;
-      margin: 0;
-      color: grey; /* Set the color for link markers */
-    }
-    /* Hover effect for menu links and section text */
-      .tree-menu a:hover, .section-text:hover {
-      color: rgb(200, 1, 1); /* Set the color for mouse-over effect */
-    }
-    /* Styling for each menu item */
-    .tree-menu > li {
-      margin-bottom: 10px;
-    }
-    /* Margin adjustment for nested lists */
-    .tree-menu > li > ul, .tree-menu > li:last-child > ul {
-      margin: 10px 0;
     }
@@ Ligne 80: / Ligne 55: @@
       font-weight: bold;
       color: black; /* Set the color for section text */
-    }
-    /* Hover effect for section links */
-      tree-menu li span.section-text:hover {
-      color: rgb(200, 1, 1); /* Set the color for mouse-over effect */
-    }
-    /* Cursor style for toggle button */
-    .toggle-btn {
-      cursor: pointer;
     }
@@ Ligne 97: / Ligne 62: @@
       font-weight: bold;
       margin-bottom: 10px;
-      color: black;
+      color: black; /* Set the color for menu text */
+    }
+    /* Hover effect for section links */
+    tree-menu li span.section-text:hover {
+      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:hover {
+      color: rgb(200, 1, 1); /* Set the color for mouse-over effect (menu link) */
     }
     /* Styling for closed markers */
     .tree-menu > li::marker {
-      content: "\25BA";
+      content: "\25BA  "; /* Set the marker content for closed markers */
+      font-size: 10px; /* Set the font size for closed markers */
       color: grey; /* Set the color for closed markers */
     }
@@ Ligne 108: / Ligne 84: @@
     /* Styling for open markers */
     .tree-menu > li.open::marker {
-      content: "\25BC";
+      content: "\25BC  "; /* Set the marker content for open markers */
+      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: 15px;
+      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: none;
+      display: block;
+      margin-bottom: 5px;
+    }
+    /* Styling for each menu item */
+    .tree-menu > li {
+      margin-bottom: 10px;
+    }
+    /* Margin adjustment for nested lists */
+    .tree-menu > li > ul, .tree-menu > li:last-child > ul {
+      margin: 10px 0;
     }
@@ Ligne 135: / Ligne 144: @@
         <ul>
           <li><a href="https://www.t4c-neerya.com/wiki/accueil">Accueil</a></li>
-          <li><a href="https://www.t4c-neerya.com/wiki/guides/presentation">Présentation</a></li>
+          <li><a href="https://www.t4c-neerya.com/wiki/main/presentation">Présentation</a></li>
           <li><a href="https://www.t4c-neerya.com/wiki/guides/faq">Foire aux questions</a></li>
-          <li><a href="https://www.t4c-neerya.com/wiki/informations_generales/support_et_contact">Support & Contact</a></li>
+          <li><a href="https://www.t4c-neerya.com/wiki/main/support_et_contact">Support & Contact</a></li>
           <li><a href="https://www.t4c-neerya.com/conditions-utilisation/">Charte d'utilisation</a></li>
         </ul>
@@ Ligne 148: / Ligne 157: @@
         <ul>
           <li><a href="https://www.t4c-neerya.com/wiki/informations_generales/screenshots">Captures d'écran</a></li>
-          <li><a href="https://www.youtube.com/channel/UC1TyGQtvOq2oKUM8ifeCBig/videos" target="_blank">Vidéos</a></li>
+          <li><a href="https://www.youtube.com/channel/UC1TyGQtvOq2oKUM8ifeCBig/videos">Vidéos</a></li>
         </ul>
       </li>
@@ Ligne 158: / Ligne 167: @@
         <ul>
           <li><a href="https://www.t4c-neerya.com/wiki/boutique/accueil">Boutique de Neerya</a></li>
-          <li><a href="https://www.t4c-neerya.com/wiki/boutique/achat_theos_d_or">Achat de théos d'or</a></li>
+          <li><a href="https://www.t4c-neerya.com/wiki/boutique/guide_achats_t4c">Guide d'achats sur T4C.com</a></li>
         </ul>
       </li>
@@ Ligne 226: / Ligne 235: @@
         </span>
         <ul>
-          <li><a href="https://www.t4c-neerya.com/wiki/sorts_et_competences/accueil">Tous les sorts</a></li>
+          <li><a href="https://www.t4c-neerya.com/wiki/sorts_et_competences/accueil_sorts">Tous les sorts</a></li>
           <li><a href="https://www.t4c-neerya.com/wiki/sorts_et_competences/air">Sorts d'air</a></li>
           <li><a href="https://www.t4c-neerya.com/wiki/sorts_et_competences/eau">Sorts d'eau</a></li>
@@ Ligne 263: / Ligne 272: @@
         </span>
         <ul>
-          <li><a href="https://www.t4c-neerya.com/wiki/guides/arcanisation">Arcanisation</a></li>
+          <li><a href="https://www.t4c-neerya.com/wiki/guides/arcanisation">Guide de l'Arcanisation</a></li>
-          <li><a href="https://www.t4c-neerya.com/wiki/guides/arcanisation_prix">Prix de l'Arcanisation</a></li>
+          <li><a href="https://www.t4c-neerya.com/wiki/arcanisation/prix">Prix de l'Arcanisation</a></li>
         </ul>
       <!-- Instances -->
@@ Ligne 305: / Ligne 314: @@
         </span>
         <ul>
-          <li><a href="https://www.t4c-neerya.com/wiki/bestiaire/anwynn">Monstres Anwynn</a></li>
           <li><a href="https://www.t4c-neerya.com/wiki/bestiaire/arakas">Monstres Arakas</a></li>
           <li><a href="https://www.t4c-neerya.com/wiki/bestiaire/ravens_dust">Monstres Raven's Dust</a></li>
@@ Ligne 319: / Ligne 327: @@
         </span>
         <ul>
-          <li><a href="https://www.t4c-neerya.com/wiki/pnj/anwynn">PNJs Anwynn</a></li>
           <li><a href="https://www.t4c-neerya.com/wiki/pnj/arakas">PNJs Arakas</a></li>
           <li><a href="https://www.t4c-neerya.com/wiki/pnj/ravens_dust">PNJs Raven's Dust</a></li>
@@ Ligne 356: / Ligne 363: @@
         </span>
         <ul>
-          <li><a href="https://www.t4c-neerya.com/" target="_blank">Site web</a></li>
+          <li><a href="https://www.t4c-neerya.com/">Site web</a></li>
-          <li><a href="https://www.t4c-neerya.com/forums/index.php" target="_blank">Forum</a></li>
+          <li><a href="https://www.t4c-neerya.com/forums/index.php">Forum</a></li>
-          <li><a href="https://discord.gg/MZYyYxd" target="_blank">Discord</a></li>
+          <li><a href="https://discord.gg/MZYyYxd">Discord</a></li>
-          <li><a href="https://www.youtube.com/channel/UC1TyGQtvOq2oKUM8ifeCBig/videos" target="_blank">YouTube</a></li>
+          <li><a href="https://www.youtube.com/channel/UC1TyGQtvOq2oKUM8ifeCBig/videos">YouTube</a></li>
-          <li><a href="https://www.facebook.com/t4c.neerya/" target="_blank">Facebook</a></li>
+          <li><a href="https://www.facebook.com/t4c.neerya/">Facebook</a></li>
-          <li><a href="https://www.t4c.com/" target="_blank">Portail Dialsoft</a></li>
+          <li><a href="https://www.t4c.com/">Portail Dialsoft</a></li>
-        </ul>
+          <li><a href="https://next.t4c.com/">T4C Next Chapter</a></li>
-      </li>
-      <!-- Développement -->
-      <li class="closed" id="developpement">
-        <span class="toggle-btn" onclick="toggleSection('developpement')">
-          <span class="section-text">Développement</span>
-        </span>
-        <ul>
-          <li><a href="http://next.t4c.com/">T4C Next Chapter</a></li>
-          <li><a href="https://www.t4c-neerya.com/wiki/t4c_next_chapter/projet">Projet</a></li>
-          <li><a href="https://www.t4c-neerya.com/wiki/t4c_next_chapter/changelog">Changelog</a></li>
         </ul>
       </li>
@@ Ligne 385: / Ligne 382: @@
       </li>
       <!-- Autres -->
-      <li class="closed" id="autres">
+      <li class="closed" id="contribuer_au_wiki">
-        <span class="toggle-btn" onclick="toggleSection('autres')">
+        <span class="toggle-btn" onclick="toggleSection('contribuer_au_wiki')">
-          <span class="section-text">Autres</span>
+          <span class="section-text">Contribuer au Wiki</span>
         </span>
         <ul>
           <li><a href="https://www.t4c-neerya.com/wiki/playground/playground">Bac à sable</a></li>
-          <li><a href="https://www.t4c-neerya.com/wiki/wiki/syntax">Contribuer au wiki</a></li>
+          <li><a href="https://www.t4c-neerya.com/wiki/wiki/syntax">Guide de mise en page</a></li>
         </ul>
       </li>

T4C Neerya

Outils pour utilisateurs

Outils du site

Différences

Outils de la page