Construire des méga menus avec Flexbox

Points de base

• Flexbox est un modèle de mise en page CSS qui permet aux développeurs de créer des UIS complexes sans s'appuyer sur des astuces CSS et JavaScript redondantes. Il utilise un modèle de mise en page linéaire, ce qui facilite la mise en page du contenu horizontalement ou verticalement sans calcul d'espacement.
• Flexbox peut être utilisé pour créer des sites Web avec des menus de navigation géants. Ce modèle de mise en page permet de créer des barres de navigation simples, de segments de menu déroulant unique et de limiter les segments de menu déroulant à trois colonnes. La disposition flexible est sensible aux éléments dans le conteneur, réduisant le besoin de requêtes multimédias.
• Le menu mega final créé dans ce tutoriel n'est pas entièrement réactif. La barre de menu principale apparaîtra sur un petit écran, mais le menu géant ne sera pas disponible, seuls les liens de niveau supérieur sont disponibles. Cependant, ce tutoriel est une bonne démonstration de la puissance et de la simplicité de Flexbox.
• La navigation de menu géant est très utile pour afficher toutes les options et peut être utilisée efficacement sur les sites Web de commerce électronique. Cependant, il est important de considérer la convivialité de ces fonctionnalités et de comprendre leurs avantages et leurs inconvénients avant la mise en œuvre.

Comme vous le savez, Flexbox a récemment attiré beaucoup l'attention à mesure que le support du navigateur a augmenté. Il permet aux développeurs de construire des UIS complexes sans s'appuyer sur des astuces CSS et JavaScript redondantes.

Flexbox utilise un modèle de mise en page linéaire, nous permettant de disposer du contenu horizontalement ou verticalement sans calcul d'espacement. La disposition flexible est sensible aux éléments dans le conteneur, réduisant le besoin de requêtes multimédias.

Dans cet article, j'utiliserai ce modèle de mise en page pour créer un menu de navigation géant, et dans le processus, vous verrez à quel point il est facile de créer et d'étendre les composants de l'interface utilisateur à l'aide de Flexbox.

Je ne discuterai pas des propriétés individuelles de Flexbox en détail ici, mais me concentrerai sur l'application pratique de ces fonctionnalités. Pour une introduction de base à Flexbox, veuillez vous référer aux ressources suivantes:

• Tutorial Flexbox de Guy Routledge
• Introduction conviviale pour les débutants Flexbox
• Flexbox Complete Guide

Que allons-nous construire?

Pour savoir ce que je vais vous montrer comment construire, consultez le code de code en plein écran.

Ce tutoriel est divisé en trois parties:

1. Créez une barre de navigation: Utilisez Flexbox pour créer une barre de navigation simple pour notre plateforme de commerce électronique fictive
2. Créez un seul segment de menu déroulant
3. Limitez un seul segment de menu déroulant à trois colonnes

Build Navigation Bar

Le marquage de la barre de navigation est simple. À des fins de démonstration, j'utiliserai deux classes (Navbar et Menu) pour tout gérer. CSS ici exclura tous les styles qui ne sont pas liés à ce tutoriel.

<nav class="navbar">
  <ul class="menu">
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Electronics</a><i> class="fa fa-angle-down"></i></li>
    </ul>
</nav>

La classe

NAVBAR est responsable de centrer notre barre de navigation dans l'espace disponible, mais je me concentrerai sur la classe de menu, où j'utiliserai Flexbox.

Je veux que mes éléments de navigation soient organisés horizontalement. De plus, je veux que chaque élément soit espacé de manière égale et étroite à la demande en cas d'espace insuffisant.

Tout d'abord, je dois créer un contexte de formatage flexible sur l'élément .Menu, que j'utiliserai display: flex pour implémenter. Maintenant, tous les enfants directs de l'élément .menu (c'est-à-dire le conteneur flex) deviendront des projets flexibles.

Ensuite, je veux que les éléments de menu soient de largeur égale. J'ai ajouté flex: 1 pour les faire grandir uniformément avec des largeurs égales. Voici le code:

<nav class="navbar">
  <ul class="menu">
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Electronics</a><i> class="fa fa-angle-down"></i></li>
    </ul>
</nav>

Affichez le code, vous vous demandez peut-être pourquoi je réutilise tous les projets Flex (.Navbar .Menu li). display: flex

Dans la démo, la couleur d'arrière-plan change lorsque vous survolez un élément de menu. Si je ne définis pas la propriété

du projet flex ). display flex Pour faire en sorte que le contenu s'étende à la largeur entière de son élément parent, j'ai également transformé le projet Flex en un conteneur flexible. Avec ce paramètre, je peux faire de chacun un élément aussi large que son parent (en utilisant

), ce qui rend l'ensemble de la zone en surbrillance cliquable.

flex: 1 Alternativement, je peux également y parvenir sans régler l'élément Li sur le conteneur flex .

Cette démo montre ce qui a été fait jusqu'à présent. display: inline-block width: 100% Dans seulement cinq propriétés CSS Flexbox, la barre de navigation est prête. Comme vous pouvez le voir, il s'agit d'une solution soignée. box-sizing: border-box

Dans la section suivante, je vais vous montrer une partie de la façon de construire une navigation géante.

Créez un seul segment de menu déroulant

Ce qui suit est le balisage qui sera utilisé pour construire un seul segment de menu déroulant qui sera étendu à plusieurs segments. Le projet Container__List sera copié pour créer des segments supplémentaires.

Le conteneur est un conteneur flexible, et chaque élément enfant direct (c'est-à-dire le conteneur__list) est un projet Flex. Chaque conteneur__list a plusieurs éléments de navigation, chacun enveloppé par Container__ListItem. J'ai enveloppé le contenu dans une div et j'y retournerai plus tard.

Ce qui suit est CSS:

.navbar .menu {
  display: flex;
  position: relative;
}

.navbar .menu li {
  flex: 1;
  display: flex;
  text-align: center;
}

.navbar .menu a {
  flex: 1;
  justify-content: center;
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bffffff;
  padding: 20px;
}

Notez que j'ai utilisé la propriété

sur Container__List, mais je ne l'ai pas utilisé pour la barre de navigation elle-même. Comme mentionné précédemment, je ne veux pas que les articles de la barre de navigation s'enroulent en cas d'espace insuffisant. Au lieu de cela, ils rétrécissent uniformément lorsque l'espace horizontal disponible diminue.

Cependant, pour les projets Container__List, les exigences sont exactement le contraire. Je veux que mes éléments de liste utilisent 25% de l'espace, de sorte que chaque ligne contient jusqu'à quatre éléments, ce que je peux faire avec

<ul class="container">
  <div class="container__list">
    <div class="container__listItem">
      <div>Televisions</div>
    </div>
  </div>
</ul>

.

flex-wrap J'ai également défini

sur 0. Ceci est utile car il empêche les éléments uniformément distribués de moins de quatre. En le fixant à 0, je force le projet à conserver 25% de l'espace.

qu'en est-il du contenu enveloppé dans une div maintenant? Je veux faire face à une situation où vous voudrez peut-être empêcher le contenu de déborder. Ceci est très simple lorsque votre contenu est directement à l'intérieur d'un élément enfant Flex (c'est-à-dire Container__ListItem). Je peux remplacer le texte coupé par une ellipsine ("…") en utilisant le code suivant.

<nav class="navbar">
  <ul class="menu">
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Electronics</a><i> class="fa fa-angle-down"></i></li>
    </ul>
</nav>

Cependant, dans ce cas, j'ai mis le contenu dans une div qui est enveloppée par contener__ListItem. Par conséquent, la solution ci-dessus ne fonctionnera pas. Les articles Flexbox et le texte tronqué fournissent une solution. Dans le code suivant, la ligne suivante dans chaque bloc de déclaration "mise à jour" commentaire est la ligne qui gère ce problème:

.navbar .menu {
  display: flex;
  position: relative;
}

.navbar .menu li {
  flex: 1;
  display: flex;
  text-align: center;
}

.navbar .menu a {
  flex: 1;
  justify-content: center;
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bffffff;
  padding: 20px;
}

Limitez un seul segment de menu déroulant à trois colonnes

À ce stade, la plupart des travaux ont été achevés. Pour le reste de cette section, j'ajouterai une autre section déroulante, que je forcerai à restreindre à trois éléments de colonne.

Comme mentionné précédemment, je copierai deux fois Container__List et l'utiliserai pour un nouveau segment de menu déroulant appelé "Appareils". C'est à des fins de démonstration. Dans un exemple pratique, vous pouvez générer une liste via JavaScript ou dans une langue backend.

Je vais ajouter une classe Has-Multi pour ajuster l'interface utilisateur. En utilisant cette classe, je dois remplacer certaines propriétés.

<ul class="container">
  <div class="container__list">
    <div class="container__listItem">
      <div>Televisions</div>
    </div>
  </div>
</ul>

Ici, je définis flex-basis à 33,333%, car je veux que trois parties soient affichées dans le conteneur. Je n'ai changé que flex-basis, mais les deux autres propriétés flex-grow et flex-shrink ont été héritées du code de section unique. Cela me donne de la flexibilité lorsque le conteneur__list est inférieur à trois. S'il n'y a que deux listes, le projet Container__List augmentera et répartira l'espace entre eux. Autrement dit, chaque élément occupera 50% de la largeur totale.

Notez que .Container__ListItem est défini sur flex-basis: 100%, ce qui garantit qu'il n'y a qu'une seule colonne dans Container__List. Je peux utiliser 50% pour autoriser deux colonnes par section.

Quelques notes sur la convivialité des menus géants

J'ai choisi le menu Mega comme exemple sans considérer trop sa convivialité. Avant d'utiliser de telles fonctionnalités, j'ai fourni des ressources pour discuter de ses avantages et des inconvénients.

À mon avis, la navigation sur le menu Mega est très utile pour afficher toutes les options, et ce style de navigation peut être utilisé efficacement pour les sites Web de commerce électronique. J'aime la navigation d'Intel.

• Avantages de disponibilité et inconvénients des méga menus (Mega Menu Part 1)
• Le menu géant est parfait pour la navigation sur le site Web
• menu déroulant géant

Conclusion

Il convient de noter que le menu mega final de ce tutoriel n'est pas entièrement réactif. La barre de menu principale apparaîtra sur un petit écran, mais le menu géant ne sera pas disponible, seuls les liens de niveau supérieur sont disponibles. Aux fins de ce tutoriel, cela devrait être suffisant. N'hésitez pas à copier la démo et à l'améliorer si vous préférez.

Le système de navigation de menu déroulant géant est un excellent moyen de démontrer la puissance et la simplicité de Flexbox, et j'espère que je l'ai transmis dans ce tutoriel. Comme vous pouvez le voir, Flexbox n'est pas seulement utilisé pour centrer du contenu.

Si vous utilisez différentes technologies basées sur Flexbox pour créer un système de menu Mega, n'hésitez pas à nous le faire savoir dans les commentaires.

MISE À JOUR: J'ai construit une version réactive conviviale de ces méga menus que vous pouvez trouver dans cette démo de codepen.

FAQ pour la construction d'un mega menu avec Flexbox (FAQ)

Comment rendre mon mega menu réactif avec Flexbox?

Il est très facile de rendre Mega Menu sensible avec Flexbox. Vous pouvez utiliser les requêtes multimédias pour ajuster la disposition du menu en fonction de la taille de l'écran. Par exemple, vous pouvez empiler les éléments de menu verticalement sur un écran plus petit et les afficher horizontalement sur un écran plus grand. Vous pouvez également utiliser la propriété Flex-Wrap pour permettre aux éléments de menu de s'envelopper sur plusieurs lignes si nécessaire. N'oubliez pas de tester votre menu sur différents appareils pour vous assurer qu'il a fière allure et de fonctionner sur toutes les tailles d'écran.

Puis-je créer des méga menus à plusieurs niveaux à l'aide de Flexbox?

Oui, vous pouvez créer des méga menus à plusieurs niveaux à l'aide de Flexbox. Vous pouvez vous nidifier les conteneurs flexibles les uns avec les autres pour créer une navigation à plusieurs niveaux. Chaque niveau peut être affiché ou masqué à l'aide de CSS et JavaScript. Cela vous permet de créer des structures de navigation complexes qui sont encore faciles à naviguer et à comprendre.

Comment ajouter des animations à mon menu Mega Flexbox?

Vous pouvez utiliser les transitions et transformations CSS pour ajouter des animations au menu MEGA FLEXBOX. Par exemple, vous pouvez utiliser des transitions pour animer en douceur l'ouverture et la fermeture du sous-menu. Vous pouvez également utiliser la transformation pour animer le mouvement des éléments de menu. N'oubliez pas de garder la subtilité et la cohérence de l'animation afin de ne pas confondre ou distraire l'utilisateur.

Comment améliorer l'accessibilité des menus Flexbox Mega?

L'amélioration de l'accessibilité du mega Flexbox Mega implique plusieurs étapes. Tout d'abord, assurez-vous que votre menu est navigable via le clavier. Cela signifie que l'utilisateur doit pouvoir utiliser la touche de tabulation et les touches de flèche pour naviguer dans le menu. Deuxièmement, utilisez des rôles et des attributs ARIA pour fournir des informations supplémentaires sur les menus aux technologies d'assistance. Troisièmement, assurez-vous que votre menu a un contraste suffisant et est facile à lire.

Puis-je créer des méga menus collants à l'aide de Flexbox?

Oui, vous pouvez créer des méga menus collants à l'aide de Flexbox. Vous pouvez utiliser la propriété CSS "Position: Sticky" pour faire coller le menu en haut de la page pendant que l'utilisateur défile. Cela garantit que le menu est toujours visible et accessible, même sur des pages longues.

Comment ajouter des icônes à mon menu Mega Flexbox?

Vous pouvez ajouter des icônes au menu Flexbox Mega à l'aide de polices d'icônes ou de SVG. Vous pouvez utiliser l'attribut Flex pour contrôler la taille et l'espacement des icônes. Vous pouvez également utiliser CSS pour modifier l'effet de couleur et de survol de l'icône.

Comment ajouter une barre de recherche à mon menu Mega Flexbox?

Vous pouvez ajouter une barre de recherche au menu MEGA FLEXBOX en créant un élément Flex qui contient un formulaire avec des champs d'entrée et des boutons de soumission. Vous pouvez utiliser l'attribut Flex pour contrôler la taille et la position de la barre de recherche. Vous pouvez également utiliser CSS pour styliser la barre de recherche pour correspondre au reste du menu.

Comment ajouter un menu déroulant à mon menu Mega Flexbox?

Vous pouvez ajouter des menus déroulants au menu MEGA FLEXBOX en créant des conteneurs flexibles imbriqués. Vous pouvez utiliser CSS pour masquer les menus déroulants par défaut et les afficher lorsque l'utilisateur plane sur l'élément de menu parent. Vous pouvez également utiliser JavaScript pour ajouter une interactivité supplémentaire au menu déroulant, comme les fermer lorsque l'utilisateur clique à l'extérieur du menu déroulant.

Comment ajouter un menu mobile bascule à mon mega Flexbox?

Vous pouvez ajouter une bascule de menu mobile au menu MEGA FLEXBOX en créant un bouton pour basculer l'affichage du menu. Vous pouvez utiliser des requêtes multimédias pour masquer la bascule sur le plus grand écran et l'afficher sur le petit écran. Vous pouvez également utiliser JavaScript pour basculer la propriété "Affichage" du menu lorsque le bouton est cliqué.

Comment optimiser les performances des menus Flexbox Mega?

L'optimisation des performances du menu Flexbox Mega implique plusieurs étapes. Tout d'abord, assurez-vous que votre CSS et JavaScript sont rétrécis et compressés pour réduire la taille de leur fichier. Deuxièmement, utilisez les transitions et transformations CSS vers l'animation au lieu de JavaScript car elles fonctionnent mieux. Troisièmement, utilisez des requêtes multimédias pour charger différents styles et scripts en fonction de la taille de l'écran, réduisant ainsi la quantité de chargement de code inutile.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!