Réinitialisation du menu navigation

Pas certain, mais je crois que tu mélange le rendu du navigateur de chaque visiteur, et le contenu de tes PHP ?
Ce que tu décrit je crois le comprendre comme :
Tes PHP qui participent à envoyer au visiteurs, son HTML, sa feuille de style etc... tu voudrais qu'il ne soient plus appelés lors d'un clic sur ton menu,
OUI c'est ce qui s'appel de l'AJAX .
essais de réfléchir aux mécanismes client/serveur !
Modifié par Fox-infograp (28 Dec 2022 - 15:28)

Merci pour votre réponse.
Effectivement, j'ai pu voir sur différent forum que la solution se trouve probablement au niveau de l'AJAX

Je me disais qu'il y avait peut-être une astuce autre ou plus simple du style :
Dans la page active, le menu navigation est déjà chargé.
Au clic du lien du menu, la nouvelle page se charge :
Au moment où j'arrive à :
<div id="topbar">
<?php include_once("../../navigation.php"); ?>
</div>
Est-ce qu'une formule du type "si" tu vois que le même menu est rappelé à savoir navigation.php alors garde le menu navigation.php actuellement actif et ne le recharge pas.

Une solution serait d'utiliser un iframe pour avoir mon menu dans un bloc et les pages chargées dans un autre mais je préfèrerais éviter cette approche.

Bonjour, bonsoir,

La façon généralement la plus simple est d’insérer une class sur l’élément de ton menu qui correspond à la page affichée.

La méthode à mettre en place va dépendre de la façon dont tu appelle ta page, ou son url.

L'url d'une page est généralement unique, il suffit donc de la tester et de la comparer aux liens de ton menu et de sa structure pour y appliquer une class particulière. Les styles feront le reste.

Tu peut le faire depuis ton script PHP a l'aide de $_SERVER['x'] soit 'QUERY_STRING ou 'REQUEST_URI' généralement pour récupérer l'info qui concerne la page demandée. voir https://www.php.net/manual/fr/reserved.variables.server.php pour plus d'option sur les infos que tu peut obtenir. Le script est à adapter en fonction de la façon dont tu créer ce menu (à la main ou générer par ton script lui même).

Il y a aussi JavaScript, coté visiteur qui peut aussi t'aider à identifier la page demandée et l’élément du menu auquel appliquer une classe particulière. voir Document.URL : https://developer.mozilla.org/fr/docs/Web/API/Document/URL pour cibler le lien correspondant à la page demandée. En principe :

let active = document.querySelector('a[href="'+document.URL+'"]').classList.add('active');

devrait te permettre de donner un style uniquement au lien vers la page active .

a.active{color:green;}

Ce sont des pistes.
Cdt
Modifié par gcyrillus (28 Dec 2022 - 21:39)

Pour une solution uniquement front, on peut aussi trouver la barre de navigation (ici .nav) et tester un à un tous les liens pour ajouter une classe (.current) :

const currentTabNavigation = (() => {
  document.querySelectorAll('.nav a').forEach(el => {
    if (location.pathname === el.pathname) el.parentElement.classList.add('current')
  })
})()

location.pathname est une solution alternative à document.URL proposé par gcyrillus.
Modifié par Olivier C (29 Dec 2022 - 16:32)

Merci à tous pour votre aide. Je pense avancer dans la bonne direction mais toujours avec quelques difficultés décrites à la fin du message.

J'ai trouvé une astuce qui me semble intéressante sur : https://www.alsacreations.com/astuce/lire/28-styles-lien-page-en-cours.html

Il suffit dans la page appelée à forcer le menu à s'ouvrir à l'endroit voulu :

1. Sur chaque page PHP, déclarer une variable comme ceci:

<?php $nav_en_cours = 'rubrique1'; ?>
2. Dans le fichier PHP qui contient votre menu, le code du menu devra ressembler à ceci:

<ul id="navigation">
<li<?php if ($nav_en_cours == 'rubrique1') {echo ' id="en-cours"';} ?>><a href="/rub1/">Rubrique 1</a></li>
<li<?php if ($nav_en_cours == 'rubrique2') {echo ' id="en-cours"';} ?>><a href="/rub2/">Rubrique 2</a></li>
</ul>

Du coup, sur la page qui est chargée j'ai rajouté : <?php $nav_en_cours = 'rubrique1'; ?>
Par contre, j'ai plus de difficultés dans la partie menu qui n'est pas réalisée sous le même format.
Le format de mon menu est le suivant :
<button class="dropdown-btn"><div class="black">TEST</div>
<i class="drop"></i>
</button>
<div id="en-cours" class="dropdown-container" >
<a href="http://1.php">rubrique1</a>
<a href="http://2.php>rubrique2</a>
<a href="http://3.php">rubrique3</a>
</div>

Je n'arrive pas à savoir où exactement placer le <?php if ($nav_en_cours == 'rubrique2') {echo ' ';} ?> ni vraiment et surtout je suis un peu embêté avec le echo car il faudrait que le php me permette de déclencher le clic sur TEST donc le button.

Désolé je suis un peu newbie et une petite aide serait la bienvenue

A la vache ! c'est comme ça que l'on écrivait le php en 2009 ? J'avais oublié (la syntaxe est vraiment atroce). Je ne code plus en php et depuis il y a les templates (twig, etc...) qui ont bien améliorés la situation. Mais une chose à la fois :

Du coup le tutoriel de fvsch proposait de placer un ID sur l'élément de liste (je suggérerais plutôt une classe, mais pour avancer on va garder ce raisonnement), mais vous, en ce qui vous concerne, vous avez opté pour le lien directement. Ce qui devrait donner ceci pour vous :

<a<?php if ($nav_en_cours == 'rubrique2') {echo ' id="en-cours" ';} ?>href="http://2.php>rubrique2</a>

Quoi ! J'ai vraiment écrit ça ? J'ai mal au cœur
Modifié par Olivier C (30 Dec 2022 - 09:23)