Si vous avez suivi le travail effectué par ZURB avec Foundation for Apps, vous avez peut-être remarqué que la plupart de leurs modèles de démonstration comportent de jolis panneaux déroulants..

Ce sont en fait assez étonnants, en particulier pour les applications hybrides. Rappelez-vous à quel point les montures étaient pratiques avant de perdre leur style Eh bien, maintenant vous pouvez avoir cette fonctionnalité, mais de manière réactive.

Après quelques retouches, j'ai pu extraire la fonctionnalité de base de ces panneaux et c'est ce que nous allons apprendre à recréer aujourd'hui..

1. Commencer au début

Nous allons commencer avec quelques balises assez basiques. La partie la plus importante est un conteneur d'emballage pour envelopper votre page entière.

 
  
 
Contenu
 
 lèvres… 
 
 
 

2. CSS

Les choses deviennent intéressantes dans le CSS assez rapidement. Tout d'abord, nous voulons notre html et corps sélecteurs d'être hauteur: 100%. Nous faisons cela pour mettre en place la .emballage élément que nous allons définir hauteur: 100vh. Avec l'unité vh, nous souhaitons que cette application prenne toute la hauteur de la fenêtre d'affichage afin que les éléments qu'elle contient soient obligés de faire défiler. 

Nous allons aussi définir .emballage être affichage: flex afin que nous puissions donner aux enfants des éléments fléchir propriété.

html, corps hauteur: 100%;  .wrap height: 100vh; affichage: flex; 

Remarque: Au lieu de vous rappeler les différentes syntaxes de Flexbox au fil des années, essayez d’utiliser Autoprefixer. Ensuite, il vous suffit d’utiliser la syntaxe de spécification W3C et il fera le reste pour prendre en charge autant de navigateurs que possible..

3. Devenir flexible

Maintenant que cette "coque" est configurée, nous pouvons commencer à y intégrer des éléments flexibles très standard. La seule astuce consiste à définir ces éléments enfants sur débordement-y: faire défiler appliquer une barre de défilement.

main flex: 1; affichage: flex;  côté, article overflow-y: scroll; rembourrage: 2em;  de côté flex: 1;  article flex: 2; 

4. Devenir réactif

Allons un peu plus loin et rendons notre site réactif en empilant la barre latérale au-dessus de la zone de contenu pour les appareils plus petits. C'est aussi simple que d'ajouter une règle CSS dans une requête multimédia..

@media (max-width: 800px) main flex-direction: column; 

Conclusion

Ces étapes devraient être suffisantes pour vous permettre de commencer à utiliser cette technique sur vos sites Web. Maintenant que je sais comment faire, je trouve toutes sortes d'endroits où placer ces panneaux défilables.

Pour voir cela en action correctement, consultez la démo sur Codepen. Jetez également un coup d’œil à la nouvelle conception officieuse du stylet que j’ai construite en utilisant cette technique..

Comment vous voyez-vous l'utiliser?