Titre: Comment garder le focus sur pseudo classe a:active ?
Posté par: kaly.joly le le 19-02-2008 a 12:09:38
Bonjour,
Je cherche désespérement à créer un menu à onglet en CSS.
J'utilise pour l'instant les pseudo classes a:link, a:visited, a:hover et a:active.
l'ensemble fonctionne, à l'exception du fait que je souhaite que mon onglet (donc mon lien), une fois cliqué, reste sur l'apparence que je lui ai attribué avec a:active, et ce jusqu'à ce que je clique sur un autre onglet (qui devrait se comporter de la même manière). :(
Malheureusement, a:active correspondant au click de la souris, mais perd le focus dès que le click ets relaché. C'est alors a:visited qui prends le relai...
J'ai essayé avec un script Javascrit que j'ai glanné sur le web, qui garde bien l'aspect de mon onglet actif, mais qui rend le href son effet (plus aucun lien actif en terme de destination ! le comble pour un menu...) :-\
Ce problème est réellement bloquant pour moi, je ne sais plus quoi faire... bawling
S'il vous plait ! :'( |
Titre: Re:Comment garder le focus sur pseudo classe a:active ?
Posté par: Shain le le 20-02-2008 a 09:40:11
Hello, en fait quand tu as cliqué sur ton lien tu changes de page, c'est bien ca ?
Si oui tu n'as pas d'autres moyen (à ma connaissance) de gérer ta solution de menu en PHP. Il te suffit alors de faire un test pour savoir sur quelle page tu te trouves et d'afficher un class="menuActif" sur l'élément de ton menu.
Est-ce que je réponds à ta question ? |
Titre: Re:Comment garder le focus sur pseudo classe a:active ?
Posté par: kaly.joly le le 20-02-2008 a 10:05:31
Bonjour,
merci de me répondre.
en fait, j'utilise déjà Php.
tu peux trouver les sources :
http://www.montaudran.org/__v2/accueil.php (http://www.montaudran.org/__v2/accueil.php)
http://www.montaudran.org/__v2/css/styles_2.css (http://www.montaudran.org/__v2/css/styles_2.css)
http://www.montaudran.org/__v2/js/active.js (http://www.montaudran.org/__v2/js/active.js)
comment je procède :
la page d'acceuil est faite de div, celui qui me préoccupe est le deuxième, qui contient le menu à onglet.
- Chaque onglet comporte un lien qui envoi une nouvelle page dans le troisième div de la page d'accueil.
- Les onglets à l'état normal sont issu d'une seule image en background appelé par le CSS.
- Les roll-overs de ces onglets correspondent à une liste, le CSS appelle une image en background avec la pseudo classe a:hover.
- Les onglets à l'état actif sont supportés par la même liste, une autre image en background et la pseudo classe a:active.
- Le script js doit permettre de changer la classe du lien actif dans la liste par le biais de son id, et ce faisant, de changer l'image en background.
J'espère que j'ai pu être assez claire, je débute...
Merci ! :) |
Titre: Re:Comment garder le focus sur pseudo classe a:active ?
Posté par: hztm le le 20-02-2008 a 13:58:48
Salut,
Quand on clique sur le premier lien, on a "page=histoire" dans la barre d'adresse.
Donc, quand tu affiches tes onglets, tu dois faire un test sur chacun selon la variable page.
Code:
<? if ($_GET['page']=="histoire") {
La tu affiches le bouton comme quand la souris est dessus
}
else {
Là le bouton normal.
}
?>
|
|
Bien sur c'est à faire pour chaque bouton.
PS : Tu as un petit décalage vers la droite sur les deux onglets de droite quand on passe la souris dessus. |
Titre: Re:Comment garder le focus sur pseudo classe a:active ?
Posté par: Shain le le 20-02-2008 a 14:11:53
Hello, tu peux faire très simple :
<a href="accueil.php?page=histoire" id="histoire" class="lien" onclick="this.className='clike';"></a> |
Titre: Re:Comment garder le focus sur pseudo classe a:active ?
Posté par: hztm le le 20-02-2008 a 14:31:29
| Oui mais sur la page d'après, l'onglet ne va pas rester "sorti" |
Titre: Re:Comment garder le focus sur pseudo classe a:active ?
Posté par: Shain le le 20-02-2008 a 14:34:44
| avec la technique de hztm c'est bon normalement. |
Titre: Re:Comment garder le focus sur pseudo classe a:active ?
Posté par: hztm le le 20-02-2008 a 19:41:34
| Bah ouais j'ai toujours raison ;D |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|