> Tous les forums > Forum des Webmasters
 changer la couleur des liens menu actifSujet résolu
Ajouter un message à la discussion
Pages : [1] 2 3 ... Fin
Page 1 sur 3 [Fin]
t671
  Posté le 02/05/2010 @ 14:45 
Aller en bas de la page 
Astucien

Bonjour,

Au niveau de mon menu, je souhaiterais que le lien visité prennent une couleur différente quand je suis sur la page correspondante.

J'ai chercher, mais ce que j'ai trouvé ne fonctionne pas (.bouton:active). C'est à dire que là, la couleur qui correspond à la page visitée ne s'affiche que quand on maintient le clic de la souris sur le lien du menu ! Et quand on relâche, la couleur disparait !

.bouton {
display: block;
width: 230px;
height: 20px;
background-color: #C0C0C0;
text-align: center;
font-family: Comic sans MS, verdana, arial, helvetica, sans-serif;
font-size: 15px;
font-weight: bold;
color: black;
text-decoration: none;
}
.bouton:hover {
background-color: #969696;
color: black;
text-decoration: underline;
}
.bouton:active {
background-color: #FF6666;
color: black;
text-decoration: underline;
}

Merci pour vos idées et votre aide

Publicité
Dreamer
 Posté le 02/05/2010 à 14:53 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

a:visited !!!!!!!!!!!!!!!!!!

t671
 Posté le 02/05/2010 à 15:12 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien
Dreamer a écrit :

a:visited !!!!!!!!!!!!!!!!!!

J'ai déjà essayé. Mais là, le lien change de couleur, et la garde.

Moi, ce que je recherche, c'est que le lien change de couleur quand on visite la page associée, et reprend sa couleur initiale au changement de page.

Malcolm
 Posté le 02/05/2010 à 15:18 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Astucien

a:active est fait pour n'afficher un comportement qu'à l'activation du lien. Sinon il faut que tu le fasses avec une classe CSS spéciale ...

Dreamer
 Posté le 02/05/2010 à 15:20 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

t671 a écrit :
Dreamer a écrit :

a:visited !!!!!!!!!!!!!!!!!!

J'ai déjà essayé. Mais là, le lien change de couleur, et la garde.

Moi, ce que je recherche, c'est que le lien change de couleur quand on visite la page associée, et reprend sa couleur initiale au changement de page.

Alors , il te faut prévoir un refresh , mais je crois que ce n'est pas valide W3C

<meta http-aquiv="refresh" content="30">


30 étant le temps en secondes .........

t671
 Posté le 02/05/2010 à 15:50 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Ben ça fonctionne pô !!!! J'ai testé à 30s, 10s et 2s. Mais reste la couleur "visited"

Cedders
 Posté le 02/05/2010 à 15:51 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

En gros tu dois modifier la class de ton lien en fonction de ta page avec du javascript ou php.

Je peux pas te donner d'exemple de suite ...

t671
 Posté le 02/05/2010 à 15:56 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien
Cedders a écrit :

En gros tu dois modifier la class de ton lien en fonction de ta page avec du javascript ou php.

Je peux pas te donner d'exemple de suite ...

OK Cedders !

Merci de penser à moi quand tu auras un moment ....

Cedders
 Posté le 03/05/2010 à 16:58 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

C'est quoi la structure de ton site ?

Tu charges dynamiquement le contenu (en php dans un div par exemple) ou tu as une page/article ?

Publicité
t671
 Posté le 03/05/2010 à 17:03 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien
Cedders a écrit :

C'est quoi la structure de ton site ?

Tu charges dynamiquement le contenu (en php dans un div par exemple) ou tu as une page/article ?

Je charge la page demandée dans un div :

<div class="frame">
<?php

$pages=array(
'manifestations'=>'manifestations_FR.php',
'choristes'=>'choristes_FR.php',
'europe'=>'europe_FR.php',...............

Cedders
 Posté le 03/05/2010 à 17:18 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Ok donc manifestations, choristes, europe, etc... c'est passé par URL ?

t671
 Posté le 03/05/2010 à 17:28 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien
Cedders a écrit :

Ok donc manifestations, choristes, europe, etc... c'est passé par URL ?

oui

Cedders
 Posté le 03/05/2010 à 17:46 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Donc ce que je te propose :

1) Créer la class ".courant" égal à ".bouton:hover" (Attention : il te faut recopier toutes les propriétés car .courant ne va pas hériter de celles de .bouton)

.bouton:active, .courant {
display: block;
width: 230px;
height: 20px;
background-color: #FF6666;
color: black;
text-decoration: underline;
text-align: center;
font-family: Comic sans MS, verdana, arial, helvetica, sans-serif;
font-size: 15px;
font-weight: bold;
}

2) La création du menu. Tu boucles ton tableau pour afficher les elements du menu. Tu compare le nom du lien à afficher avec celui passé dans l'URL. S'il sont égaux c'est que le lien que tu affiches est le courant et donc la variable $class vaudra "courant" sinon elle vaudra "bouton".

<ul>
<?php
foreach($pages as $nom)
{
if(isset($_GET['page']) AND $_GET['page'] == $nom) // Page a afficher = Lien a afficher
$class = "courant";
else
$class = "bouton";

echo "<li><a class=\"".$class."\"href=\"index.php?page=".$nom."\">".$nom."</a></li>\n";
}
?>
</ul>


J'espère que celà t'aideras et n'hésite pas à poser des question si jamais ;)

t671
 Posté le 03/05/2010 à 18:12 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Ca ne fonctionne pas ! J'ai peut-être pas fait ce qu'il fallait ...

Pour le css, j'ai donc rajouiter la class "courant" (j'ai juste changé la couleur en rouge) :

.courant {
display: block;
width: 200px;
height: 20px;
background-color: red;
text-align: center;
font-family: Comic sans MS, verdana, arial, helvetica, sans-serif;
font-size: 15px;
font-weight: bold;
color: black;
text-decoration: none;
}

Et pour le script, voilà comment j'ai fait :

<div class="frame">
<?php

$pages=array(
'manifestations'=>'manifestations_FR.php',
'choristes'=>'choristes_FR.php',
'europe'=>'europe_FR.php',
'remerciement'=>'remerciement_FR.php'
);
if(isset($_GET['page']) && array_key_exists($_GET['page'],$pages))
include $pages[$_GET['page']];
else
include 'accueil_FR.htm';

//----------changer la couleur des liens actif

foreach($pages as $nom)
{
if(isset($_GET['page']) AND $_GET['page'] == $nom) // Page a afficher = Lien a afficher
$class = "courant";
else
$class = "bouton";

echo "<li><a class=\"".$class."\"href=\"index_FR.php?page=".$nom."\">".$nom."</a></li>\n";
}

?>

Pour info, ma page s'appelle index_FR.

J'ai rajouté ta boucle après l'affichage du menu, et ça fonctionne pas. POurquoi ?

Cedders
 Posté le 03/05/2010 à 21:38 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

C'est quoi qui ne fonctionne pas ? Tu as une erreur ?

EDIT :

Suis-je bête ... j'avais testé sans les include donc ça marchait mais je me suis planté au niveau du foreach...

... soit du fait

foreach($tableau as $valeur) // Comme dans la première version

... ou

foreach($tableau as $cle => $valeur) // Seconde version

Car ce qui nous intéresse comme valeur c'est la cle "europe", "choristes", etc... et non la valeur (europe_FR.php,...). Donc il faut passer par la seconde version

//----------changer la couleur des liens actif

foreach($pages as $cle => $value)
{
if(isset($_GET['page']) AND $_GET['page'] == $cle) // Page a afficher = Lien a afficher
$class = "courant";
else
$class = "bouton";

echo "<li><a class=\"".$class."\"href=\"liens.php?page=".$cle."\">".$cle."</a></li>\n";
}

Désolé de cette faute d'inattention ...



Modifié par Cedders le 03/05/2010 21:58
t671
 Posté le 04/05/2010 à 13:46 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

OK, merci pour ton aide ! En fait, j'ai omis de te donner le début de mon code :

<div class="menu2">
<a class="bouton" href="index_FR.php?page=accueil">Qui sommes nous</a>
<a class="bouton" href="index_FR.php?page=manifestations">Nos prochaines sorties</a>
<a class="bouton" href="index_FR.php?page=choristes">Choristes</a> ..............
</div>

<div class="frame">
<?php

$pages=array(
'manifestations'=>'manifestations_FR.php',
'choristes'=>'choristes_FR.php',
'europe'=>'europe_FR.php', .............
);
if(isset($_GET['page']) && array_key_exists($_GET['page'],$pages))
include $pages[$_GET['page']];
else
include 'accueil_FR.htm';

//----------changer la couleur des liens actif

foreach($pages as $cle => $value)
{
if(isset($_GET['page']) AND $_GET['page'] == $cle) // Page a afficher = Lien a afficher
$class = "courant";
else
$class = "bouton";


echo "<li><a class=\"".$class."\"href=\"index_FR.php?page=".$cle."\">".$cle."</a></li>\n";
}
?>

Là, j'affiche dans ma frame (partie centrale) la page d'accueil avec dessous un menu correspondant à "manifestations, choristes, europe, .......", ce qui correspond à l'array. Il va donc falloir que je mette les divs à leur place !

Et je n'arrive toujours pas à placer le menu ( echo " "<li><a class=\"".$class."\"href=\"index_FR.php?page...) dans la div menu2, pour l'afficher dans la partie gauche, et faire afficher les liens dans la frame !



Modifié par t671 le 04/05/2010 13:52
Cedders
 Posté le 04/05/2010 à 15:14 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

... là je comprend pas trop ce que tu aimerais et/ou ce qui ne marche pas.

Que l'on soit sur la même longueur d'onde. Le code qui suit "//----------changer la couleur des liens actif " ne modifie pas ton menu et donc le style ... il l'affiche si tu vois ce que je veux dire.

Donc si tu veux que le menu soit dans la div menu2 tu dois insérer le code à l'intérieur et non à la fin.

Publicité
t671
 Posté le 04/05/2010 à 17:28 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Voilà ce que j'ai donc fait :

<?php
echo '<div class="frame">';

$pages=array(
'accueil'=>'accueil_FR.htm',
'manifestations'=>'manifestations_FR.php',
'choristes'=>'choristes_FR.php',
'europe'=>'europe_FR.php',
'affiches'=>'affiches_FR.php',
'histo'=>'histo_FR.htm',
'repertoire'=>'repertoire_FR.htm',
'alb_photos'=>'alb_photos_FR.php',
'videos'=>'videos_FR.php',
'cd'=>'cd_FR.php',
'livredor'=>'livredor_FR.php',
'liens'=>'liens_FR.php',

'contact'=>'contact_FR.htm',
);

if(isset($_GET['page']) && array_key_exists($_GET['page'],$pages))
include $pages[$_GET['page']];
else
include 'accueil_FR.htm';
echo '</div>';

echo '<div class="menu2">';
foreach($pages as $cle => $value)
{
if(isset($_GET['page']) AND $_GET['page'] == $cle) // Page a afficher = Lien a afficher
$class = "courant";
else
$class = "bouton";

echo "<li><a class=\"".$class."\"href=\"index_FR.php?page=".$cle."\">".$cle."</a></li>\n"; // affichage menu
echo '</div>';

}
?>

Et à l'affichage, j'ai un rectangle à droite sans rien dedans (pas d'écriture des lignes du menu), alors que les caractéristiques sont bien précisées dans les "class" menu2, bouton et courant du css :

.menu2 {
float : left;
margin-left: 5px;
margin-top: 90px;
width: 120px;
height: 158px;
}
.bouton {
display: block;
width: 200px;
height: 20px;
background-color: #C0C0C0;
text-align: center;
font-family: Comic sans MS, verdana, arial, helvetica, sans-serif;
font-size: 15px;
font-weight: bold;
color: black;
text-decoration: none;
}
.bouton:hover {
background-color: #969696;
color: black;
text-decoration: underline;
}
.courant {
display: block;
width: 200px;
height: 20px;
background-color: red;
text-align: center;
font-family: Comic sans MS, verdana, arial, helvetica, sans-serif;
font-size: 15px;
font-weight: bold;
color: black;
text-decoration: none;
}

Au milieu, je retrouve ma page d'accueil.

A gauche, j'ai le bouton "accueil" (avec la "class" courant). Pourquoi ? Qu'est ce qu'il fait là ?

Si je clic sur un lien du menu, la page demandée s'affiche, mais le menu disparait (div menu2). Donc, à chaque changement de page, je devrais recharger toute la page, et non uniquement la div frame, comme tel était mon choix de départ.

Heuuuuu ..... j'ai du mal à m'y retrouver .....

Cedders
 Posté le 04/05/2010 à 18:15 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Oui tu recharges effectivement toute la page.

Si tu ne veux pas recharger la page alors il te faut passer par du Javascript ...

Sinon pour ton problème. Il te faut faire attention avec les balises car dans mon exemple je t'ai juste mis la façon de gérer le lien actif.

Il te faut rajouter les balises

    avant le menu et

après le menu.

Désolé, j'aurais dû te le faire remarqué de suite ou alors tout faire alors regarde bien ton code source et corrige les éventuels erreurs.

EDIT : Tu as mis le </div> de menu2 dans la boucle qui affiche le menu donc seul le premier element du tableau est dans menu2.



Modifié par Cedders le 04/05/2010 18:20
t671
 Posté le 05/05/2010 à 13:16 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Bonjour Cedders,

Je pense donc tenter de passer par du javascript .... !

Mais en y repensant, ta solution en php pourrait être adaptée sans avoir à recharger entièrement la page, mais uniquement la div frame, en testant un pointeur qui prend la valeur de la page affichée .... ??? Quand le pointeur change, le lien associé prend la valeur "class courant", et le précédent "class bouton" !

J'ai les idées, mais pour l'écrire, c'est autre chose ....

Cedders
 Posté le 05/05/2010 à 14:31 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

C'est comme tu veux. Moi pour être franc j'aime pas trop le javascript et puis il y a toujours le soucis des utilisateurs qui le désactivent.

Donc ton site ne peux pas se reposer uniquement sur le javascript tu dois avoir une alternative.

On est d'accord qu'avec ta structure actuel toute la page est rechargée mais qu'elle est le problème à cela ? La page étant dans le cache, seul ce qui ichange serait réellement chargé donc ce n'est pas nécessairement "lourd" pour l'utilisateur.

Si c'est à cause du problème d'affichage de ton menu, regarde bien mon edit car le problème doit venir d'ici est après tout sera ok normalement. Dans le cas contraire regarde le code source de la page ou utilise firebug si tu es sous firefox.



Modifié par Cedders le 05/05/2010 14:32
t671
 Posté le 06/05/2010 à 12:21 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Je suis d'accord avec toi pour le Javascript. Je n'aime pas trop ça non plus !!!!

Si dans mon script j'écris la div_frame puis la div_menu2, je retrouve mon menu à gauche, alors que je le veux à droite.

Si j'écris ma div_menu2 puis ma div_frame, la première n'est pas reconnue, ce qui est normal (Warning: Invalid argument supplied for foreach() in ..... ).

Je n'arrive donc pas à passer mon menu à droite !!!!

Et le résultat obtenu, en tant que rechargement des pages, aurait pu s'écrire simplement en html , non ?

N'est-il pas possible, si j'écris ce qui suit, de tester la valeur de la page,et si la page à la valeur A, le bouton associé s'affichera avec la class A' ?

<div class="menu2">
<a class="bouton" href="index_FR.php?page=accueil">Qui sommes nous</a>
<a class="bouton" href="index_FR.php?page=manifestations">Nos prochaines sorties</a>
<a class="bouton" href="index_FR.php?page=choristes">Choristes</a> .............
</div>

<div class="frame">
<?php

$pages=array(
'manifestations'=>'manifestations_FR.php',
'choristes'=>'choristes_FR.php',
'accueil'=>'accueil_FR.htm',..........

);
if(isset($_GET['page']) && array_key_exists($_GET['page'],$pages))
include $pages[$_GET['page']];
else
include 'accueil_FR.htm';
?>

Merci

Cedders
 Posté le 06/05/2010 à 12:45 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Bonjour,

Concernant le rechargement. Je pense pas que tu peux le faire uniquement avec du HTML. Surtout que tes liens sont en PHP donc autant en profiter pour ce servir de la valeur que tu passes dans l'url.

Un autre point, comme tu utilises de toute façon le php, affiche ton menu avec une boucle foreach comme dans l'exemple que je t'avait fait avant.

Pour ta div menu 2 qui s'aligne à gauche je cite ton code CSS :

.menu2 {
float : left;
margin-left: 5px;
margin-top: 90px;
width: 120px;
height: 158px;
}

C'est float : right pour aligner à droite ;)

Si ça ne marche pas, met ton code complet ici (pour l'index_FR et le CSS) et je te ferais un exemple plus concret qui devrait fonctionner. Tu peux aussi zipper tes fichiers et uploader le zip pour que je le télécharge (pas besoin de recréer les pages de tout ton site). La solution en php est bonne à mon avis, il ne faut pa ste mettre de barrière car ça ne marche pas.

Moi ça fait 2 semaines que je pète un plomb sur le développement d'un editeur wysiwyg cross-browser basique ^^

t671
 Posté le 06/05/2010 à 16:09 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Salut Cedders,

Pour la div menu2, je veux bien l'aligner à gauche. Donc le "float : left;" est correct. Mais, elle s'aligne à droite ????? J'ai confondu dans mon post précédent .... désolé !

C'est sympa de ta part de vouloir m'aider, et tu peux alors télécharger le zip ici

Cedders
 Posté le 06/05/2010 à 16:42 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

C'est normal. Cette histoire de menu j'y avais déjà réfléchi sans vraiment trouver la solution et puis là j'en ai trouvé une donc pouvoir aider sur des projets c'est toujours bénéfiques ;)

Je regarde ton zip ;)

EDIT: Je viens de regardé ton CSS et index_FR.php : Tu positionnes tes div en "relative" donc elles vont s'afficher dans l'ordre dans lequel elle sont insérées. menu2 est alignée à droite mais à la suite de frame donc si tu veux l'avoir tout é droite, soit avant frame, tu dois insérer le menu avant. En appliquant ceci tu veras que cela marche mais que menu2 déborde sur frame. A toi de revoir ton CSS pour que cela se combine bien.

Tu peux commencé par supprimer les div inutiles. des balises <p> suffisent pour ton titre car elles se comporte comme des div. Conservent ces div pour un découpage du site (header, contenu, footer, ...).

Je vais aussi essayer de retoucher ton CSS pour que cela fonctionne.



Modifié par Cedders le 06/05/2010 16:55
Cedders
 Posté le 07/05/2010 à 11:50 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Elle fait quelle dimension ton image du logo ?

Car elle n'est pas dans le zip ...

Publicité
Pages : [1] 2 3 ... Fin
Page 1 sur 3 [Fin]

Vous devez être connecté pour participer à la discussion.
Cliquez ici pour vous identifier.

Vous n'avez pas de compte ? Créez-en un gratuitement !
Recevoir PC Astuces par e-mail


La Lettre quotidienne +226 000 inscrits
Avec l'actu, des logiciels, des applis, des astuces, des bons plans, ...

Les bonnes affaires
Une fois par semaine, un récap des meilleurs offres.

Les fonds d'écran
De jolies photos pour personnaliser votre bureau. Une fois par semaine.

Les nouveaux Bons Plans
Des notifications pour ne pas rater les bons plans publiés sur le site.

Les bons plans du moment PC Astuces

Tous les Bons Plans
176,66 €Disque dur portable externe WD Black P10 Game Drive 8 To à 176,66 €
Valable jusqu'au 19 Janvier

Amazon Allemagne fait une promotion sur le disque dur externe WD Black P10 Game Drive 8 To qui passe à 169,99 € grâce à un coupon de réduction automatiquement appliqué dans le panier. Comptez 6,67 € pour la livraison en France soit un total de 176,66 € livré. On le trouve ailleurs à partir de 200 €. Ce disque dur USB 3.1 est dédié pour gérer et transporter votre bibliothèque de jeux sur PC ou sur console.

Vous pouvez utiliser votre compte Amazon France sur Amazon Allemagne et il n'y a pas de douane.


> Voir l'offre
12,90 €Windows 10 Pro 32/64 bits OEM à 12,90 €
Valable jusqu'au 19 Janvier

Le vendeur sérieux Digital FR propose sur Amazon la clé d'activation pour Windows 10 professionnel en français 32 bits / 64 bits à 12,90 €. Cette clé livrée par email fonctionne avec l'outil d'installation et de création de support de Microsoft que vous pouvez télécharger ici ou directement avec l'ISO de Windows 10 Pro. De quoi installer légalement Windows 10 Pro sur un PC. Pour en savoir plus sur l'achat et l'installation d'une clé OEM de Windows 10, suivez les indications de notre dossier pratique.


> Voir l'offre
179,99 €Ecran 24 pouces incurvé Iiyama G2466HSU-B1 (FullHD, IPS, 1 ms, 165 Hz) à 179,99 €
Valable jusqu'au 20 Janvier

Darty fait une promotion sur l'écran incurvé 24 pouces Iiyama G2466HSU-B1 qui passe à 179,99 € alors qu'on le trouve ailleurs à partir de 200 €. Cet écran à bord fin possède une dalle IPS FullHD (1920x1080px), offre un temps de réponse de 1 ms, une vitesse de rafraichissement de 165 Hz. Il est compatible FreeSync. Il possède 2 ports HDMI et un port DP. Avec le code DARTY15 vous pourrez également récupérer une carte cadeau de 15 € valable sur vos prochains achats.


> Voir l'offre

Sujets relatifs
Changer couleur liens dans un block
Le lecteur peut-il changer la couleur d'une page ?
Mise en evidence dans le menu du lien actif de...
Menu deroulant javscript plusieurs couleur
Changer la couleur d'arrière plan
Changer la couleur text/javascript
Liens dans menu déroulant ????
Fireworks menu liens
liens sous menu ???????
menu js et liens
Plus de sujets relatifs à changer la couleur des liens menu actif
 > Tous les forums > Forum Forum des Webmasters