Un volet coulissant en CSS3 grâce à transition et :target

Cet article a 3 années. Il commence à dater, lisez-le donc en gardant son âge en tête ! Merci

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

Démonstration du volet en train de s'ouvrir.

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 !

Vous voulez encourager l'auteur ?

Don PayPalflattr this!

Laissez-moi un petit mail pour que je puisse vous remercier.

12 commentaires sur “Un volet coulissant en CSS3 grâce à transition et :target

  1. Arnaud dit :
    19 août 2011

    Merci pour le lien, ça va me servir :)

  2. JHN Design dit :
    4 octobre 2011

    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.

    • Geoffrey dit :
      4 octobre 2011

      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.

  3. Elegenza dit :
    19 décembre 2011

    Bonjour, je voudrai mettre un volet coulissant sur mon site http://www.elegenza.com

    Pouvez-vous m’aider ?

    • Geoffrey dit :
      19 décembre 2011

      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.

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

  5. Lopes V dit :
    2 décembre 2013

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

    • Geoffrey dit :
      2 décembre 2013

      Bonjour,
      Globalement il suffit de remplacer toutes les occurrences de « left » par « right » dans la CSS :)

      Bon courage.

      • Christophe dit :
        31 mars 2014

        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.

      • Christophe dit :
        31 mars 2014

        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!

        • Geoffrey dit :
          31 mars 2014

          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.

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 "&lt;" et "&gt;" 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. Utilisez CodePen.io à défaut d'une page web.

 
Le studio web