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.
Bonne lecture ! 😉
PS : merci à Raphaël pour la base de travail !
Liens utiles et sources
Partager la publication "Un volet coulissant en CSS3 grâce à transition et :target"
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 😉
Bonjour,
Je souhaiterai mettre le volet coulissant côté droit et je galère…
Est-ce que vous pouvez me dire ce qu’il faut changer dans le css pour qu’il apparaisse à droite ?
Merci 😉
Bonjour,
Globalement il suffit de remplacer toutes les occurrences de « left » par « right » dans la CSS 🙂
Bon courage.
Bonjour désolé de déterrer un sujet de 2013, mais ce tuto est super intéressant pour moi qui débute.
J’ai essayé de mettre ce volet à droite, et la transition « ease-in »(qui ouvre lentement) ne fonctionne pas à l’ouverture… une piste? (elle ne fonctionne qu’à la fermeture)
Merci.
Apparemment un bout de la solution est là (http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap2), mais ça dépasse mes maigres capacités 🙁
Je comprend le principe, mais pour l’appliquer c’est autre chose!
Bonsoir. Oui en effet vous vous attaquez à du lourd pour débuter ! 🙂
Le problème avec ces deux techniques combinées c’est que la structure HTML environnante est très importante.
Utilisez CodePen.io si vous voulez que l’on débogue ensemble.
Bonne soirée.
Bonjour Geoffrey et merci pour ce tuto niquel.
J’ai un tout petit soucis : dès que je descends le petit pannonceau « ouvrir/fermer » en augmentant le premier top, la zone cliquable ne suit pas !
Auriez-vous, s’il vous plait une astuce ?
Merci d’avance pour votre aide !
Petite précision: ce problème n’intervient uniquement quand le volet est ouvert. Bizarrement le bouton « ouvrir » est entièrement cliquable alors qu’il a été abaissé aussi !
Merci d’avance pour votre éclairage !