Comment créer une navigation réactive

Une des parties les plus difficiles à être responsable sur un site est “la navigation”, cette partie est vraiment importante pour l'accessibilité du site Web, car c'est l'une des façons dont les visiteurs sautent par-dessus les pages Web..

Il existe en fait de nombreuses façons de créer une navigation réactive sur le site Web et même certains plugins jQuery sont disponibles pour le faire en une seconde..

Cependant, plutôt que d’appliquer une solution instantanée, dans cet article, nous allons vous guider à travers comment construire une navigation simple à partir du sol et en utilisant les requêtes de médias CSS3 et un peu jQuery pour l'afficher dans une petite taille d'écran comme les smartphones correctement.

Alors commençons.

Démo
Source de téléchargement

HTML

Tout d’abord, ajoutons la méta-fenêtre à l’intérieur du tête étiquette. Ce meta viewport Une balise est requise pour que notre page s'adapte correctement à toute taille d'écran, en particulier dans la fenêtre d'affichage mobile..

… Puis ajoutez l'extrait suivant comme balise de navigation à l'intérieur du corps étiquette.

   Accueil
 Comment
 Les icônes
 Conception
 Web 2.0
 Outils
 
 Menu

Comme vous pouvez le voir ci-dessus, nous avons six liens de menu principaux et un lien supplémentaire les a ajoutés. Ce lien supplémentaire sera utilisé pour tirez la navigation dans le menu quand il est caché dans un petit écran.

Lectures complémentaires: N'oubliez pas la balise meta de la fenêtre d'affichage.

modes

Dans cette section, nous commençons à styler la navigation. Le style ici est seulement décoratif, vous pouvez choisir toutes les couleurs que vous désirez. Mais dans ce cas, nous voulons (personnellement) que le corps avoir une couleur douce et crémeuse.

 body background-color: # ece8e5;

le nav balise qui définit la navigation aura 100% toute la largeur de la fenêtre du navigateur, tandis que le ul où il contient nos liens de menu primaires auront 600px pour la largeur.

 nav hauteur: 40px; largeur: 100%; arrière-plan: # 455868; taille de police: 11 points; famille de polices: 'PT Sans', Arial, sans-serif; poids de police: gras; position: relative; fond de bordure: solide 2px # 283744;  nav ul padding: 0; marge: 0 auto; largeur: 600px; hauteur: 40px;

Ensuite, nous allons flotte le menu est lié à la gauche, donc ils seront affichés horizontalement côte à côte, mais le fait de flotter un élément entraînera également la réduction de son parent.

 nav li display: inline; float: gauche;

Si vous remarquez le balisage HTML ci-dessus, nous avons déjà ajouté clearfix dans le classe attribuer à la fois la nav et ul pour effacer les choses quand nous flottons les éléments à l'intérieur en utilisant ce hack clearfix CSS. Alors, ajoutons les règles de style suivantes dans la feuille de style.

 .clearfix: before, .clearfix: after contenu: ""; affichage: table;  .clearfix: after clear: both;  .clearfix * zoom: 1;

Depuis nous avons six liens de menu et nous avons également spécifié le conteneur pour 600px, chaque lien de menu aura 100px pour la largeur.

 nav a color: #fff; affichage: inline-block; largeur: 100px; text-align: center; texte-décoration: aucun; hauteur de ligne: 40px; text-shadow: 1px 1px 0px # 283744;

Les liens de menu seront séparés par 1px bord droit, sauf le dernier. Rappelez-vous notre précédent post sur le modèle de boîte, la largeur du menu sera élargie pour 1px ce qui en fait 101px comme l'ajout de frontière, alors nous changeons la taille de la boîte modèle à boîte à bordure afin de garder le menu reste 100px.

 nav li a border-right: 1px solid # 576979; taille de la boîte: boîte-frontière; -moz-box-dimensionnement: border-box; -webkit-box-dimensionnement: border-box;  nav li: dernier enfant a border-right: 0;

Ensuite, le menu aura une couleur plus brillante quand il est en :flotter ou :actif Etat.

 nav a: survol, nav a: actif background-color: # 8c99a4;

… Et enfin, le lien supplémentaire sera caché (pour l'écran du bureau).

 nav a # pull display: none;

À ce stade, nous ne stylons que la navigation et rien ne se passera lorsque nous redimensionnerons la fenêtre du navigateur. Alors, passons à l'étape suivante.

Lectures complémentaires: Format CSS3 (Hongkiat.com)

Requêtes de médias

Les requêtes de média CSS3 sont utilisées pour définir la manière dont les styles seront décalés dans certains points d'arrêt ou en particulier les tailles d'écran du périphérique..

Depuis notre navigation est initialement 600px fix-width, nous allons d’abord définir les styles lorsqu’il est visualisé dans 600px ou plus petite taille d'écran, donc pratiquement parlant, ce est notre premier point d'arrêt.

Dans cette taille d'écran, chacun des deux liens de menu sera affiché côte à côte, de sorte que le ulLa largeur de ici sera 100% de la fenêtre du navigateur tandis que les liens du menu auront 50% pour la largeur.

 Écran @média et (largeur maximale: 600 pixels) nav hauteur: auto;  nav ul width: 100%; bloc de visualisation; hauteur: auto;  nav li width: 50%; float: gauche; position: relative;  nav li a border-bottom: 1px solid # 576979; border-right: 1px solid # 576979;  nav a text-align: left; largeur: 100%; retrait du texte: 25px;

… Et ensuite, nous définissons également comment la navigation s’affiche lorsque l’écran devient plus petit 480px ou inférieur (c'est donc notre deuxième point d'arrêt).

Dans cette taille d’écran, le lien supplémentaire que nous avons ajouté commencera à être visible et nous donnerons également au lien une “Menu” icône sur son côté droit en utilisant le :après pseudo-élément, tandis que les liens du menu principal seront masqués pour économiser davantage d'espaces verticaux sur l'écran.

 Écran @média uniquement et (largeur maximale: 480px) nav bordure-bas: 0;  nav ul display: none; hauteur: auto;  nav a # pull display: block; couleur de fond: # 283744; largeur: 100%; position: relative;  nav a # pull: after content: ""; background: url ('nav-icon.png') no-repeat; largeur: 30px; hauteur: 30px; affichage: inline-block; position: absolue; à droite: 15px; en haut: 10 px;

Enfin, lorsque l’écran devient plus petit de 320px et bas le menu sera affiché verticalement de haut en bas.

 Écran @média uniquement et (largeur maximale: 320 pixels) nav li display: block; float: aucun; largeur: 100%;  nav li a border-bottom: 1px solid # 576979;

Maintenant, vous pouvez essayer de redimensionner la fenêtre du navigateur. Il devrait maintenant être capable d'adapter la taille de l'écran.

Lectures complémentaires: Requêtes de support pour les périphériques standard.

Affichage du menu

À ce stade, le menu sera toujours masqué et ne sera visible que lorsque vous en aurez besoin en tapotant ou en cliquant sur l'icône. “Menu” lien et nous pouvons obtenir l'effet en utilisant le jQuery slideToggle ().

 $ (fonction () var pull = $ ('# pull'); menu = $ ('nav ul'); menuHeight = menu.height (); $ (pull) .on ('clic', fonction (e) e.preventDefault (); menu.slideToggle ();););

Cependant, lorsque vous redimensionnez la fenêtre du navigateur juste après que vous ayez vu et caché le menu dans un petit écran, le menu reste masqué, comme le affichage: aucun le style généré par jQuery est toujours attaché à l'élément.

Nous devons donc supprimer ce style lors du redimensionnement de la fenêtre, comme suit:

 $ (fenêtre) .resize (fonction () var w = $ (fenêtre) .width (); if (w> 320 && menu.is (': hidden')) menu.removeAttr ('style'); );

Bien, c’est tous les codes dont nous avons besoin, nous pouvons maintenant afficher la navigation à partir des liens suivants et nous vous recommandons de le tester dans un outil de test de conception réactif, tel que le Responsinator, afin que vous puissiez le visualiser en différentes largeurs à la fois.

Démo
Source de téléchargement

Bonus: une manière alternative

Comme nous l’avons mentionné plus haut dans ce billet, il existe d’autres moyens de le faire, et en utilisant une bibliothèque JavaScript appelée SelectNav.js est l'un des moyen le plus simple. Il s'agit d'un code JavaScript pur qui ne repose pas sur une autre bibliothèque tierce, telle que jQuery..

Fondamentalement, il va dupliquer votre menu de liste et le transformer en un menu utilisera l'interface utilisateur native de l'appareil lui-même.

Veuillez vous reporter à la documentation officielle pour poursuivre la mise en œuvre..

Conclusion

Nous sommes parvenus à créer une navigation réactive à partir de zéro. Celui que nous avons créé ici n’est qu’un exemple parmi d’autres, et comme nous l’avons dit plus haut dans cet article et montré ci-dessus, de nombreuses autres solutions peuvent être mises en œuvre. C’est donc maintenant à vous de décider quelle pratique convient le mieux pour répondre aux besoins et à la structure de navigation de votre site Web..