Un volet coulissant en CSS3 grâce à transition et :target
Cet article a 642 jours. Il commence à dater, lisez-le donc en gardant son âge en tête ! Merci
publié le Lu 10 507 fois.
Un mois sans article ! Heureusement que les vacances me donnent une bonne excuse Ce court article pour relayer un tutoriel diffusé sur Alsacréations qui vous permettra de créer un volet coulissant grâce à la pseudo-classe :target et à la propriété transition en CSS3.
Dans ce tutoriel divisé en deux grosses étapes, vous apprendrez à faire apparaître un volet tout en transition (de manière animée et fluide).
L’utilisation de :target permet de rendre la fonctionnalité accessible au clavier, et vous permet de partager une URL pourvue de l’ancre permettant d’afficher directement le volet ouvert.
Vous trouverez sur la page du tutoriel les codes et démonstrations nécessaires à la bonne réalisation de cet objet.
Intégrateur et designer web, fondateur de Creative Juiz, il a trouvé marrant et juste de partager ses recherches, astuces et ressources sur les sujets comme CSS, HTML, JavaScript, PHP, WordPress, etc. grâce aux articles que vous trouverez sur ce blog.
Bonne idée et tuto bien foutu, par contre la transition n’est visible qu’à partir FF 4, chrome 4 et safari 3.1 et même pas IE9… ça pose quelques problème de compatibilité même si le volet apparait et disparait, c’est un peu violent sans la transition.
Les transitions ayant été implémentées que récemment, il va de soi que ce tutoriel récemment écrit ne s’adresse qu’aux navigateurs récents et « ambitieux » (si je puis dire). Heureusement, les utilisateurs de Firefox, Chrome et Safari ont une tendance à suivre la mise à jour de leur navigateur. Concernant Microsoft, nous pouvons espérer que leurs prévisions (http://msdn.microsoft.com/en-us/library/windows/apps/hh466377%28v=vs.85%29.aspx) n’aient rien d’illusoire
Bonsoir, Il est possible de vous fournir des pistes ou des corrections sur vos tentatives de réalisations de ce volet. Cependant je communique sur ce blog avant tout pour partager et non concevoir les choses à votre place. L’idée c’est que chacun y mette du sien Autrement je vous invite à me contacter via mon .com Bonne continuation.
quentin dit :
26 décembre 2011
Bonjour, J’ai réalisé le tuto du volet coulissant, cependant, vu que mon site n’est pas en plein écran, le contenu du volet ce voit sur le bandeau gauche, comment puis -je le caché? j’ai essayé avec du javascript, mais lorsque que je met un onclick dans le lien, le volet ne coulisse plus. merci
Il faut bien avoir en tête que l’utilisation de ce code n’a d’intérêt que si l’utilisation de JavaScript n’est pas désirée. Autrement il est possible de réaliser le même type d’effet entièrement en JavaScript : http://jq.creativejuiz.fr/plugins-jquery/slidebox.php Bonnes fêtes
Laisser un commentaire
Certains codes HTML ne sont pas échappés automatiquement. Pour afficher du code dans votre commentaire, merci d'échapper vos chevrons en utilisant "<" et ">" en lieu et place de "<"" et ">".
Il est difficile de proposer un support pour tous les articles de ce blog. En ne fournissant pas un moyen de consulter votre code bogué, vous vous assurez de ne pas avoir de réponse adaptée.
Un mois sans article ! Heureusement que les vacances me donnent une bonne excuse 
Merci pour le lien, ça va me servir
Bonne idée et tuto bien foutu, par contre la transition n’est visible qu’à partir FF 4, chrome 4 et safari 3.1 et même pas IE9… ça pose quelques problème de compatibilité même si le volet apparait et disparait, c’est un peu violent sans la transition.
Bonjour et merci pour votre commentaire,
Les transitions ayant été implémentées que récemment, il va de soi que ce tutoriel récemment écrit ne s’adresse qu’aux navigateurs récents et « ambitieux » (si je puis dire).
Heureusement, les utilisateurs de Firefox, Chrome et Safari ont une tendance à suivre la mise à jour de leur navigateur.
Concernant Microsoft, nous pouvons espérer que leurs prévisions (http://msdn.microsoft.com/en-us/library/windows/apps/hh466377%28v=vs.85%29.aspx) n’aient rien d’illusoire
Bonne soirée.
Bonjour, je voudrai mettre un volet coulissant sur mon site http://www.elegenza.com
Pouvez-vous m’aider ?
Bonsoir,
Il est possible de vous fournir des pistes ou des corrections sur vos tentatives de réalisations de ce volet.
Cependant je communique sur ce blog avant tout pour partager et non concevoir les choses à votre place. L’idée c’est que chacun y mette du sien
Autrement je vous invite à me contacter via mon .com
Bonne continuation.
Bonjour,
J’ai réalisé le tuto du volet coulissant, cependant, vu que mon site n’est pas en plein écran, le contenu du volet ce voit sur le bandeau gauche, comment puis -je le caché? j’ai essayé avec du javascript, mais lorsque que je met un onclick dans le lien, le volet ne coulisse plus. merci
Bonjour,
Il faut bien avoir en tête que l’utilisation de ce code n’a d’intérêt que si l’utilisation de JavaScript n’est pas désirée.
Autrement il est possible de réaliser le même type d’effet entièrement en JavaScript :
http://jq.creativejuiz.fr/plugins-jquery/slidebox.php
Bonnes fêtes