Design : Création de menus de survol en CSS

CSS

Les styles de l’exemple de projet se trouvent dans style.css:

Le premier est le :root bloc, qui contient Variables CSS qui sera utilisé dans le reste du fichier. Les variables sont une puissante fonctionnalité introduite dans CSS niveau 3 qui simplifie considérablement la tâche d’organisation du code CSS. Ici, nous avons une taille de base pour les éléments de navigation comme --nav-size qui définira la hauteur et la largeur d’un menu de navigation fermé sur 12vh(qui représente 12% de la hauteur de la fenêtre). Les couleurs d’arrière-plan des menus sont également définies ici.

le item-fade-in l’animation sera utilisée pour afficher les éléments de menu cachés en définissant leur display propriété à flex et fondre les éléments avec l’opacité.

Ensuite, le body est stylisé, mis à l’échelle à 100% de la hauteur et de la largeur du document et défini pour afficher le contenu horizontalement fléchir récipient. le nav les éléments (les conteneurs racine de chaque menu) sont définis sur --nav-size et de style avec diverses propriétés, et sont également définis comme des conteneurs flexibles pour permettre un espacement approprié des éléments de menu. Noter la transition sur le sélecteur de non-survol de cet élément, ce qui provoquera le retour en douceur de l’élément à son état par défaut (au lieu de simplement revenir immédiatement). le nav > header sélecteur dimensionne l’en-tête du menu --nav-size et flex est à nouveau utilisé, dans ce cas pour centrer le texte à l’intérieur de l’en-tête à la fois horizontalement et verticalement.

Voici où nous commençons à entrer dans la logique de survol du menu. Le sélecteur nav:hover provoque la nav l’élément, lorsque vous le survolez, pour modifier la couleur et la hauteur de l’arrière-plan, en utilisant 120ms et 240ms transitions linéaires respectivement. Cela montre comment plusieurs transitions peuvent être chaînées à l’intérieur d’une seule règle CSS. Ensuite, les deux premiers menus sont sélectionnés à l’aide du nième enfant pseudo-classe, pour étendre leurs transitions avec height ce qui entraînera l’ouverture du menu verticalement lorsqu’il est activé. Les éléments du menu sont contrôlés à l’aide nav > div et les sélecteurs associés, et ces éléments sont également définis pour centrer leur propre contenu à l’aide de flex et répondre aux événements de survol en appliquant des transitions et des animations.

Le premier menu est simple et tombe simplement au survol, révélant une liste d’éléments qui changeront chacun de couleur d’arrière-plan lorsqu’ils seront survolés. Le deuxième menu est un peu plus complexe et fournit une liste de sous-menus à expansion horizontale lorsqu’il est ouvert. Ceci est réalisé de la même manière que l’effet de menu de base, en sélectionnant plus profondément dans le menu et en appliquant des effets de survol pour afficher / masquer les éléments de sous-menu en utilisant les mêmes principes.

Le troisième menu adopte une approche complètement différente et ne change pas de taille lorsqu’il est survolé, mais devient transparent et applique des effets aux éléments enfants qui provoquent leur rendu dans un cercle autour du menu. Cet effet cool est obtenu en redimensionnant les éléments de menu à la même taille que le parent, en utilisant position: fixed pour les empiler verticalement les uns sur les autres, en faisant pivoter chaque élément d’un facteur de 90 degrés pour encercler le menu et en appliquant transform: translateX(var(--nav-size)) à l’enfant span élément qui va déplacer la span par une «unité de taille nav». Les icônes emoji sont ensuite tournées si nécessaire, pour les réorienter dans la bonne direction (car la rotation précédente en place certaines latéralement, à l’envers, etc.).