Visualiser dans le menu la page sélectionnée [Résolu]

Signaler
Messages postés
16
Date d'inscription
lundi 1 mai 2006
Statut
Membre
Dernière intervention
20 février 2013
-
Messages postés
493
Date d'inscription
jeudi 7 juillet 2005
Statut
Membre
Dernière intervention
24 mai 2017
-
Bonsoir à tous.

Le site que j'ai réalisé utilise PHP et javascript. Je précise que je ne connais rien de ces deux langages, leur utilisation ne fut possible que grâce à de judicieux conseils d'internautes et de quelques "trucs" trouvés sur internet. Il subsiste un point que je ne sais pas résoudre : le site comprend un menu (différents sujets) et des sous-menus (différentes pages). Une fonction CSS a:hover modifie l'aspect des sous-menus survolés. Je voudrais que le sous-menu conserve une marque quelconque (déterminée par CSS par exemple) identifiant la page en cours.

La sélection d'une page est faite par la fonction PHP suivante :



   <?php
      $page = $_GET['page'];
        if (file_exists("pages/$page.php")==TRUE)
           {include("pages/$page.php");}
    else   {include("pages/accueil.php");}
  ?>




Le menu est semblable à ceci :

<li>[# Sujet]
  
    <li>[index.php?page=page1 Page 1]</li>
    <li>[index.php?page=page2 Page 2]</li>
    <li> ......
  
</li>


Merci d'avance si l'un de vous peut m'apporter la solution.

13 réponses

Messages postés
493
Date d'inscription
jeudi 7 juillet 2005
Statut
Membre
Dernière intervention
24 mai 2017
2
J'ai été trop vite après mon copier/coller.
Tu dois remplacer ceci :
*...
<li>[index.php?page=page1 Page 1]</li>
<li>[index.php?page=page2 Page 2]</li>
*...



stéph
Messages postés
493
Date d'inscription
jeudi 7 juillet 2005
Statut
Membre
Dernière intervention
24 mai 2017
2
oui, mais dans le code source après avoir cliqué sur le lien.
Dans le tag "a", retrouve-t-on l'attribut classe avec en valeur "selected" ?
*...
<a class="selected" *...


stéph
Messages postés
493
Date d'inscription
jeudi 7 juillet 2005
Statut
Membre
Dernière intervention
24 mai 2017
2
Salut, ce que tu voudrais est justement en place.
Car si tu ne passes pas avec la souris sur le lien, cela fonctionne.
Donc, il y a du JavaScript qui supprime la classe CSS au passage de la souris (curseur).
Et c'est possible, j'ai constaté que ton menu fonctionnais comme un accordéon.
Ce sont des menus très connu qui se nomme "Accordion".
Et c'est fait avec du JavaScript, la plus part en jQuery.
Je crois que c'est dans cette direction qu'il faut regarder.

stéph
Messages postés
493
Date d'inscription
jeudi 7 juillet 2005
Statut
Membre
Dernière intervention
24 mai 2017
2
Voir même, trouver une autre solution.
Ne pas faire cela en PHP mais en JavaScript.

stéph
Messages postés
16
Date d'inscription
lundi 1 mai 2006
Statut
Membre
Dernière intervention
20 février 2013

Oui, c'est bien jQuery qui est utilisé pour gérer le dynamisme du menu. Mais je rappelle que, en ce qui concerne son utilisation, je n'ai rien crée (je n'y connais rien !!!), j'ai simplement adapté une application trouvée sur le net.
Maintenant, on peut tout de même identifier la page en cours en passant la souris sur le menu grâce à la classe .selected, utile quand par exemple, comme dans la rubrique "Camino francés 2003", il y a 35 pages ! Donc, je vais ajouter cette classe à mes menus, ce sera déjà un premier pas.
Je te remercie pour le temps que tu m'as consacré.

Amicalement.

Jean
Messages postés
493
Date d'inscription
jeudi 7 juillet 2005
Statut
Membre
Dernière intervention
24 mai 2017
2
Très bien, c'était avec plaisir.
A bientôt.

stéph
Messages postés
493
Date d'inscription
jeudi 7 juillet 2005
Statut
Membre
Dernière intervention
24 mai 2017
2
Salut, je vais essayer de t'aider avec le peu d'information données dans ton poste.

<li>[# Sujet]
  
    <li>[index.php?page=page1 Page 1]</li>
    <li>[index.php?page=page2 Page 2]</li>
    <li> ......
  
</li>


Pour le CSS à toi de voir
a {}
a.selected, 
a:hover, 
a:hover.selected {}


stéph
Messages postés
16
Date d'inscription
lundi 1 mai 2006
Statut
Membre
Dernière intervention
20 février 2013

Bonjour Stéph,

Grand merci pour cette réponse rapide et désolé de cette réaction tardive.
Désolé aussi de te dire que je n'obtiens pas le résultat souhaité. La modification du menu est la suivante :
<li>[index.php?page=1998pe/fr/p02_fr De Puno à Cuzco]</li>
<li>[index.php?page=1998pe/fr/p03_fr Carte du trek]</li>

La classe 'selected' a été ajoutée dans le fichier CSS.
Quelles autres informations sur le site souhaiterais-tu avoir pour y voir plus clair ?
Si la visualisation de ce site peut t'aider, vas voir à cette adresse : http://jeandebot.be
Remarque : tous les fichiers sont en htm et non en PHP.

Jean
Messages postés
493
Date d'inscription
jeudi 7 juillet 2005
Statut
Membre
Dernière intervention
24 mai 2017
2
Bonjour,

Tu as vérifié que $page n'est vide nulle part ?
Pour le voir très facilement, ajoute $page après le libellé du lien comme ceci.
<li>[index.php?page=1998pe/fr/p02_fr De Puno à Cuzco (<?php echo $page; ?>)]</li>
<li>[index.php?page=1998pe/fr/p03_fr Carte du trek  (<?php echo $page; ?>)]</li>


Comme ceci, tu verras exactement ce que $page retourne et tu copies/colles la valeur dans l'instruction.

stéph
Messages postés
16
Date d'inscription
lundi 1 mai 2006
Statut
Membre
Dernière intervention
20 février 2013

Bonjour,

Le seul effet de l'ajout de cette instruction est de modifier les libellés du menu qui deviennent :

De Puno à Cuzco (1998pe/fr/p03_fr)
Cuzco (1998pe/fr/p03_fr)

Cela n'affecte pas l'affichage des pages.

Jean
Messages postés
16
Date d'inscription
lundi 1 mai 2006
Statut
Membre
Dernière intervention
20 février 2013

Oui, voici les 2 <li> où la modification a été apportée :

Sélection de "De Puno à Cuzco"

<li>[index.php?page=1998pe/fr/p02_fr De Puno à Cuzco]</li>
<li>[index.php?page=1998pe/fr/p03_fr Carte du trek]</li>


Sélection de "Carte du trek"

<li>[index.php?page=1998pe/fr/p02_fr De Puno à Cuzco]</li>
<li>[index.php?page=1998pe/fr/p03_fr Carte du trek]</li>


Donc je suppose que ce n'est plus qu'une question de CSS ; je vais voir de ce côté.
Je te tiens au courant.
Merci pour l'aide.

Jean
Messages postés
493
Date d'inscription
jeudi 7 juillet 2005
Statut
Membre
Dernière intervention
24 mai 2017
2
Super, avec plaisir.
A plus tard.

PS: n’hésite pas à me demander pour le CSS.

stéph
Messages postés
16
Date d'inscription
lundi 1 mai 2006
Statut
Membre
Dernière intervention
20 février 2013

Voilà : négatif mais !!!

Je crois que le problème ne vient pas du CSS, la classe .selected s'applique bien dès que la page choisie s'affiche mais disparait dès que le pointeur de la souris quitte le menu ce qui n'est pas le but recherché (maitien de la classe tant qu'on navigue sur la page choisie) ; ma supposition est la suivante : la classe .selected s'applique de manière locale, statiquement, tandis que le serveur regénère la page dynamiquement. Ce devrait donc être le serveur qui devrait renvoyer le code HTML avec l'information de classe qui alors, je pense, devrait s'appliquer de manière permanente.

Qu'en penses-tu ?

Jean