11548 sujets

JavaScript, DOM et API Web HTML5

[CSS/JAVASCRIPT] Liens page

Bonjour,

Pour débuter, je vous l'accorde le titre n'est pas très explicite.
Je dois faire un menu tout simple pour un site.

Le mieux est de vous montrer un exemple :

http://www.louverain.ch/festival/

Bon pour le a:link, a:visited, a:hover ou encore a:focus cela ne me pose pas de problème.
Comme vous pouvez le voir, quand on clic sur un lien, le a:hover (ou a:focus) reste sur la page active.

J'aimerais donc savoir comment faire ça ?
J'ai lu à plusieurs endroits que c'était un mélange de CSS et de Javascript, mais sans véritable succès.

Voilà le code CSS que j'ai pour les liens actuellement :

Code :

.nav a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #000000;
	text-decoration: none;
}
.nav a:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #000000;
	text-decoration: none;
}
.nav a:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
}
.nav a:active {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
}


PS : si je ne suis pas assez clair, il n'y a qu'à me dire, je tenterai de réexpliquer un peu mieux Smiley smile
Bonjour moutonton,

Tout d'abord bienvenue sur ce forum.

Je ne suis pas sur d'avoir bien compris ton problème, mais si il s'agit de supprimer la bordure en pointillé sur un lien actif, il n'est pas recommandé de le faire.
Fait une recherche avec "focus" sur le forum.
Regarde par exemple : Encadrement des liens gênant lors du focus
Modifié par papillon41 (14 Jun 2007 - 09:56)
Non il ne s'agit pas de ça.
Le problème est plutôt du type a:hover ou a:active (peut-être les deux ^^ et oublions a:focus).
Voilà ce que j'aimerais :
Mes liens de mon menu sont en noir en "a:link" et en blanc en "a:hover".
Quand je clic sur un des liens, j'aimerais que le lien reste blanc sur la page nouvellement chargée.
Pour le moment, tu as déclaré : 
p a:link{
...
color: #CC9933; /*jaune*/
...
}
p a:visited{
...
color: #CC9933; /*jaune*/
...
}
p a:active{
...
color: #CC9933; /*jaune*/
...
}
p a:hover{
...
color: #000000; /*noir*/
...
}

Il te faudrait, dans l'ordre :
p a:link{
...
color: #000; /*noir*/
...
}
p a:visited{
...
color: #fff; /*blanc*/
...
}
p a:hover{
...
color: #fff; /*blanc*/
...
}
p a:active{
...
color: #CC9933; /*jaune*/
...
}
Et cela si il n'y a pas de problème d'héritage avec tes ".nav a..."
Modifié par papillon41 (14 Jun 2007 - 19:17)
Pour garde un lien actif c'est a dire que lorsque tu clique sur un lien il reste d'une telle couleur il faut utiliser soit le javascript soit le php.

J'ai créer une fonction en php qui retourne l'url de la page. Ensuite il est facile d'extraire la page en cours.
Par exemple si tu est sur l'url
http://www.monsite.com/balal/test.php?action=test&var=2

ma fonction te retournera test.php.

Il te suffit aprés pour cela de mettre le lien de ton menu en blanc.

C'est trés facile a implémenter. Je n'ai pas le code source en ce moment (je suis au boulot) mais je pourrais le mettre a disposition des ce soir.
Je suis preneur de ton code Smiley cligne

Edit : Ayant eu des nouvelles, il me faudrait le code en Javascript et pas de fonction PHP. J'ai dû réencoder mes pages en HMTL (la misère !)
Modifié par moutonton (19 Jun 2007 - 19:04)
Salut.

Si j'ai bien compris le problème, à savoir marquer la page en cours dans le menu (rien à voir avec le :active), il faut que tu donnes une classe à la bonne ligne. Donc tu auras simplement:
<a class="on">
pour la ligne que tu veux marquer.
Bonjour
Je ne peux pas lire la page pour laquelle tu nous fournis l'URL car le texte est écrit en noir sur fond rouge !!
Peux tu changer tes css ?
Merci beaucoup à <nicolas> pour son aide. En effet avec les class ca va tout seul.

Merci aussi aux autres pour leurs contributions
Sujet clos
Aller à