Discussion :

[sarazinj]

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 [], 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 !

[romaintaz]

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...

[sarazinj]

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

[romaintaz]

Ah mazette, je n'avais pas compris ! Je pensais que tu parlais du curseur de la souris
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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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).