Les menus de navigation étaient une chose assez simple. Codez une liste non ordonnée, faites-la flotter à gauche et vous êtes prêt à partir. Avec un design réactif à la mode ces jours-ci, vous devez faire face à de nouveaux défis lors de la création d'un design de menu.
Suivez-nous à partir de zéro et codez un menu de navigation réactif simple mais efficace que vous pouvez facilement modifier et réutiliser dans vos propres projets.
Ce que nous construisons
Si vous êtes le genre de personne qui aime aller de l'avant, voici un aperçu de ce que nous construisons. Veillez à redimensionner la fenêtre de votre navigateur pour voir les concepts réactifs en action.
Démo: Cliquez ici pour le voir et le peaufiner sur Dabblet.
Le HTML
Passons directement à ce projet sans une fluff inutile. Je suis sûr que vous avez hâte de faire de bonnes choses.
La première étape consiste à décider d’un balisage. Puisqu'il s'agit d'un menu de navigation, c'est l'endroit idéal pour implémenter le HTML5? Nav? élément.
Croyez-le ou non, ce petit morceau de code me faisait tourner la tête au moment de tester. Pour une raison inconnue de moi, mes styles ne prenaient tout simplement pas effet dans IE6-8! Après une bonne dizaine de minutes de tâtonnements, je me suis giflé lorsque j'ai réalisé que j'avais utilisé des éléments HTML5, qui ne sont bien sûr pas pris en charge par les versions antérieures à IE9.
Heureusement, la solution est facile, il suffit de déposer le fameux html5shiv et vous êtes prêt à partir (placez-le dans la partie de tête de votre document).
Ajouter la liste
Maintenant que nous avons compris notre élément conteneur, il est temps d'ajouter une simple UL avec huit liens. Ce tutoriel dépend du nombre de liens. Assurez-vous d’en utiliser huit si vous n’êtes pas assez confiant pour vous aventurer seul dans certains domaines.
Ajouter la sous-balise
Pour rendre le menu un peu plus intéressant et utile, incluons une autre ligne de texte sous la première sur chacun des éléments de menu. Nous pouvons procéder de différentes manières, alors n'hésitez pas à ne pas être d'accord avec la façon dont je l'ai abordé. En gros, je viens de lancer une balise break et d’utiliser un petit élément pour la deuxième ligne. Le deuxième élément sera en effet petit, ce qui nous donne un crochet assez sémantique sans divs, ID ou classes inutiles.
Vérification des progrès
Après cette étape, vous devriez avoir une simple liste de liens sans style. Notez que, sans aucun effort, ces petites balises vont déjà fonctionner et réduire la taille de chaque ligne.
Styles de départ
Pour commencer notre CSS, sortons ce bon vieux sélecteur universel et suivons les conseils de Paul Irish en appliquant taille de la boîte: border-box à chaque élément. Cela nous aidera à dimensionner facilement les choses avec des pourcentages même si nous utiliserons des frontières.
Styles de conteneur
Avant de commencer à styler les éléments de liste individuels, appliquons un style de base à nos éléments parents. Tout d'abord, ciblez l'élément de navigation et réglez-le à 90% de la largeur du corps. Cela s’étendra en grande partie sur l’espace disponible tout en laissant à notre système un petit espace pour respirer. Veillez également à le centrer sur la page avec les marges automatiques.
Sautez également et appliquez les styles de liste non ordonnée nécessaires pour réinitialiser la liste et éliminer les puces.
Styles de menu
Maintenant que nos éléments parents ont leur action ensemble, il est temps de travailler spécifiquement sur les éléments de menu, qui peuvent être ciblés via l'élément nav en conjonction avec les balises d'ancrage et les éléments de liste.
Voici un gros morceau de code mais n'ayez pas peur de ça, je vais vous l'expliquer pièce par pièce.
J'ai classé les propriétés ici par ordre alphabétique pour faciliter les recherches, mais pour être honnête, ce n'est pas vraiment ma façon préférée de faire les choses. J'aime grouper les styles par fonction pour qu'ils aient un peu plus de sens. Si nous réorganisons nos styles de cette façon, ils deviennent plus faciles à discuter.
Le premier élément est le bloc de styles qui définit la forme et la disposition de chaque élément de la liste. Nous avons modifié les ancrages pour bloquer les éléments de niveau, les avoir flottés à gauche, leur attribuer une largeur et leur donner un petit remplissage. Cela créera un joli grand rectangle pour chaque lien dans le menu. Pourquoi 12,5% pour la largeur? Parce que nous avons huit éléments de menu et 100% / 8 nous donne 12,5% de largeur sur chaque article.
La prochaine étape est le morceau de code qui définit le style visuel des zones que nous venons de créer. Nous leur avons donné une couleur d'arrière-plan et une bordure de pixel unique sur le côté droit.
Enfin, nous terminons avec tous les styles liés au texte du menu. Tout cela est assez basique, la boule à une courbe est la? Cutive? police que vous pouvez trouver ici.
Pour le petit styles, j’ai changé la couleur, supprimé la transformation de texte en majuscule et réglé la police sur Helvetica.
Vérification des progrès
Ces styles ont fait toute la différence dans le monde. Notre menu est à la recherche beaucoup meilleur. La police personnalisée fonctionne, les liens sont en ligne, le petit texte est parfait; c'est une belle chose.
Styles de survol
Lorsque l'utilisateur survole un élément de menu, passons au noir. Pour que cela se sente un peu plus agréable, j'ai également ajouté une transition d'une demi-seconde.
Correction de la frontière
Maintenant, vous ne pouvez pas le voir étant donné que notre fond est blanc, mais il y a en fait un problème avec nos frontières. Ils sont vraiment destinés à donner un peu de définition visuelle à chaque élément de menu, ce qui signifie qu’il n’est pas nécessaire de les utiliser à la fin. Pour résoudre ce problème, nous pouvons utiliser la dernière: pseudo classe.
Ci-dessous, j'ai appliqué une couleur d'arrière-plan temporaire afin que vous puissiez voir la différence entre les versions avant et après.
Devenir sensible
Ce projet illustre bien la différence entre une conception réactive et une conception fluide. À ce stade, notre menu est fluide (il utilise des largeurs en pourcentage) mais il n’est pas réactif. Nous pouvons le voir clairement lorsque nous essayons de réduire trop la taille de notre fenêtre:
Comme vous pouvez le constater, c'est une épave! Intervenons avec certaines requêtes des médias pour voir si nous pouvons résoudre ce problème. Le meilleur moyen de savoir où nous avons besoin de requêtes de médias est tout simplement de le tester et de voir où la mise en page se casse, puis de l'expliquer.
1220px
Le premier problème que je vois se produit autour de 1200 pixels de large. Ici, les éléments de texte les plus longs commencent à être coupés et ne sont plus entièrement lisibles.
Pour résoudre ce problème, il suffit d’ajuster la taille de la police. Je cible une zone juste avant que le problème ne se produise (1 220 pixels) et mets mes polices à 10 pixels.
Avec ce changement, le problème ne se pose plus. Lorsque nous réduisons la taille de notre fenêtre, le menu répond et réduit la taille de la police pour l'adapter à la taille.
930px
Une fois encore, nous réduisons la taille de la fenêtre et constatons que les choses se cernent autour de 900 pixels. Nous avons beaucoup de problèmes de débordement ici:
Plutôt que de réduire la taille de la police jusqu'à ce que vous ne la voyiez plus, cette fois, nous rediffusons complètement le menu afin qu'il se scinde en deux lignes. Désormais, chaque lien peut être volumineux, étant donné que cela pourrait se situer autour du point où la taille de la tablette entre en jeu.
Notez que nous avons également dû repenser le fonctionnement de nos frontières. Maintenant, nous avons besoin que la rangée supérieure ait des bordures au bas, mais pas la rangée inférieure. Encore une fois, les pseudo-sélecteurs de classes facilitent la tâche.
580px et 320px
Le format à deux rangées fonctionne assez bien jusqu'à ce que nous passions sous 600px et que tout l'enfer se déchaîne. La chose tombe complètement en morceaux.
Pour résoudre ce problème, nous terminerons nos requêtes avec un format à deux colonnes et quatre lignes. Nous allons utiliser cette disposition pour 580px ci-dessous et réduire la taille de la police à 320px.
Notre menu a maintenant bonne allure, même à très petite taille. L'inconvénient est que cela prend une bonne portion de hauteur verticale, mais vous pouvez supprimer une partie du rembourrage si cela vous dérange.
Selectivizr
Les observateurs astucieux d'entre vous remarqueront que nous avons expliqué les anciennes versions d'IE avec html5shim, mais que nous suivions ensuite avec des sélecteurs de classe pseudo sophistiqués qui ne fonctionneraient pas non plus dans IE. Pour en tenir compte, veillez à télécharger et à mettre en œuvre Selectivizr, un utilitaire JavaScript sophistiqué spécialement conçu pour transférer les sélecteurs CSS3 vers IE6-8.
Conclusion
Le design réactif n'est pas une promenade dans le parc.Cela prend du temps, des efforts et beaucoup de? Savoir comment? tirer efficacement. J'aime décomposer le sujet en défis individuels, comme le menu de navigation ici et la galerie d'images d'un article précédent, pour que vous puissiez apprendre le processus sans vous sentir dépassé.
Vous devriez maintenant être bien équipé pour vous lancer dans votre propre projet de menu de navigation réactif. Laissez un commentaire ci-dessous et montrez-nous ce que vous proposez. Quels défis uniques avez-vous rencontrés en cours de route?