Rendre visible un onglet après le clique dessus

[omzen]

bonjour

J'ai un menu (css) avec 7 items qui se soulignent quand on le survole.
Je cherche le moyen de conserver le background et le soulignement du mot lorsque le visiteur a cliqué sur le menu de manière à rendre visible sa navigation.

a:active ne fonctionne pas

Quelqu'un aurait-il des idées à ce sujet ?

Merci pour vos aides précieuses.

 

[Niconemo]

bonjour

J'ai un menu (css) avec 7 items qui se soulignent quand on le survole.
Je cherche le moyen de conserver le background et le soulignement du mot lorsque le visiteur a cliqué sur le menu de manière à rendre visible sa navigation.

a:active ne fonctionne pas

a:active ne sert pas du tout à ça. Ça sert à définir l'aspect u lien entre le moment où on clique sur la souris et le moment où on relache le clic.

Pour ton problème, il faut attribuer une class CSS (class='actif', par exemple) à ton élément de menu, soit en dur, soit dynamiquement. Selon le contexte il y a des tas de méthodes pour arriver à ça (CSS, javascrit, PHP…) mais tu n'expliques pas assez ta demande pour savoir vers lesquelles te rediriger. Un exemple concret en ligne serait le bienvenu.

 

[omzen]

Merci NicoNemo pour ton attention.

Je connais un peu le CSS, à choisir je préférais cela car le JS je n'y connais strictement rien. Je cherche ce qui peut y avoir de plus "simple" puisque je ne suis qu'un humble amateur qui cherche à mettre en relief ses activités associatives. Après si cela peut plus ou moins être compatible avec d'autres navigateurs, ça serait peut-être du luxe

Le menu en question est ici
http://www.coeuraccords.com/

 

[Benjamin D.C.]

Il n'y a pas à "choisir" entre CSS et JS, ils ont chacun un rôle important et différent. Si tu ne souhaites que styler différemment l'onglet de la page active, il te suffit de baliser cet onglet (par un identifiant, une classe ou mieux, un élément sémantique tel que STRONG) et de le cible ensuite dans ta feuille de styles.

 

[Niconemo]

Effectivement quelle que soit la méthode choisie, ça passera par les CSS (soit pour styler une classe "actif" ou soir pour définir la balise <strong> préconisée par Benjamin D.C.).

à la vue de ton exemple je me dis que ça risque d'être assez simple et qu'on va pouvoir complètement se passer de PHP et de JS.

Juste une question : est-ce que ton menu est codé en dur dans chacune des pages (assoce.php, troupe.php, etc.) ou est-ce un include php commun à toutes les pages ?

Dans les deux cas la méthode est simple à mettre en oeuvre juste avec du XHTML/CSS mais ne sera pas tout à fait la même.

---------- Nouveau message ajouté à 13h55 ---------- Le message précédent a été envoyé à 13h52 ----------

PS : attention à ton code, je vois des erreurs comme cette div "menuprincipal" à laquelle il manque le ">"

<div id="menuprincipal"

 

[momo-fr]

Déjà vérifie un peu ton code, tu as une balise ouverte pour ton menu :

 <div id="menuprincipal"		  
<ul>
<li><a href="http://www.coeuraccords.com/pages/assoce.php" title="présentation" id="accueil">Association</a></li>
<li><a href="http://www.coeuraccords.com/pages/troupe.php" title="présentation" id="cie">Compagnie</a></li>

Ton site est en Php, tu dois pouvoir y mettre une conditionnelle pour déterminer le fonctionnement des CSS du menu. Quelque chose qui peut, par exemple décrypter l'url et y repérer une variable unique (pages/troupe.php), ainsi si tu as cette variable dans l'url tu affiches une classe CSS au menu ciblé :

<ul>
<li><a href="http://www.coeuraccords.com/pages/assoce.php" title="présentation" id="accueil">Association</a></li>
<li><a class="active compagnie" href="http://www.coeuraccords.com/pages/troupe.php" title="présentation" id="cie" >Compagnie</a></li>
<li><a href="http://www.coeuraccords.com/pages/danse-de-l-ame.php" title="développement personnel" id="relation">Relation à Soi</a></li>

Ici je met une association de classes, l'une pour le générique (gras, fond, etc), l'autre pour la couleur, mais ça peut être plus simple, c'est selon ce que tu utilises dans l'état "actif" comme attributs.

Je ne code pas en Php mais mon développeur m'a déjà fait quelque chose de similaire. :rolleyes:

EDIT : grillé par Niconemo&#8230;

D'ailleurs, c'est effectivement une méthode pour un menu en include Php sinon c'est bien plus simple si ton menu est "fixe" et pas dynamique.

 

[omzen]

Merci pour votre coup de main.

Effectivement, j'avais eu un oubli.

Mon menu principal est un include. Mais j'ai bien conscience que je vais devoir faire autrement si je veux que chaque onglet survolé, une fois cliqué reste ainsi pour le rendre visible.

Alors je comprends le principe de la "class" mais je ne sais pas ce que je dois mettre dans mon CSS (si le css se suffit à lui seul). Je zappe a:active mais je mets quoi alors ?

Je souhaiterais pouvoir conserver le style du a:hover.

Dans l'attente de votre éclairage éventuel.

 

[momo-fr]

Ben, je suppose que le style du hover te convient ?

Si oui tu glisses avec une classe (exemple .active) que tu vas associer à ton lien menu dans la page "active" ainsi tu gardes l'aspect et la couleur une fois dans la page.

Exemple du CSS :

#menuprincipal ul li a:hover, .active { 
color: #F2FAFB;
background-color: #013082;
border-bottom: 4px solid red;
padding-bottom: 0;
}

Exemple du code pour le second menu actif (Compagnie) :

<ul>

<li><a href="http://www.coeuraccords.com/pages/assoce.php" title="présentation" id="accueil">Association</a></li>

<li><a class="active" href="http://www.coeuraccords.com/pages/troupe.php" title="présentation" id="cie">Compagnie</a></li>

<li><a href="http://www.coeuraccords.com/pages/danse-de-l-ame.php" title="développement personnel" id="relation">Relation à Soi</a></li>

<li><a href="http://www.coeuraccords.com/pages/expression-corporelle.php" title="danses" id="danse">Expression Corporelle</a></li>

<li><a href="http://www.coeuraccords.com/pages/marionnettes.php" title="présentation" id="theatre">Marionnettes</a></li>       

<li><a href="http://www.coeuraccords.com/pages/spectacle.php" title="présentation"  id="spectacle">Spectacles </a></li>

<li><a href="http://www.coeuraccords.com/pages/contact.php" title="info pratique"  id="contact">Contact</a></li>

</ul>

 

[Niconemo]

On peut s'en tirer sans PHP en mettant simplement une id différente dans la balise body de chaque page (et une class ou une id pour chaque élément de menu mais je crois que c'est déjà le cas) et en gérant tout le reste en CSS.

Je n'ai pas le temps tout de suite mais je repasserai décrire la méthode si personne ne l'a fait avant

 

[cherryblue]

Dans ton cas, et puisque tu utilises des pages en php, un menu en include, et que visiblement des pages ne sont pas générées dynamiquement, il y a une solution assez simple.

1- tu définis ta classe CSS qui doit correspondre à ton lien de menu actif
2 - sur chacune de tes pages, tu définis une variable unique. par exemple, sur ta page contact.php, tu définis $var_menu="contact", sur ta page marionettes.php, tu définis $var_menu="marionettes" etc
3 - dans ton fichier menu en include, tu testes la variable $var_menu pour voir sur quelle page on se trouve, et tu affiches ta classe en fonction de la page.
Ainsi ton menu devient :

<ul>

<li><a <?php if ($var_menu=="xxx") { ?>class="active"<?php } ?> href="http://www.coeuraccords.com/pages/assoce.php" title="présentation" id="accueil">Association</a></li>

<li><a <?php if ($var_menu=="xxx") { ?>class="active"<?php } ?> href="http://www.coeuraccords.com/pages/troupe.php" title="présentation" id="cie">Compagnie</a></li>

<li><a <?php if ($var_menu=="xxx") { ?>class="active"<?php } ?> href="http://www.coeuraccords.com/pages/danse-de-l-ame.php" title="développement personnel" id="relation">Relation à Soi</a></li>

<li><a <?php if ($var_menu=="xxx") { ?>class="active"<?php } ?> href="http://www.coeuraccords.com/pages/expression-corporelle.php" title="danses" id="danse">Expression Corporelle</a></li>

<li><a <?php if ($var_menu=="marionnettes") { ?>class="active"<?php } ?> href="http://www.coeuraccords.com/pages/marionnettes.php" title="présentation" id="theatre">Marionnettes</a></li>       

<li><a <?php if ($var_menu=="spectacle") { ?>class="active"<?php } ?> href="http://www.coeuraccords.com/pages/spectacle.php" title="présentation"  id="spectacle">Spectacles </a></li>

<li><a <?php if ($var_menu=="contact") { ?>class="active"<?php } ?> href="http://www.coeuraccords.com/pages/contact.php" title="info pratique"  id="contact">Contact</a></li>

</ul>

 

[omzen]

merci les gars pour vos remarques que je vois comme pertinentes.
mais je n'y arrive pas

Oui Momo, je souhaite garder en effet les mêmes effets qu'avec le hover.

CherryBlue, ta technique me semble plus simple parce qu'elle prend en compte mon menu en include mais je n'arrive à rien. je merde quelque part parce que je ne connais pas ce langage.

Voici ce que j'ai tenté de faire (et je garantie que ça ne fonctionne pas pour le moment)

<div id="menuprincipal"><ul>
<li><a <?php if ($var_menu=="assoce") { ?>class="accueil"<?php } ?> href="http://www.coeuraccords.com/pages/assoce.php" title="présentation" id="accueil">Association</a></li>
<li><a <?php if ($var_menu=="troupe") { ?>class="cie"<?php } ?> href="http://www.coeuraccords.com/pages/troupe.php" title="présentation" id="cie">Compagnie</a></li>
<li><a <?php if ($var_menu=="danse-de-l-ame.php") { ?>class="relation"<?php } ?> href="http://www.coeuraccords.com/pages/danse-de-l-ame.php" title="développement personnel" id="relation">Relation à Soi</a></li>
<li><a <?php if ($var_menu=="expression-corporelle") { ?>class="danse"<?php } ?> href="http://www.coeuraccords.com/pages/expression-corporelle.php" title="danses" id="danse">Expression Corporelle</a></li>
<li><a  <?php if ($var_menu=="marionnettes") { ?>class="theatre"<?php } ?> href="http://www.coeuraccords.com/pages/marionnettes.php" title="présentation" id="theatre">Marionnettes</a></li>       
<li><a <?php if ($var_menu=="spectacle") { ?>class="spectacle"<?php } ?> href="http://www.coeuraccords.com/pages/spectacle.php" title="présentation"  id="spectacle">Spectacles </a></li>
<li><a <?php if ($var_menu=="contact") { ?>class="contact"<?php } ?> href="http://www.coeuraccords.com/pages/contact.php" title="info pratique"  id="contact">Contact</a></li>
</ul></div>

et

/* ------------------couleurs du menu principal & rubrique en cours---------------------- */
#menuprincipal #accueil:hover, .accueil{border-bottom: 4px solid red;}	#menuprincipal #cie:hover, .cie{border-bottom: 4px solid orange ;}	#menuprincipal #relation:hover, .relation{border-bottom: 4px solid yellow;}	#menuprincipal #danse:hover, .danse{border-bottom: 4px solid green;}	#menuprincipal #theatre:hover, .theatre{border-bottom: 4px solid blue;}	#menuprincipal #spectacle:hover, .spectacle{border-bottom: 4px solid fuchsia;}	#menuprincipal #contact:hover, .contact{border-bottom: 4px solid #4B0082;}

Je cherche à comprendre mais je raccorde pas les bons neurones. Sincèrement merci pour l'attention que vous portez à mon humble problème

 

[cherryblue]

tu as pas besoin de définir une classe différente pour chaque lien actif. Un simple class="actif", le même pour chaque lien puisque c'est ta condition en php qui fera que la class sera activée ou non selon la page sur laquelle on se trouve et dans ton css tu mets

.actif{ ici les styles que tu veux appliquer à ton menu actif }

donc simplement .actif{border-bottom: 4px solid red;}

et ça devrait marcher

---------- Nouveau message ajouté à 21h47 ---------- Le message précédent a été envoyé à 21h42 ----------

ok, je viens de voir sur ton site, en fait tu veux une couleur pour souligner le lien différente pour chaque lien. Donc tu avais raison.
le seul truc que tu dois avoir oublié c'est de bien définir tes variables dans chaque page (point 2 dans mon premier message)

---------- Nouveau message ajouté à 21h51 ---------- Le message précédent a été envoyé à 21h47 ----------

effectivement, on voit dans ton code source que ta variable n'est pas appelée quand on est sur les pages. On a toujours ça

<ul> 
 
<li><a  href="http://www.coeuraccords.com/pages/assoce.php" title="présentation" id="accueil">Association</a></li> 
 
<li><a  href="http://www.coeuraccords.com/pages/troupe.php" title="présentation" id="cie">Compagnie</a></li> 
 
<li><a  href="http://www.coeuraccords.com/pages/danse-de-l-ame.php" title="développement personnel" id="relation">Relation à Soi</a></li> 
 
<li><a  href="http://www.coeuraccords.com/pages/expression-corporelle.php" title="danses" id="danse">Expression Corporelle</a></li> 
 
<li><a   href="http://www.coeuraccords.com/pages/marionnettes.php" title="présentation" id="theatre">Marionnettes</a></li>       
 
<li><a  href="http://www.coeuraccords.com/pages/spectacle.php" title="présentation"  id="spectacle">Spectacles </a></li> 
 
<li><a  href="http://www.coeuraccords.com/pages/contact.php" title="info pratique"  id="contact">Contact</a></li> 
 
</ul>

alors que sur la page contact.php par exemple on devrait avoir ça

<ul> 
 
<li><a  href="http://www.coeuraccords.com/pages/assoce.php" title="présentation" id="accueil">Association</a></li> 
 
<li><a  href="http://www.coeuraccords.com/pages/troupe.php" title="présentation" id="cie">Compagnie</a></li> 
 
<li><a  href="http://www.coeuraccords.com/pages/danse-de-l-ame.php" title="développement personnel" id="relation">Relation à Soi</a></li> 
 
<li><a  href="http://www.coeuraccords.com/pages/expression-corporelle.php" title="danses" id="danse">Expression Corporelle</a></li> 
 
<li><a   href="http://www.coeuraccords.com/pages/marionnettes.php" title="présentation" id="theatre">Marionnettes</a></li>       
 
<li><a  href="http://www.coeuraccords.com/pages/spectacle.php" title="présentation"  id="spectacle">Spectacles </a></li> 
 
<li><a  [B]class="contact"[/B] href="http://www.coeuraccords.com/pages/contact.php" title="info pratique"  id="contact">Contact</a></li> 
 
</ul>

donc dans ta page contact, tu as dû oublié de mettre à un endroit, juste avant l'include de ton menu

<?php

$var_menu = "contact";

?>

 

[omzen]

CherryBlue, MoMo-fr, NicoNemo et Benjamin DC, vous êtes des boss :

Être capable de guider un débutant à distance en quelques messages, je dis C H A P E A U !
Je suis fier de faire parti de cette communauté.

Par soucis, d'aide éventuelle pour d'autres internautes :

je n'avais pas compris qu'il fallait que je rajoute le code ci-dessous à l'intérieur de chacune de mes pages

<?php $var_menu = "contact"; ?>

Les onglets, grâce à vous, sont maintenant visibles sur chaque page, c'est top. Espérons que les différents navigateurs puissent faire le même travail.

CherryBlue, MERCI pour ta traduction informatique.

 

[Niconemo]

Les onglets, grâce à vous, sont maintenant visibles sur chaque page, c'est top. Espérons que les différents navigateurs puissent faire le même travail.

Le PHP n'est pas interprété côté navigateur mais côté serveur : si tu affiches la source d'une de tes pages, tu verra que le PHP utilisé a généré du HTML.

Et comme ce code HTML généré est basique, il n'y a pas de raison que ça ne marche pas sur tous les navigateurs.

 

[omzen]

merci pour la précision