Share
L'un des aspects les plus importants d'un framework front-end est la manière dont il gère la navigation. Dans cette partie de Foundation for Beginners, nous allons examiner plusieurs formes de navigation, ainsi que des outils JavaScript qui ajoutent une touche supplémentaire. Je vais également vous présenter un autre outil utile qui vous aidera à devenir un meilleur développeur de la Fondation..
L'une des meilleures offres JavaScript de la Fondation se présente sous la forme de Section; un plugin pour construire plusieurs formes de navigation, telles que des accordéons, des onglets, des navigations verticales et horizontales.
Voici quelques exemples de balises:
Section 1
Contenu de la section 1.
Section 2
Contenu de la section 2.
Cela peut sembler un peu plus complexe que ce que nous avons déjà abordé, alors laissez-moi vous en dire plus..
Toute section que vous créez, que ce soit un accordéon, des onglets, voire une barre de navigation, commence par un div utilisant section conteneur classe suivie par le auto classe. Sur cette même div ajouter un vide section de données attribut. Cet attribut détermine le type de section avec lequel nous traitons. Par défaut, Foundation suppose que nous voulons un accordéon. Pour utiliser un type de section particulier, changez simplement le auto classe à onglets, accordéon, vertical-nav ou navigation horizontale. Enfin, ajoutez cette même classe que le section de données la valeur de l'attribut. Cela garantira que vous affichez le type de section adapté à vos besoins..
Une fois que le wrapper a été installé, nous pouvons ajouter du contenu. Pour chaque section de votre wrapper, vous aurez besoin d'un titre et de lier ce titre au contenu:
Section 1
Contenu de la section 1.
Nous pouvons voir ici que chaque section est enveloppée dans un tag (ce qui rend les choses faciles, bien que vous puissiez utiliser un div). Dans chacune de ces sections, nous avons un tag avec une classe de Titre qui renferme le lien vers la section correspondante. En dessous de la balise de paragraphe se trouve le div qui contient le contenu de la section; cela a une classe de contenu. La duplication du code ci-dessus créera chacune de vos sections dans votre enveloppe de section..
Remarque: Ajout du vertical-nav La classe affichera une navigation verticale sur de grands écrans, mais passera à un accordéon sur de petits écrans. Ajouter navigation horizontale évoquera le même comportement.
Supposons que vous souhaitiez créer un lien vers la deuxième section de votre wrapper de section, mais que lorsque vous ouvrez la page, la première section est affichée par défaut. Ne crains pas! Foundation a une solution intégrée sous la forme de Deep Linking. Pour que cela fonctionne, nous devons ajouter un nouvel attribut à notre wrapper: data-options = "deep_linking: true". Cela indique à Foundation que lorsqu'un utilisateur visite une URL avec un identifiant de fragment tel que celui-ci «http://www.website.com/#section3», il doit charger la page avec cette section affichant.
Section 1
Contenu de la section 1.
Section 2
Contenu de la section 2.
Comme vous pouvez le constater, nous avons ajouté l’option des données de liaison profondes ainsi que l’option slug de données attribuer au contenu div. Ce slug de données indique à Foundation quelle section afficher lors du chargement de la page..
Le Side Nav de Foundation (un moyen simple d'afficher des menus verticaux) va de pair avec les sections. La structure HTML est très simple et permet de séparer les séparateurs si nécessaire. Regardons le balisage.
Il s’agit d’une liste standard non ordonnée, comprenant des éléments de liste contenant des liens vers… enfin tout ce que vous voulez. Ajout du side-nav classe à la actif La classe peut être utilisée pour montrer quel lien est actuellement utilisé. Si vous devez diviser vos éléments de liste, ajoutez un élément de liste vide avec une classe de diviseur. Facile.
Le sous-navigateur de Foundation a tendance à être utilisé pour des tâches telles que le filtrage de contenu. Le balisage est aussi simple que Side Nav, mais il diffère par le fait qu’il utilise une liste de description au lieu d’une liste non ordonnée. Cela vous donne la possibilité d’utiliser un terme avec votre la description balises qui contiennent vos liens. Il n'y a pas de séparateurs dans le sous-système mais vous pouvez toujours utiliser le actif classe. Voici le balisage:
La pagination est aussi une forme de navigation. en fait, la pagination devrait vraiment être contenue dans un élément. Jetons un coup d'œil au balisage de certains liens de pagination dans Foundation:
Donner un coup de pied à vos éléments de liste devrait être une flèche, ce qui nécessite la classe flèche. Vous voudrez peut-être utiliser soit « ou ‹ ou peut-être même ←. Jetez un coup d’œil sur unicode-table.com pour plus d’exemples que vous pourriez utiliser..
Le type de navigation Pagination nous permet d’énoncer des classes indisponible et actuel, ce dernier étant très similaire à la classe active sur laquelle nous sommes passés précédemment. Vous pouvez également ajouter une flèche à votre dernier élément de la liste, cette fois-ci en utilisant » ou ›, ou peut-être même →.
Comme il s’agit d’un balisage simple, l’ajouter à un système de gestion de contenu tel que Wordpress est assez simple.
Prime: Vous pouvez centrer la pagination en enveloppant la balise ul dans un nav avec le centré sur la pagination classe. Comme avec tous les éléments de base, la pagination est réactive et facile à coiffer.
L'utilisation d'un framework réactif tel que Foundation est un moyen rapide de donner à votre projet une belle apparence sur tous les périphériques, mais les tests restent une corvée. Pour atténuer cette douleur, j'ai créé un outil appelé Respondr, vous permettant d'ajouter une URL à un smartphone, une tablette et un ordinateur de bureau, ce qui vous permet de détecter facilement et rapidement tout problème.
Jusqu'ici, nous avons couvert le système de grille, les grilles de blocs, le plugin Orbit slider, le plugin de section et trois types de navigation. La prochaine fois, nous nous concentrerons sur le plugin Top Bar, le fil d'Ariane et un autre outil utile.
Accentsconagua