Share
Jetons un coup d'oeil à la barre supérieure incluse dans le cadre de la fondation. Comme il y a beaucoup à couvrir, nous allons le décomposer en morceaux faciles.
La barre supérieure de Foundation est un petit composant très utile, mais il n’est nullement obligatoire de l’utiliser dans vos versions. Je pense que je l'ai utilisé dans environ 40% des projets que j'ai construits avec Foundation. Examinez attentivement si cela répond ou non aux besoins de votre projet. le composant de barre supérieure est aussi facile à coiffer que n'importe quel autre, mais l'interaction est à peu près définie.
Pour commencer à construire la barre supérieure, nous avons besoin d’un tag, avec la classe requise de "top-bar".
À l'intérieur de cela se trouve un dont l'un porte notre titre / logo, l'autre notre menu "mobile".
Remarque: vous pouvez supprimer la classe "menu-icon", ou le contenu "Menu", si vous préférez n'avoir qu'un seul des deux éléments affichés.
L’ajout de liens parent est notre prochain objectif. Par conséquent, avant d’ajouter notre balise de navigation, avec la classe "top-bar-section". Dans cette section, nous devons ajouter une liste non ordonnée avec plusieurs éléments de liste..
Foundation dispose d'un "diviseur" de classe utile qui peut être appliqué aux éléments de liste vides, vous permettant de séparer chaque lien de menu par une ligne attrayante. Ils sont utilisés dans l'exemple suivant pour diviser nos liens de menu.
Vous remarquerez également que la classe "gauche" est appliquée à ul, ce qui envoie les choses à gauche. Vous pouvez, par exemple, avoir deux ensembles de liens de menu, l’un flottant à gauche et l’autre (en utilisant la classe «droite») flottant à droite..
- Élément principal 1
- Point principal 2
Tous les liens que nous avons ajoutés jusqu'à présent seront affichés horizontalement le long de la barre. Sur des écrans plus petits, ils deviendront une liste déroulante, activée par le bouton Menu que nous avons ajouté précédemment..
Chaque élément de liste peut contenir une liste non ordonnée imbriquée pour les sous-menus. Pour que cela fonctionne et soit affiché correctement, la classe «has-dropdown» doit être appliquée au lien parent, la classe «dropdown» étant appliquée à la liste non ordonnée imbriquée:
Remarque: Pour marquer le lien de la page actuelle comme actif, ajoutez une classe “active”.
Les sous-menus sont affichés sous forme de liste déroulante standard dans des circonstances "grand écran". Sur de plus petits écrans, ils glissent de "hors écran".
En dépit de l’appellation de barre «supérieure», vous pouvez placer ce composant n’importe où dans votre mise en page. Si vous avez besoin que la barre reste fixe sur la page pendant le défilement, vous pouvez envelopper la barre du haut dans un div avec la classe «fixed». Sinon, si vous souhaitez conserver la barre supérieure dans votre conteneur principal, vous pouvez définir la largeur de la barre supérieure sur la largeur de la grille en utilisant la classe «contenir-à-grille». Heureusement, vous pouvez utiliser ces deux classes (“contenir-à-grille” et “fixe”) en combinaison.
Supposons que vous souhaitiez que la barre du haut apparaisse au centre de la mise en page, mais que la barre reste en haut de la page lorsque l'utilisateur fait défiler l'écran vers le bas. Ceci est possible en enveloppant la barre du haut dans les classes «contenir-à-grille» et «collant».
Si toutes ces fonctionnalités pratiques ne suffisaient pas, vous pouvez également ajouter une entrée que vous pouvez utiliser pour la recherche, une inscription à une liste de diffusion ou tout autre choix. Lors de l'ajout d'éléments de formulaire dans un élément de liste de menu, nous devons ajouter une classe de «has-form». Vous pouvez voir dans le code ci-dessous que nous utilisons réellement la grille dans la barre supérieure. Cela rend le placement des éléments facile - et bien sûr réactif, car les colonnes changent la disposition sur de petits écrans.
Les miettes de pain sont courantes sur les sites Web basés sur le CMS, tels que Wordpress, où la hiérarchie de pages à plusieurs niveaux peut être un peu complexe. Ceux-ci peuvent être utilisés dans n'importe quel projet de la Fondation en ajoutant simplement la classe «chapelure» à un étiquette. Lorsque vous utilisez la liste non ordonnée, tous les liens doivent figurer dans des éléments de liste, tandis que les liens à l'intérieur de l'élément de navigation doivent être des balises d'ancrage..
Les seules classes supplémentaires incluses dans la balise de fil d'Ariane sont «indisponible» et «en cours».
La barre supérieure est très flexible et assez simple pour être intégrée à n’importe lequel de vos projets basés sur des fondations. Dans la prochaine partie de cette session, nous parlerons des boutons, des listes déroulantes et du plugin de compensation..
Accentsconagua