Généralement, les développeurs Web utilisent JavaScript pour créer des animations de page dynamiques. Les menus cachés et la sous-navigation ne sont que quelques exemples de l'utilisation de ces techniques sur un site Web en direct. Grâce à l'ajout de transitions CSS3, nous pouvons maintenant imiter ces animations, sans JavaScript.
Dans ce tutoriel, je veux montrer comment créer une barre de contenu cachée interne qui glisse vers le bas lors du survol. Vous pouvez l'insérer dans votre en-tête, votre pied de page ou même quelque part dans le contenu de la page. C'est une technique très flexible qui ne nécessite pas beaucoup de temps pour travailler. De plus, tous les navigateurs Web modernes prendront en charge les effets de transition CSS3.
Live Demo - Télécharger le code source
Créer le HTML
La page principale index.html est très simple et il n’est pas nécessaire d’inclure d’autres bibliothèques. jQuery n'est même pas nécessaire sauf si vous souhaitez utiliser d'autres plugins. Je vais stocker tous les codes CSS des pages Web principales dans un document appelé styles.css.
Maintenant, pour que la barre de division masquée se développe en survol, il est nécessaire que cette dernière soit imbriquée dans la barre supérieure principale. Chaque fois qu'un utilisateur survole un élément dans jQuery, nous pouvons forcer un autre élément interne à rester ouvert avec lui. Cependant, lors de l'utilisation de transitions CSS3, ils créent immédiatement des événements de survol et des événements de non-survol. Ainsi, dès que l'utilisateur éloigne son curseur de la barre supérieure, la div est immédiatement masquée, sauf si elle est imbriquée à l'intérieur.
J'ai donc créé une nouvelle div avec l'ID #tophiddenbar. Il est niché à l'intérieur #barre du haut En tant qu'élément enfant, il conservera l'état de survol pour tous les éléments. Survoler la barre cachée est maintenant aussi en dehors de #barre du haut et ainsi, les transitions CSS ne se cacheront pas immédiatement avant que vous puissiez lire ou cliquer sur des liens. Je n'ai pas pris la peine d'utiliser une liste non ordonnée pour les liens, mais il est évident que ce serait la meilleure pratique pour créer vos propres sous-navigations HTML.
Document CSS
En règle générale, nous avons les mêmes réinitialisations et styles de document que d'autres tutoriels similaires. Cependant, certaines mises à jour de la #barre du haut élément crucial pour que cela fonctionne. À savoir nous avons besoin du débordement caché propriété pour vous assurer que le contenu supplémentaire ne sera pas affiché après le chargement de la page. Vous devrez utiliser ceci sur votre propre élément conteneur pour que la div masquée ne s'affiche pas au début, puis nous augmentons la valeur de hauteur via une transition.
Si vous connaissez les transitions CSS, il ne devrait pas être difficile à comprendre. Fondamentalement, nous définissons une durée pour l'animation, ainsi que les propriétés pour lesquelles nous avons besoin d'effets de transition. Vous n'avez pas besoin d'inclure toutes les réinitialisations CSS, comme je l'ai ajouté ci-dessus. Ils sont simplement importants pour cette démo et peuvent offrir un point de départ alternatif par rapport à d’autres bibliothèques telles que Twitter Bootstrap.
Animation du menu
La propriété de transition réelle sera appliquée à l'élément #topbar puisque nous animons la valeur de hauteur. J'utilise une hauteur fixe de 36px qui augmente pour afficher la div cachée intérieure. Et rappelez-vous qu’au départ, cette div peut s’afficher directement dans l’ordre des pages; elle est uniquement masquée en raison de la propriété de débordement sur le conteneur. #barre du haut élément.
Lorsque vous survolez la barre d’outils supérieure, elle s’étendra jusqu’à 60px en hauteur. C'est assez de place pour montrer notre nouvelle sous-navigation avec des liens vers les pages de Design Shack. Cette conception typique est vraiment facile à intégrer dans tout autre projet que vous avez. Tant que l'arrière-plan peut être allongé verticalement, il peut être utilisé comme élément conteneur.
Les propriétés de transition CSS3 ont également deux préfixes de fournisseur utilisés dans les moteurs de rendu Mozilla et Webkit. le linéaire mot-clé est juste un type de style d'animation qui peut être omis pour la valeur par défaut. Cela s'appelle la propriété de la fonction de synchronisation de transition et elle comporte un nombre de valeurs de remplacement que vous pouvez tester. De toute façon, cette animation est parfaite pour tout site Web qui doit garder un peu de contenu caché sur la page.
Live Demo - Télécharger le code source
Conclusion
Vous remarquerez que cette technique implémente quelques techniques CSS plus récentes. Cependant, il n’ya rien de trop déroutant pour les développeurs Web frontaux classiques. Il existe d'autres méthodes possibles telles que l'utilisation de positionnement absolu imbriqué dans un conteneur externe. Avoir les deux divs côte à côte dans le HTML peut parfois perdre le focus lorsque vous survolez l'élément caché, il est donc préférable de les garder imbriqués. N'hésitez pas à partager toute autre pensée ou question à propos de ce tutoriel dans la zone de discussion ci-dessous.