Menu à onglets sans jQuery

**Wachter** · 26/06/2014, 18h35

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.

**rodolphebrd** · 26/06/2014, 19h04

Bonjour,

Consulter la galerie CSS : http://css.developpez.com/galerie/?p...orizontaux#MH2

**Wachter** · 26/06/2014, 19h09

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/

**NoSmoking** · 26/06/2014, 22h39

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

exemple minimaliste

Code :

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

**Bovino** · 27/06/2014, 08h19

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

**CCyrillus** · 27/06/2014, 12h29

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 .

Menu à onglets sans jQuery

CSS

Vue hybride

Discussions similaires

Partager

Partager