Discussion :

[mims1664]

Bonjour,

Je suis à la recherche d'un script permettant d'avoir plusieurs onglets et sans recharge de la page au survol de souris le contenu change.

Comme ce script :
http://www.johnstyle.fr/langage/java...ts-facilement/

Mais sans Javascript tout en CSS.

merci de votre aide.

[tzilliox]

Bonjour mims1664,

je ne pense pas que ce soit possible.

Je t'explique, en CSS tu peux gérer ce principe de menu avec le sélecteur ":hover". Ainsi lorsque tu passeras ta souris au-dessus de ton menu, tu pourras associer un style en particulier à lui ou à ses fils.
Il faudrait donc que chaque contenu (qui est largement plus grand que l'onglet) soit un fils de son menu respectif pour pouvoir l'afficher au survol de la souris. Ce qui me paraît très moche et difficile, voir impossible.

Pourquoi ne veux-tu pas utiliser de javascript ?

Thomas.

[adiGuba]

Salut,


Si tu veux quelque chose de portable tu es obligé d'utiliser du JavaScript !
Avec JQuery tu peux faire cela assez facilement...


Sinon il y a bien une solution utilisant les selecteurs des CSS3 : Un système d'onglet en CSS pure, mais cela ne fonctionnera pas sur tous les navigateurs...


a++

[tzilliox]

Bonjour adiGuba,

Il est sympa ce menu à onglet
J'avais oublié le selecteur :target.

Connais-tu d'autres scripts qui utiliserais ce selecteurs ?

Merci,
Thomas.

[adiGuba]

Connais-tu d'autres scripts qui utiliserais ce selecteurs ?

Il n'y a pas de scripts mais uniquement des CSS


Sinon perso j'avais découvert cela via wikipedia, qui "colorise" automatiquement la citation lorsqu'on clique sur un renvoi en bas de page...


Le problème c'est que ce n'est pas supporté par IE, donc l'utilisation est limité à de petits effets...

a++

[tzilliox]

J'ai également vu qu'opéra n'était pas compatible.

Je pense que wikipédia a eu une bonne idée. Le navigateur a tendance à coller l'ancre en haut de l'écran, pourtant notre regarde se fixe par défaut au milieu de la page. C'est donc important d'attirer le regard sur le haut de la page à ce moment-là.

Merci,
Thomas.

[adiGuba]

J'ai également vu qu'opéra n'était pas compatible.

Il l'est dans sa dernière version...

a++

[tzilliox]

Il l'est dans sa dernière version...

a++

Ah d'accord ! Désolé !

J'avais lu que la compatibilité était incomplète avec Opéra 10. Le bug venait des boutons précédent / suivant du navigateur. Ce qui est quand même dommage sur un menu qui gère le changement de page avec ce sélecteur.

Bonne soirée,
Thomas.

[adiGuba]

J'avais lu que la compatibilité était incomplète avec Opéra 10. Le bug venait des boutons précédent / suivant du navigateur. Ce qui est quand même dommage sur un menu qui gère le changement de page avec ce sélecteur.

En fait tu as raison

Je croyais que tu te basait sur mon billet, mais il datait de 2007 et à l'époque Opera ne le gérait pas encore...

J'avais testé vite-fait avec Opera 10 et cela semblait marché correctement, mais effectivement les boutons précédent/suivant sont buggé...


a++

[mims1664]

Salut,
Si tu veux quelque chose de portable tu es obligé d'utiliser du JavaScript !
Avec JQuery tu peux faire cela assez facilement...


Sinon il y a bien une solution utilisant les selecteurs des CSS3 : Un système d'onglet en CSS pure, mais cela ne fonctionnera pas sur tous les navigateurs...


a++

Ok donc je vais essayer en Javascript avec JQUERY, as tu un exemples sous la main sur lequel je pourrais m'appuyer ?

[tzilliox]

Bonsoir mims1664 !

Si tu ne veux pas refaire la roue, tu peux utiliser domtab. Il est léger et le contenu de tes onglets est lisible même avec le javascript désactivé.

Si tu veux apprendre à le faire toi-même. Voici un tutoriel pédagogique pour faire un menu à onglet avec jquery.

A toi de choisir,
Thomas.

[mims1664]

Super Thomas !

Parfait c'est exactement ce que je recherche !

Ca va me simplifier les choses ....

Merci beaucoup !

[tzilliox]

De rien mims1664 !

Si tu n'as plus de questions, tu peux tagguer cette conversation comme résolu ! Il y a un bouton en bas de la conversation pour ça

Bon courage pour la suite,
Thomas.