18008 sujets

Questions générales et questions de débutants

Réinitialisation du menu navigation

Bonjour,

J'ai créé un site avec un menu de navigation à gauche dont les onglets peuvent être déroulés ou fermés.
Sur chaque page de mon site, le menu navigation est rappelé selon :
<div id="topbar">
<?php include_once("../../navigation.php"); ?>
</div>
Tant qu'aucune page n'est appelé, il est possible de naviguer dans le menu navigation en ouvrant ou fermant les onglets.
Par contre, lorsqu'une page est appelée via le menu navigation, le menu navigation est réinitialisé ce qui est logique étant donnée que j'appelle la nouvelle page via <a href="xxx.php">yyy</a> et que dans cette nouvelle page je retrouve la balise
<div id="topbar">
<?php include_once("../../navigation.php"); ?>
</div>

Je cherche actuellement une astuce pour éviter que mon menu navigation soit réinitialisé.
Je me demandais si à l'ouverture de la nouvelle page il était possible d'indiquer que si navigation.php est déjà ouvert d'éviter de le recharger et donc de garder le navigation.php déjà ouvert en lui indiquant que le navigation.php à prendre en charge est celui déjà actif. Est-ce que l'astuce est à faire via la page qui se charge ou via le lien appelé dans le fichier navigation?

J'espère que ma question est suffisamment claire.
Merci par avance pour votre aide.
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.
Modérateur
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 Smiley nut
Modifié par Olivier C (30 Dec 2022 - 09:23)
Finalement j'ai trouvé un système plus simple et propre.
Mon menu est constitué d'éléments cliquables. Grâce à un javascript sur la page appelée, je peux forcer l'ouverture de mon menu ce qui répond à mon besoin initial.
Merci à tous pour votre aide et bon réveillon
Prévenir un modérateur
Répondre au sujet
Aller à