Share
La navigation est une interface utilisateur indispensable sur n'importe quel site Web. Indépendamment de l'échelle, d'une page à l'autre ou de l'e-commerce à part entière, un site Web a besoin d'une navigation pour permettre aux utilisateurs de parcourir les pages et les sections. Après notre précédent tutoriel sur la grille Material Design Lite, nous allons voir dans cette suite comment utiliser un autre composant MDL: le module de navigation..
Avant de commencer, n'oubliez pas d'inclure les bibliothèques MDL. les feuilles de style et le JavaScript dans le tête de votre page:
Maintenant, nous pouvons commencer à construire la navigation.
La navigation dans MDL est un sous-composant de Mise en forme, avec les autres comme la grille, les onglets et le pied de page. La forme de base de la navigation dans MDL comprend le nom du site, quelques menus de liens et une navigation hors-toile..
Pour en créer un, ajoutez un vide div avec mdl-layout et mdl-js-layout attaché. Ces deux classes sont obligatoires. le mdl-layout La classe applique des styles prédéfinis qui garantissent la présentation correcte du composant d'interface utilisateur, principalement de la navigation. Pendant ce temps, le mdl-js-layout ajoutera un comportement dynamique via JavaScript qui inclut l'ajout de nouveaux éléments et quelques classes supplémentaires pour rendre la fonction de navigation.
Dans cette div, créer un entête élément avec le mdl-layout__header classe attachée.
Ensuite, créez un nouveau div avec mdl-layout__header-row. C'est l'élément où nous allons réellement mettre la navigation en place.
Enveloppez le nom du site en utilisant un envergure élément avec mdl-layout-title classe attachée, puis une balise d'ancrage avec une URL pointant vers la page d'accueil. Vous pouvez également remplacer le texte par une image du logo de votre site..
Acmé
Créer un div sous le nom du site avec mdl-layout-spacer classe attachée. Ce div va ajouter un espace entre le nom du site, et éventuellement pousser la navigation à droite sur l'en-tête.
Acmé
Maintenant, nous ajoutons les menus de navigation sous la spacer en utilisant le nav élément.
Acmé
Enfin, ajoutez un nouveau div avec le mdl-layout__drawer en dehors de entête élément pour construire la navigation hors-toile.
AcméAcmé
Au fur et à mesure que vous rechargez la page, la navigation sur la toile doit immédiatement fonctionner. vous devriez trouver l'icône «hamburger» pour l'activer ou la désactiver. Essayez:
Cependant, comme vous pouvez le voir ci-dessus, la barre de navigation ainsi que le nom du site et le menu de navigation sont masqués. MDL les cache volontairement lorsqu’ils sont affichés dans des fenêtres de la taille d’une tablette. C'est en fait une décision réfléchie de l'équipe MDL. Le menu horizontal est mal adapté en termes de mise à l'échelle horizontale, en particulier si vous avez des dizaines de menus. À un moment donné, il ne rentrera pas dans une fenêtre d'affichage étroite et s'effondrera ou chevauchera probablement l'autre interface utilisateur dans la navigation..
Néanmoins, si nous souhaitons conserver sa visibilité dans une fenêtre plus petite, ajoutez la mdl-layout - en-tête fixe en ligne avec le mdl-layout classe.
… Plus de contenu ici…
Cette classe forcera la navigation à être visible sur les téléphones et les tablettes.
Les formulaires de recherche constituent un élément complémentaire commun à la navigation sur les sites Web. Ils peuvent être très utiles pour les utilisateurs qui ne savent pas toujours quel menu utiliser pour trouver le contenu recherché. Avec le formulaire de recherche, ils peuvent simplement taper et rechercher.
Trouvez le code HTML complet pour construire le formulaire de recherche sous le nav élément
… Plus de contenu ici…… Plus de contenu ici…
Nous avons défini ici deux composants MDL différents, à savoir le champ de texte et le bouton. Le bouton apparaît comme une icône de recherche qui élargira le champ de saisie de la recherche lorsque vous cliquerez dessus:
La navigation dans MDL est une composante extrêmement lourde compte tenu du nombre de variations que nous pouvons organiser pour différents scénarios. Dans ce tutoriel, nous avons simplement construit une navigation de base en utilisant les classes essentielles.
La navigation peut être étendue avec des classes d’utilitaires ou en ajoutant d’autres composants à partir de MDL. Par exemple, nous pouvons rendre le fond de navigation transparent et utiliser une image d’arrière-plan, définir la navigation hors-toile sur toujours visible, rendre la navigation non collant, et même remplacer les menus de liens avec des onglets qui peuvent être utiles pour un site Web à une seule page.
La composante de navigation, cependant, est plutôt opinionée.
Les styles de navigation inspectés via Chrome DevToolsLe remplissage à gauche de la navigation qui est défini sur 72px, par exemple, suggère qu'une navigation devrait avoir une navigation hors toile avec l'icône "hamburger". Parfois, nous n’avons peut-être besoin que d’une navigation décente avec des fonctionnalités de base. Pourtant, la navigation est un composant solide. J'attends des améliorations et peut-être des fonctionnalités supplémentaires.
Dans le prochain didacticiel, nous examinerons deux composants que nous avons déjà brièvement examinés: les boutons et les champs de texte. Jusqu'à la prochaine fois!
Accentsconagua