Menu dynamique CSS3

Wyllou
Les bases HTML/CSS

Bonjour à tous.
J'ai fais un menu dynamique pour mon site en CSS3 avec l'effet de transition qui fonctionne très bien, mais j'aurai voulu que lorsque je clique sur un menu le css de l'effet reste sur le menu actif.
J'ai utilisé l'action :focus, qui fonctionne, mais lorsque je clique ailleurs, il perd le focus et du coup le menu n'a plus les propriétés CSS définies.

Vous pouvez voir ça sur www.nuapp.fr
Le menu du haut.

L'idée c'est de ne pas remettre le titre du menu dans la page, mais de l'indiqué en restant sélectionné.

Est-ce possible en CSS3 ou dois-je passer par du JS obligatoirement?

Merci d'avance.

13 réponses

Grafikart
Réponse acceptée

Va falloir faire un brin de Javascript :D

jaa09
Réponse acceptée

En faite je fais une section qui comportera:
-div ou dedans je mets:
-input radio
-label (qui servira de bouton et ou sera placer le nom du menu)
-article (pour le contenu)

A mon label je met un for="1" par exemple pour appeler mon input radio qui as un id 1

Ensuite dans mon css je lui dis que quand l'input est checked sa modifie l'article qui viens juste après.

Ensuite suffit de dubliquer la div en changeant le for et l'id
Important: a mon 1er input je lui precise qu'il est cheched
Je sais pas si je suis clair, je suis pas très bon en explication...

jaa09
Réponse acceptée

tu as oublier le "+" vu que le label est directement precedee du input
input[type=radio] + label

Un lien pour t'aider sur les selecteurs
Selecteur css3

Wyllou
Auteur

Et bien je viens de constater que ce focus fonctionne avec IE et FF mais pas Chrome :'(

Wyllou
Auteur

Arf mince, je pensais pouvoir contourner le JS. Bon ok, je me lance la dedans.
Merci!

jaa09

il y a une technique a cela.
Moi je fonctionne avec des input radio que je met en display:none;

Exemple:
http://templates-webspell.craym.eu/css3/news/

http://templates-webspell.craym.eu/css3/slideshow/

Wyllou
Auteur

Intéressant.
Tu fais comment alors?
C'est quoi ta démarche?

Wyllou
Auteur

Ah ok, tu te sers du label pour checker le radio, et du coup du affecte un CSS sur radio:checked label.
C'est ça?

jaa09

tout a fait

Wyllou
Auteur

Ok.
Merci pour l'aide. Je trouve que c'est une superbe méthode!
Thks!

jaa09

avec plaisir :)

Wyllou
Auteur

Désolé, je reviens, mais je n'arrive pas à attraper le label du radio checked en CSS. Je fais input[type="radio"]:checked label mais ça fonctionne pas.
jaa09 pourrais m'aider?

Wyllou
Auteur

Ok merci.
Mon souci venait aussi du fait que j'avais incorporé des balise <a> qui rester de mon ancien code avant le label. Ce qui au final n'est pas utile.
Grand merci!