T4C Neerya

Table des matières

Aperçu en images
Code (HTML, CSS, JavaScript)
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.
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.
Cliquez sur ce lien pour voir le menu et 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
Toutes les quêtes

Raccourcis et commandes

Compétences

PNJs Draconis Sanctum
Code (HTML, CSS, JavaScript)

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Menu</title>
  <style>
    /* General styling for body and menu elements */
    body, .tree-menu, .tree-menu a {
      font-family: Arial, sans-serif; /* Set your desired font family */
      font-size: 14px; /* Set the font size for menu links */
      color: darkred; /* Set the color for menu links */
      background-color: rgb(210, 203, 179); /* Set your desired RGB background color */
    }
 
    /* Adjusting the position of the menu frame */
    #invisible-frame {
      margin-left: 10px;
    }
 
    /* Cursor style for toggle button */
    .toggle-btn {
      cursor: pointer;
    }
 
    /* Bold styling for section text */
    .section-text {
      font-weight: bold;
      color: black; /* Set the color for section text */
    }
 
    /* Styling for the menu text */
    #menu-text {
      font-size: 1.5em;
      font-weight: bold;
      margin-bottom: 10px;
      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  "; /* 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 */
    }
 
    /* Styling for open markers */
    .tree-menu > li.open::marker {
      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;
    }
 
    /* 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;
    }
  </style>
</head>
 
<body>
  <div id="invisible-frame">
    <div id="menu-text">Menu</div>
    <ul class="tree-menu">
      <!-- Main -->
      <li class="closed" id="main">
        <span class="toggle-btn" onclick="toggleSection('main')">
          <span class="section-text">Main</span>
        </span>
        <ul>
          <li><a href="https://www.t4c-neerya.com/wiki/accueil">Accueil</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/main/support_et_contact">Support & Contact</a></li>
          <li><a href="https://www.t4c-neerya.com/conditions-utilisation/">Charte d'utilisation</a></li>
        </ul>
      </li>
      <!-- Médias -->
      <li class="closed" id="medias">
        <span class="toggle-btn" onclick="toggleSection('medias')">
          <span class="section-text">Médias</span>
        </span>
        <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">Vidéos</a></li>
        </ul>
      </li>
      <!-- Boutique -->
      <li class="closed" id="boutique">
        <span class="toggle-btn" onclick="toggleSection('boutique')">
          <span class="section-text">Boutique</span>
        </span>
        <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/guide_achats_t4c">Guide d'achats sur T4C.com</a></li>
        </ul>
      </li>
      <!-- Vitrine des reskins -->
      <li class="closed" id="vitrine_des_reskins">
        <span class="toggle-btn" onclick="toggleSection('vitrine_des_reskins')">
          <span class="section-text">Vitrine des reskins</span>
        </span>
        <ul>
          <li><a href="https://www.t4c-neerya.com/wiki/vitrine_des_reskins/guide_des_reskins">Guide des reskins</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/vitrine_des_reskins/dressing_des_faconniers">Dressing des façonniers</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/vitrine_des_reskins/etabli_des_forgerons">Établi des forgerons</a></li>
        </ul>
      </li>
      <!-- Guides -->
      <li class="closed" id="guides">
        <span class="toggle-btn" onclick="toggleSection('guides')">
          <span class="section-text">Guides</span>
        </span>
        <ul>
          <li><a href="https://www.t4c-neerya.com/wiki/guides/accueil">Guide du débutant</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/guides/interface">Interface</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/guides/raccourcis_et_commandes">Raccourcis et commandes</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/guides/hoteldesventes">Hôtel des ventes</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/guides/mannequins">Mannequins d'entraînement</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/guides/karma">Karma</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/guides/paliers">Paliers et niveaux</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/guides/statue_ephemere">Statue éphémère</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/guides/coffres">Coffres</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/guides/chasse_a_lor">Chasse à l'or</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/guides/optimisation_des_connaissances">Optimisation des connaissances</a></li>
        </ul>
      </li>
      <!-- Classes de personnages -->
      <li class="closed" id="classes_de_personnages">
        <span class="toggle-btn" onclick="toggleSection('classes_de_personnages')">
          <span class="section-text">Classes de personnages</span>
        </span>
        <ul>
          <li><a href="https://www.t4c-neerya.com/wiki/guides/classes_de_personnages">Toutes les classes</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/classes_de_personnages/archer_conventionnel">Archer</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/classes_de_personnages/archer_mage">Archer-Mage / Archer-Prêtre</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/classes_de_personnages/mage">Mage</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/classes_de_personnages/pretre">Prêtre</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/classes_de_personnages/guerrier">Guerrier</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/classes_de_personnages/paladin">Paladin</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/classes_de_personnages/ante_paladin">Anté-paladin</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/classes_de_personnages/humain">Humain</a></li>
        </ul>
      </li>
      <!-- Quêtes -->
      <li class="closed" id="quetes">
        <span class="toggle-btn" onclick="toggleSection('quetes')">
          <span class="section-text">Quêtes</span>
        </span>
        <ul>
          <li><a href="https://www.t4c-neerya.com/wiki/quetes/accueil">Toutes les quêtes</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/quetes/beyond_the_kingdom/principales/accueil">Beyond the Kingdom</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/quetes/invasion/principales/factions_et_repaires">Factions & Repaires</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/quetes/arakas/principales/anwynn">Les ruines d'Anwynn</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/quetes/arakas/principales/passebateau">Passe bateau</a></li>
        </ul>
      <!-- Sorts et compétences -->
      <li class="closed" id="sorts_et_competences">
        <span class="toggle-btn" onclick="toggleSection('sorts_et_competences')">
          <span class="section-text">Sorts et compétences</span>
        </span>
        <ul>
          <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>
          <li><a href="https://www.t4c-neerya.com/wiki/sorts_et_competences/feu">Sorts de feu</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/sorts_et_competences/terre">Sorts de terre</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/sorts_et_competences/lumiere">Sorts de lumière</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/sorts_et_competences/necromancie">Sorts de nécromancie</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/sorts_et_competences/sans_elements">Sorts sans éléments</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/sorts_et_competences/accueil_competences">Compétences</a></li>
        </ul>
      <!-- Objets -->
      <li class="closed" id="objets">
        <span class="toggle-btn" onclick="toggleSection('objets')">
          <span class="section-text">Objets</span>
        </span>
        <ul>
          <li><a href="https://www.t4c-neerya.com/wiki/objets/accueil">Tous les objets</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/objets/arcsetfleches">Arcs et flèches</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/objets/armesmelee">Armes de mêlée</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/objets/armurerie">Armurerie</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/objets/set_armures">Set d'armures</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/objets/robes">Robes</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/objets/capes">Capes</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/objets/amulettes">Amulettes</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/objets/anneaux">Anneaux</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/objets/bracelets">Bracelets</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/objets/orbes">Orbes</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/objets/parchemins">Parchemins</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/objets/potions">Potions</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/objets/chance">Chance</a></li>
        </ul>
      <!-- Arcanisation -->
      <li class="closed" id="arcanisation">
        <span class="toggle-btn" onclick="toggleSection('arcanisation')">
          <span class="section-text">Arcanisation</span>
        </span>
        <ul>
          <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/arcanisation/prix">Prix de l'Arcanisation</a></li>
        </ul>
      <!-- Instances -->
      <li class="closed" id="instances">
        <span class="toggle-btn" onclick="toggleSection('instances')">
          <span class="section-text">Instances</span>
        </span>
        <ul>
          <li><a href="https://www.t4c-neerya.com/wiki/instances/arakas">Instance Arakas</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/instances/blackgold">Instance Raven's Dust</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/instances/ravens_dust">Instance Stoneheim</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/instances/stoneheim">Instance Blackgold</a></li>
        </ul>
      <!-- Boss -->
      <li class="closed" id="boss">
        <span class="toggle-btn" onclick="toggleSection('boss')">
          <span class="section-text">Boss</span>
        </span>
        <ul>
          <li><a href="https://www.t4c-neerya.com/wiki/boss/makrsh_ptangh">Makrsh P'Tangh</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/boss/chambellan_carolus">Chambellan Carolus</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/boss/seigneur_sorcier">Seigneur-Sorcier</a></li>
        </ul>
      <!-- Prisonnier du temps -->
      <li class="closed" id="prisonnier_du_temps">
        <span class="toggle-btn" onclick="toggleSection('prisonnier_du_temps')">
          <span class="section-text">Prisonnier du temps</span>
        </span>
        <ul>
          <li><a href="https://www.t4c-neerya.com/wiki/prisonniers_du_temps/arachnida">Arachnida</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/prisonniers_du_temps/iseria">Iséria</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/prisonniers_du_temps/maelith">Maelith</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/prisonniers_du_temps/maelthazar">Maelthazar</a></li>
          <li><a href="#https://www.t4c-neerya.com/wiki/prisonniers_du_temps/roikteez">Roikteez Greasybomb</a></li>
        </ul>
      <!-- Bestiaire -->
      <li class="closed" id="bestiaire">
        <span class="toggle-btn" onclick="toggleSection('bestiaire')">
          <span class="section-text">Bestiaire</span>
        </span>
        <ul>
          <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>
          <li><a href="https://www.t4c-neerya.com/wiki/bestiaire/stoneheim">Monstres Stoneheim</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/bestiaire/grim_hawk">Monstres Grim Hawk</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/bestiaire/draconis_sanctum">Monstres Draconis Sanctum</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/bestiaire/firesky">Monstres Firesky</a></li>
        </ul>
      <!-- PNJs -->
      <li class="closed" id="pnj">
        <span class="toggle-btn" onclick="toggleSection('pnj')">
          <span class="section-text">PNJs</span>
        </span>
        <ul>
          <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>
          <li><a href="https://www.t4c-neerya.com/wiki/pnj/stoneheim">PNJs Stoneheim</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/pnj/grim_hawk">PNJs Grim Hawk</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/pnj/draconis_sanctum">PNJs Draconis Sanctum</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/pnj/firesky">PNJs Firesky</a></li>
        </ul>
      <!-- Cartographie -->
      <li class="closed" id="cartographie">
        <span class="toggle-btn" onclick="toggleSection('cartographie')">
          <span class="section-text">Cartographie</span>
        </span>
        <ul>
          <li><a href="https://www.t4c-neerya.com/wiki/cartes/accueil">Toutes les cartes</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/cartes/arakas">Cartes Arakas</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/cartes/ravens_dust">Cartes Raven's Dust</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/cartes/stoneheim">Cartes Stoneheim</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/cartes/grim_hawk">Cartes Grim Hawk</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/cartes/draconis_sanctum">Cartes Draconis Sanctum</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/cartes/firesky">Cartes Firesky</a></li>
        </ul>
      <!-- Histoire -->
      <li class="closed" id="histoire">
        <span class="toggle-btn" onclick="toggleSection('histoire')">
          <span class="section-text">Histoire</span>
        </span>
        <ul>
          <li><a href="https://www.t4c-neerya.com/wiki/histoires/background_t4c">Background T4C</a></li>
          <li><a href="https://www.t4c-neerya.com/wiki/histoires/terre_mere">Histoire de la Terre Mère</a></li>
        </ul>
      <!-- Liens -->
      <li class="closed" id="liens">
        <span class="toggle-btn" onclick="toggleSection('liens')">
          <span class="section-text">Liens</span>
        </span>
        <ul>
          <li><a href="https://www.t4c-neerya.com/">Site web</a></li>
          <li><a href="https://www.t4c-neerya.com/forums/index.php">Forum</a></li>
          <li><a href="https://discord.gg/MZYyYxd">Discord</a></li>
          <li><a href="https://www.youtube.com/channel/UC1TyGQtvOq2oKUM8ifeCBig/videos">YouTube</a></li>
          <li><a href="https://www.facebook.com/t4c.neerya/">Facebook</a></li>
          <li><a href="https://www.t4c.com/">Portail Dialsoft</a></li>
          <li><a href="https://next.t4c.com/">T4C Next Chapter</a></li>
        </ul>
      </li>
      <!-- Anciens joueurs ? -->
      <li class="closed" id="anciens_joueurs">
        <span class="toggle-btn" onclick="toggleSection('anciens_joueurs')">
          <span class="section-text">Anciens joueurs ?</span>
        </span>
        <ul>
          <li><a href="https://www.t4c-neerya.com/wiki/guides/migration">Migrer vos personnages</a></li>
        </ul>
      </li>
      <!-- Autres -->
      <li class="closed" id="contribuer_au_wiki">
        <span class="toggle-btn" onclick="toggleSection('contribuer_au_wiki')">
          <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">Guide de mise en page</a></li>
        </ul>
      </li>
    </ul>
  </div>
 
  <script>
    // Array to store open sections
    var openSections = JSON.parse(localStorage.getItem('openSections')) || [];
 
    // Function to save open sections in local storage
    function saveOpenSections() {
      localStorage.setItem('openSections', JSON.stringify(openSections));
    }
 
    // Function to toggle the open state of a section
    function toggleSection(sectionId) {
      var section = document.getElementById(sectionId);
 
      if (openSections.includes(sectionId)) {
        section.classList.remove('open');
        openSections = openSections.filter(id => id !== sectionId);
      } else {
        section.classList.add('open');
        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('open');
        }
      });
    };
  </script>
</body>
T4C Neerya

Panneau latéral

Présentation

Guides

Quêtes

Inventaire

Boss et jeu de groupe

Ressources

Histoires

Autres liens

Table des matières

Menu

Aperçu en images

Code (HTML, CSS, JavaScript)

T4C Neerya

Outils pour utilisateurs

Outils du site

Panneau latéral

Présentation

Guides

Quêtes

Inventaire

Boss et jeu de groupe

Ressources

Histoires

Autres liens

Table des matières

Menu

Aperçu en images

Code (HTML, CSS, JavaScript)

Outils de la page
