Aujourd'hui, nous avons encore un autre projet CSS impressionnant étape par étape pour vous! Cette fois-ci, nous allons créer un menu de navigation verticale extensible extrêmement utile. C'est un excellent moyen de cacher beaucoup de liens dans un espace relativement petit et les animations ajouteront une touche agréable à votre site.
Même si vous êtes un débutant complet, vous devriez pouvoir retirer ceci. Je vous guiderai à chaque étape du processus et expliquerai le fonctionnement de chaque bloc de code afin que vous puissiez implémenter ces mêmes techniques dans les projets futurs et approfondir votre compréhension de CSS. Commençons!
Le concept
Avant de commencer à coder, il est toujours utile de présenter le concept approximatif de ce que vous voulez réaliser afin que vous puissiez comprendre ce que cela va impliquer. L'élément que nous construisons aujourd'hui est un menu de navigation verticale dans une sorte de format accordéon modifié (obtenez un aperçu du produit fini ici).
Comme vous pouvez le constater, les sections du bas sont fermées par défaut et s'ouvrent lorsque vous les passez. Cependant, pour ajouter une variante intéressante, nous inclurons également une section qui reste ouverte tout le temps. Dans la section principale toujours ouverte, nous inclurons un bref message de bienvenue et dans les sections ouvertes, il y aura des sous-sections de liens de navigation.
Maintenant que nous savons très bien où nous allons, commençons par décrire la structure de notre code HTML.
Le HTML
La première chose que nous allons faire est d'ajouter du bon HTML5 pour envelopper le menu. Le nouvel élément nav fournit un conteneur sémantique magnifique pour notre menu.
Voyons maintenant comment notre menu va être structuré. Nous n'allons pas simplement avoir une liste de liens, chaque barre représente un lien avec une zone supplémentaire en dessous. Nous allons les emballer dans un div. Ensuite, dans chaque division, nous aurons besoin d’un lien principal (la barre de couleur) et d’une liste de sous-liens (la zone blanche). En supposant que cet élément sera jeté dans un site qui a déjà un style par défaut, réglons arbitrairement h4 pour le lien principal et une simple liste non ordonnée pour le reste.
Nous pouvons copier, coller et modifier cette section de code pour constituer les différentes parties de notre menu de navigation. Nous avons ici une section Portfolio, À propos et Contact, chacune avec trois sous-liens. Chaque section reçoit la même classe (élément de menu) afin que nous puissions les styler en une fois.
Je voulais d'abord me concentrer sur ces domaines, car ils sont tous identiques, mais rappelez-vous que la section supérieure est en réalité différente, à la fois en termes de fonctionnalité et de contenu. Au lieu de tenir une liste non ordonnée, il contiendra un paragraphe. Nous ajouterons également une classe unique pour la rendre beaucoup plus facile à cibler dans notre CSS.
Sur ce, nous avons déjà fini avec le HTML. Bien qu’il n’ait pas du tout de style, l’aperçu en direct met parfaitement en valeur la hiérarchie de notre menu de navigation. Ici, vous pouvez voir clairement que notre menu commence à prendre forme.
Styles de base
Pour commencer notre style de menu, nous devons établir quelques bases. Commençons par effacer les marges et le remplissage par défaut. Nous écrirons les divs l'un à côté de l'autre pour que tout espacement par défaut du navigateur gâche la mise en page.
Ensuite, nous appliquerons une couleur simple à l'arrière-plan afin que les parties blanches de notre menu se détachent. Ensuite, nous ajouterons quelques styles de police de base et ajouterons une légère ombre au menu. Notez que la marge définie dans le bloc de navigation centre le menu sur la page. Elle sert uniquement à l'affichage et doit être supprimée lorsque vous souhaitez déplacer le menu en place.
Enfin, nous ajouterons des dimensions et une couleur d’arrière-plan aux sélecteurs de navigation et d’éléments de menu. Voici le code résultant:
A ce stade, l'aperçu semble avoir fait plus de mal que de bien, mais ne vous inquiétez pas, il va commencer à paraître spiffy en un rien de temps.
Styles d'en-tête
Il est maintenant temps de styliser nos balises h4 et de les transformer en barres horizontales que nous avons vues dans notre maquette. Pour ce faire, nous avons juste besoin d’un peu de rembourrage et d’une couleur de fond. Pendant que nous sommes ici, nous pouvons aussi commencer à styliser la typographie. Nous héritons de la famille de polices que nous avons configurée auparavant, nous n'avons donc pas besoin de la ressaisir. Au lieu de cela, nous devons simplement définir une taille et un poids.
Comme vous pouvez le voir dans l'image ci-dessous, nos styles de lien sont toujours en-deçà de certains des styles de type que nous avons définis ici. Nous devrons donc les corriger ensuite.
Liens d'en-tête
De toute évidence, le lien bleu n'est pas bon, nous devons donc changer cela en blanc. Nous voulons également laisser tomber n'importe quelle décoration de texte (le soulignement). Nous pourrions maintenant nous arrêter ici, mais le comportement par défaut serait que seul le texte est cliquable et non la barre entière, ce qui n’est pas idéal. Pour que la barre entière soit un lien, nous avons défini la propriété display sur block et la largeur sur la taille du menu complet (200px).
Maintenant, notre barre de couleur a l'air beaucoup mieux. Voici l'aperçu:
Le rendre joli
Si vous voulez vous en tenir à quelque chose de simple, vous pouvez ignorer cette étape, mais je vais m'embrouiller et ajouter quelques ajustements visuels supplémentaires. Revenez en arrière et modifiez ce bloc de style d'en-tête pour inclure un dégradé et des bordures très subtiles. Il est probable que vous ne pourrez même pas repérer les frontières tant que le menu ne sera pas fermé. Cependant, combinés aux gradients, ils contribueront réellement à différencier chaque section afin qu'elles ne ressemblent pas toutes à un seul bloc.
Styles de survol
Ensuite, nous allons ajouter un style de survol subtil aux liens de la barre. Tout ce que nous allons faire, c'est modifier légèrement les couleurs sur le dégradé pour qu'elles deviennent plus brillantes lorsque vous passez la souris.
Styles de paragraphe
Rappelez-vous que le premier élément de notre menu contient un paragraphe et non une liste non ordonnée, nous allons donc nous attaquer à celui-ci pour le rendre joli. Les listes prendront une grande quantité de code mais le paragraphe n’exige presque rien. Il suffit de définir la taille et la couleur, puis d'ajouter un peu de rembourrage.
La section supérieure est maintenant superbe! La barre d'en-tête et le paragraphe sont exactement où nous en avons besoin.
Styles de liste non ordonnée
Il y a une tonne de choses que nous devons faire pour redresser ces listes. Commençons par un peu les choses et examinons d'abord le code, puis je vous guiderai.
Comme vous pouvez le constater, le premier bloc cible la liste non ordonnée dans son ensemble. Ici, j’ai défini quelques styles de police de taille et de dimensionnement de base et supprimé le point de repère en définissant le type de style de liste sur aucun.
Ensuite, j'ai ciblé les liens spécifiquement. Je les ai déplacés, supprimé les soulignements, défini la couleur et effectué le même affichage: astuce de bloc que nous avons vue auparavant pour agrandir la zone cliquable.
Pour finir, j'ai appliqué quelques styles personnalisés aux éléments de la liste eux-mêmes. La bordure inférieure crée une séparation entre chaque élément et le style de survol modifie l'arrière-plan. Voici le résultat de notre travail, notre menu est presque terminé!
Réduire et animer
Jusqu'ici, nous avons laissé notre menu ouvert afin de pouvoir le voir pendant que nous stylisons les éléments qu'il contient. Maintenant que nous savons que tous nos styles visuels sont exactement comme nous le voulons, il est temps de réduire chaque section, puis de les configurer pour qu'ils s'ouvrent en survol.
Par défaut, les navigateurs définissent la hauteur de ces listes non ordonnées sur auto, ce qui signifie qu'elles seront juste assez grandes pour contenir tout le contenu. Pour réduire les sections de menu afin que seules les barres affichées apparaissent, nous pouvons cibler ces listes non ordonnées et définir la hauteur sur 0. Notez que nous laissons le paragraphe seul, cela garantira que notre section supérieure est toujours ouverte.
Maintenant, notre menu est beaucoup plus court et ne prend pas beaucoup d’espace. Vous pouvez aussi enfin voir les avantages des gradients et des frontières que nous avons déjà mis en place.
Animer la transition
Nous voudrons ensuite ouvrir ces menus en survol, mais avant cela, définissons une animation pour que la transition soit agréable et progressive. Veillez à insérer les différentes extensions du navigateur et à cibler la propriété height.
Étendre le vol stationnaire
Tout ce qui reste à faire maintenant est de faire en sorte que lorsque vous passez la souris, le ul se développe. C'est délicat, alors soyez prudent. Votre instinct peut être de faire quelque chose comme? Ul: hover? mais ce n'est pas ce que nous voulons. Au lieu de cela, nous souhaitons faire en sorte que vous puissiez survoler n’importe où dans cet élément de menu, dans la barre ou dans la liste non ordonnée. Cependant, l'élément que nous souhaitons développer n'est toujours que l'ul. Voici à quoi ressemble notre sélecteur:
Il est parfois utile de lire un sélecteur à l'envers lorsque vous essayez de comprendre ce qu'il fait. Ceci indique à notre navigateur de définir une hauteur de 93px sur nos listes non ordonnées lorsqu'un élément .menu est survolé.
Une chose importante à noter ici est que nous ne pouvons pas simplement définir la hauteur sur auto car pour une raison quelconque, l’animation est désactivée. Si vous ne souhaitez pas l'animation, une hauteur automatique est beaucoup plus flexible et vous permet de faire varier le nombre d'éléments de sous-menus. Si vous voulez faire cela avec l'animation, vous devrez cibler la hauteur pour chacun individuellement.
Voyez-le en action
Notre menu est maintenant complet. Assurez-vous de lancer les pneus de la démo pour voir comment tout cela fonctionne. Je vais également ajouter un lien vers le code complet pour que vous puissiez le voir tous ensemble.
Démo: Lancer la démo
Voir le code: Découvrez le HTML et CSS sur Tinkerbin
Conclusion
J'espère que vous avez apprécié cette procédure de création d'un menu de navigation verticale animée. En ce qui concerne l'implémentation, cela ressemble beaucoup aux boutons de téléchargement animés que nous avons créés l'autre jour. Vous devriez donc vraiment vous cacher et afficher du contenu en utilisant du CSS pur.
Recherchez une version encore meilleure de ce menu sur notre nouveau site soeur, Design Curate. Vous y trouverez une tonne d'excellents cadeaux que vous pouvez télécharger et mettre en œuvre dans vos projets dès aujourd'hui.