IHM dans Play! [AJAX peut être ?]

Bonjour à tous :)

J'attaque depuis quelques semaines le Framework Play! Après divers tutoriels j'aimerais concevoir mon site perso, avec intégration d'une partie "blog like" à la Yabe, une partie portfolio, et une partie about avec présentation, dl de Cv en pdf, xml, html, etc..

Bref, ma question est la suivante :

D'apres l'image consultable [Pièce jointe 91004], j'aimerais que lors d'un hover (ou autre action) sur l'un des éléments de navigation le 'curseur/pointeur' gris en dessous, se déplace également au centre du lien intéressé.

J'ai essayé de "variabiliser" mon css via groovy, mais sans succès... si vous avez une idée, je suis preneur :)

Merci d'avance !

Bonjour,

Je n'ai pas trop compris ce que tu cherches à faire... Tu veux dire que si le curseur arrive au dessus de "About me" par exemple, alors il va automatiquement se déplacer au milieu de ce lien ?

Pourquoi voudrais-tu faire cela ? Ca me parait assez étrange et risque plus de déranger l'utilisateur que de l'aider...

C'est effectivement ça.

Tu pense que cela pourrait au contraire déstabiliser l'utilisateur ?
Supposons alors que j'attends que l'utilisateur se trouve sur cette page pour déplacer le curseur sur au centre du lien "about me" ?

Que me conseillerais tu d'assez propre pour signaler à l'utilisateur qu'il change bien de section ?

Merci encore :)

Cordialement,

Julien ;)

Ah mazette, je n'avais pas compris ! Je pensais que tu parlais du curseur de la souris :oops:
Ok, là c'est plus clair...

C'est effectivement comme sur le site de Play! lui même. Ils utilisent du CSS pour faire cela. En gros, chaque élément du menu est une balise <li>, et seule la sélectionnée dispose de la classe CSS selected. Ils lui donnent ensuite une classe CSS en précisant le :after, comme ceci :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

#menu .selected a:after { border-color: -moz-use-text-color transparent #8ADC92; border-style: none solid solid; border-width: medium 0.8em 0.8em; content: " ."; display: block; height: 0; left: 50%; margin-left: -0.8em; margin-right: auto; margin-top: 10px; position: absolute; text-indent: -99em; width: 1px;     }

---

ps: si cela en répond pas à ta question, je te suggère plutôt d'aller sur le forum CSS, tu auras plus de réponses qu'ici (ce n'est pas lié directement à Play! cela).