Menu à onglets sans jQuery

Version imprimable

26/06/2014, 18h35
Wachter

Menu à onglets sans jQuery

Bonjour,

Je souhaite mettre en place un menu horizontal à onglets pour se déplacer dans une seule et même page. J'ai eu l'idée d'utiliser les ancres : quand on clique sur un élément de menu A, on pointera vers l'ancre A et on cachera les autres parties de la page... Est-ce possible en CSS pur sans utiliser jQuery ou autre ?

Merci d'avance. :D
26/06/2014, 19h04
rodolphebrd

Bonjour,

Consulter la galerie CSS : http://css.developpez.com/galerie/?p...orizontaux#MH2
26/06/2014, 19h09
Wachter

J'ai déjà consulté la galerie CSS mais je n'ai pas trouvé mon bonheur. Je voudrais un menu comme celui-ci : http://jqueryui.com/tabs/

Bonjour,
tu peux toujours tirer avantage des pseudo-classe :active, :focus pour faire apparaître/disparaitre les onglets, le reste n'est que CSS :mrgreen:

exemple minimaliste
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>[...]</title> <style> a{ text-decoration:none; } span{ display:none; color:black; } a:focus span{ display:block; } </style> </head> <body> <a href="#">Lien <span>Le texte du SPAN</span> </a> </body> </html>

27/06/2014, 08h19
Bovino

Dans l'absolu, tout est possible :

http://codepen.io/bovino/pen/hBgpm

Mais vouloir se passer de JavaScript pour faire ça reste encore aujourd'hui un non sens : tu seras confronté à la compatibilité des navigateurs avec CSS3 (et il y a beaucoup plus d'utilisateurs non compatibles CSS3 que d'utilisateurs ne disposant pas de JavaScript) et surtout, tu es prisonnier d'une structure HTML très figée et qui sera rapidement contraignante...
27/06/2014, 12h29
CCyrillus

Il y a aussi une piste avec :focus, le selecteur ~ et l'attribut tabindex: exemple http://codepen.io/gc-nomade/pen/JsygA
(là pour la positiion, on est dans l'absolute :) )

Sur le fond, ce genre de chose se pilote via javaScript .
29/06/2014, 10h58
NoSmoking

il existe encore l'approche avec :target, plus satisfaisante que :focus ou :active, mais quoi qu’il arrive pour une compatibilité actuelle maximum cela passera comme déjà dit par le javascript.