Fondation 6: le nouveau composant de menu

Système de menu rationalisé de la fondation 6: un seul composant adaptable remplaçant plusieurs options héritées.

Améliorations de clés:

• Composant de menu unifié: Foundation 6 Consolide les listes en ligne, la navigation latérale, les barres d'icônes et la sous-navigation dans un seul composant "menu" hautement personnalisable. Cela simplifie le développement et réduit la taille du cadre.
• Conception réactive: Créer des menus qui s'adaptent dynamiquement sur différentes tailles d'écran et périphériques à l'aide d'une seule base de code. Cela élimine le besoin de menus séparés pour le bureau et le mobile.
• Plugins JavaScript: Améliorer les fonctionnalités avec des plugins tels que la liste déroulante, la forage et les menus d'accordéon, tous accessibles via la navigation par clavier.
• Cadre léger: La fusion des structures de menu a entraîné une réduction significative de la taille du cadre (plus de 1000 lignes de CSS supprimées), conduisant à des temps de chargement plus rapides et à une maintenance plus facile.
• Améliorations de la barre supérieure: Le composant de la barre supérieure prend désormais en charge les sections gauche et droite pour les menus et comprend une bascule réactive pour les écrans plus petits.

Menus de construction dans la fondation 6:

La structure du menu de base est simple: un élément <code><ul></ul> avec la classe menu, contenant <code><li> des éléments et <a></a> balises pour les liens. Des classes supplémentaires contrôlent l'apparence et le comportement du menu.

• Menus simples: Utilisez la classe .simple pour supprimer le style par défaut et créer un look complètement personnalisé.

• Menus horizontaux / verticaux: La valeur par défaut est horizontale. Ajoutez la classe .vertical pour l'orientation verticale.

• Menus imbriqués (sous-ménus): Utiliser des éléments imbriqués <code><ul></ul> avec la classe .nested pour le sous-menus dans les menus verticaux. Pour des interactions plus complexes, utilisez la liste déroulante, la forage ou les plugins de l'accordéon.

• Menus d'icônes: Incorporer des icônes à l'aide d'éléments <i class="fi-..."></i> (en utilisant la police de l'icône de la Fondation) ou des balises d'image dans les balises <a></a>. Les icônes de classe .icon-top Positionment au-dessus du texte du menu.

• Menus déroulant, de forage et d'accordéon: Ces plugins alimentés par JavaScript offrent des menus dynamiques et interactifs. Utilisez respectivement les attributs data-dropdown-menu, data-drilldown et data-accordion-menu pour activer ces fonctionnalités. La gestion des événements permet des actions personnalisées (par exemple, up.zf.accordion pour la fermeture de l'accordéon).

• Navigation réactive: Utilisez l'attribut data-responsive-menu pour définir différents types de menu pour différentes tailles d'écran (par exemple, small-dropdown, medium-drilldown).

• Barre supérieure avec sections gauche / droite: Utilisez les classes .top-bar-left et .top-bar-right dans le conteneur .top-bar pour créer des menus avec des sections des deux côtés. Le bascule réactif (data-responsive-toggle) affiche un bouton de menu sur les petits écrans.

Exemple (menu horizontal simple):

<code class="language-html"><ul class="menu">
  <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Option 1</a></li>
  <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Option 2</a></li>
  <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Option 3</a></li>
</ul></code>

Conclusion:

Le système de menu redessiné de la fondation 6 offre une amélioration significative de la fonctionnalité et de la facilité d'utilisation. L'approche unifiée simplifie le développement, réduit la taille du code et améliore la réactivité, ce qui en fait un outil puissant pour construire des sites Web modernes et flexibles.

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!