Comment créer un menu de navigation par glissement réactif

Après une longue période de recherche sur les mises en page réactives pour mobiles, j'ai passé pas mal de temps à expérimenter diverses conceptions d'interface utilisateur. Un des points chauds principaux sur la page est souvent la navigation principale du site. Les utilisateurs veulent un accès rapide à vos pages de contenu - et ce sera toujours le cas, que ce soit sur un moniteur complet ou sur un écran réactif mobile plus petit.

Pour ce tutoriel, je veux montrer comment nous pouvons utiliser une combinaison de requêtes de médias CSS3 et de jQuery pour gérer un menu de navigation coulissant. Les liens apparaîtront normalement sur le front-end, mais tomberont dans un menu caché après un redimensionnement inférieur à 600px. Au lieu de cela, nous voyons une petite icône de menu déroulant qui ouvrira et fermera à la commande.

Live Demo - Télécharger le code source

Mise en place du document

La zone d'en-tête supérieure contient une petite sélection de fichiers nécessaires à la création de cet effet. J'inclus une feuille de style personnalisée avec une copie de la dernière bibliothèque jQuery hébergée par Google. Toutes les fonctions JS personnalisées sont stockées dans un fichier externe nommé menu.js.

Démo de navigation glissante réactive

La majeure partie du balisage de page est assez peu importante en dehors de la zone d'en-tête. J'ai essayé de tout conserver à une hauteur fixe, mais l'en-tête ne peut pas utiliser une propriété CSS fixe, sinon la page ne s'agrandira pas si le menu est ouvert et fermé. Ainsi, les liens de titre et de navigation sont configurés par hauteur de la ligne valeurs en CSS.

<ul> <li>Accueil</li> <li>Sur</li> <li>Projets</li> <li>Blog</li> <li>Entrer en contact</li> </ul> Menu de navigation <h1>Désigné</h1>

La page h1 title correspond mieux au dernier élément, de sorte que l'en-tête conserve toujours sa hauteur constante. Juste à côté du titre se trouve un lien d'ancrage avec l'identifiant #navbtn et cela contient l'icône de lien de menu glissant. Il ne s'affichera à l'aide de CSS que lorsque la largeur sera inférieure à un certain seuil.

Positions de balisage en CSS

En règle générale, je n’envisage même pas de demander jQuery chaque fois que cela est possible. Le seul problème avec le basculement des menus est que nous ne pouvons pas le faire efficacement en CSS. Et les méthodes jQuery appliqueront des styles CSS inline qui remplacent la feuille de style par défaut. Il s’agit donc de positionner les éléments à l’aide de CSS et de les aider à s’animer correctement avec JavaScript.

html, corps, div, span, applet, objet, iframe, h1, h2, h4, h4, h5, h6, p, blockquote, pre, un, abbr, acronyme, adresse, gros, citer, code, del, dfn, em, img, ins, kbd, q, s, samp, petit, grève, fort, sous, sup, tt, var, b, u, i, centre, dl, dt, dd, ol, ul, li, champs, forme, étiquette, légende, tableau, légende, tbody, tbody, tfoot, thead, article, de côté, article, de côté, toile, détails, intégrer, figure, figcaption, pied de page, en-tête, hgroup, menu, navigation, sortie, rubis section, résumé, heure, marque, audio, vidéo {margin: 0; rembourrage: 0; bordure: 0; taille de police: 100%; font: hériter; alignement vertical: ligne de base; contour: aucun; -webkit-font-smoothing: antialiasé; -webkit-text-size-ajuster: aucun; -ms-text-size-adjust: none; -webkit-box-sizing: border-box; -moz-box-dimensionnement: border-box; taille de la boîte: boîte-frontière; } html {height: 101%; } body {background: # f8f8f8 url ('images / bg.png'); / * BG Neutral http://subtlepatterns.com/ps-neutral/ * / font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; taille de police: 62,5%; hauteur de ligne: 1; couleur: # 343434; rembourrage en bas: 55px; } :: selection {background: # b9e9b9; couleur: # 555; } :: - moz-selection {background: # b9e9b9; couleur: # 555; } :: - webkit-selection {background: # b9e9b9; couleur: # 555; } a {color: # 6992c0; } a: survol {couleur: # 77a4dc; } h2 {font-size: 2.9em; hauteur de ligne: 1.4em; couleur: # 626262; marge inférieure: 22px; } p {taille de la police: 1.6em; hauteur de ligne: 1.7em; couleur: # 777; marge inférieure: 15 px; } #w {display: block; largeur maximale: 900px; largeur minimale: 300px; marge: 0 auto; } #content {margin: 0 1em; background: #fff; rembourrage: 0 10px; } #pagebody {padding: 15px 25px; }

Les réinitialisations de mon navigateur CSS par défaut incluent un ensemble de codes personnalisés pour la typographie de page. La mosaïque d'arrière-plan de notre corps est également PS Neutral, enregistrée dans Subtil Patterns. J'ai dû scinder le conteneur wrapper et le conteneur body en deux divs, car nous utilisons des marges latérales à gauche et à droite pour empêcher la page de croître à 100% de sa largeur. Ajout de valeurs de marge sur le marge: 0 auto; propriété entraînera la perte du positionnement centré.

/ * barre de navigation * / #topnav {display: block; largeur: 100%; position: relative; } #topnav #navbtn {display: none; Flotter à droite; en haut: 0; largeur: 20px; hauteur: 70px; background: url ('images / menu.png') center no-repeat; retrait du texte: -99999px; débordement caché; } #topnav nav {position: absolute; en haut: 0; à droite: -10px; } #topnav nav ul {list-style: none; } #topnav nav ul li {display: block; float: gauche; taille de la police: 1.4em; marge droite: 4px; } #topnav nav ul li a {display: block; texte-décoration: aucun; hauteur de ligne: 70px; couleur: # 8ea188; poids de police: gras; rembourrage: 0 10px; border-bottom: 2px solid #fff; } #topnav nav ul li a: hover {color: # 6f8767; arrière-plan: # ddecd9; border-bottom-color: # bdd8b5; }

En stylant l'intérieur

élément nous gardons le contrôle sur la barre d’entête. Et en définissant la position sur absolue, nous contrôlons la distance que les liens de navigation suivront après le titre du titre. Remarquez comment #navbtn s'affichera masqué jusqu'à ce que redimensionné à une taille inférieure à 560 px en utilisant les requêtes de média. Tout le reste est configuré, y compris la hauteur, la largeur et le positionnement.

Styles réactifs

Un petit nombre de modifications ont été apportées lorsque la fenêtre du navigateur a été redimensionnée à une taille inférieure à 560 px. Je ne pense pas que ce soit un nombre magique, mais il se trouve que la zone de navigation par défaut commence à heurter le texte du logo. C’est à ce moment-là que nous devons masquer le menu de navigation et afficher l’icône de bascule.

/ * styles réactifs * / @media screen et (max-width: 560px) {h2 {font-size: 2.2em; } p {taille de la police: 1.45em; hauteur de ligne: 1,55 m; } #topnav {height: auto; } #topnav nav {display: none; position: statique; largeur: 100%; en haut: auto; à droite: auto; } #topnav nav ul li {float: none; marge: 0; } #topnav nav ul li a {display: block; largeur: 100%; hauteur de ligne: 1.4em; bordure: 0; rembourrage: 6px 9px; arrière-plan: # dcf4dc; } #topnav nav ul li a: hover {background: # cbdcc5; } #topnav nav ul li a.sel {color: # 6f8767; arrière-plan: # cbdcc5; } #topnav #navbtn {display: block; }}

Cela signifie également que vous devez supprimer le positionnement absolu de l'élément nav afin qu'il soit rendu sous forme de bloc statique. Les liens d'ancrage de navigation s'afficheront sous forme de lignes complètes à 100% de largeur pour une accessibilité plus rapide lorsque vous tapez sur un écran mobile. De plus, les en-têtes et les paragraphes intérieurs seront redimensionnés un peu plus petit, en association avec les valeurs de hauteur de ligne ajustées.

Interactions avec JavaScript

Le dernier morceau de code dans menu.js pourraient également être inclus directement dans le document HTML. Mais comme nous devons gérer plus d'une méthode à bascule, il est plus propre et plus efficace de séparer le balisage des effets dynamiques. Je vais décomposer ce fichier en sections afin de le rendre plus facile à lire.

$ (fonction () {var nb = $ ('# navbtn'); var n = $ ('# topnav nav'); $ (fenêtre) .on ('redimensionner', fonction () {if (nb.is ( ': hidden') && n.is (': hidden') && $ (fenêtre) .width ()> 569) {// si le menu de navigation et le bouton de navigation sont tous deux masqués, // le navigateur réactif est fermé et le menu de navigation est toujours masqué // affiche simplement le menu de navigation qui se cache automatiquement à une largeur <560px et supprime la classe. $ ('# topnav nav'). show (). addClass ('keep-nav-closed') ;}});

Le premier gros morceau est sans doute le plus déroutant. Il traite les bugs mineurs lors du redimensionnement des navigateurs de responsive à non-responsive et ne devrait en aucun cas affecter les smartphones. Nous attachons un gestionnaire d’événements à la fenêtre vérifiant le redimensionnement .on (). Les deux instructions logiques distinctes vérifient la variable qui cible l'élément de navigation d'en-tête, ainsi que le lien bascule du menu de navigation.

Lorsque le navigateur est réactif et que l'utilisateur active / ferme le menu, il ajoute une ligne style attribut. Cela aura la priorité sur tout ce qui est écrit dans la feuille de style et c'est un problème après l'ouverture et la fermeture du menu. Le nav aura un style permanent de affichage: aucun; même après avoir été redimensionné plus grand que 560px.

C'est ce que la 2nd si {} recherche. Lorsque la navigation et le bouton de menu sont tous deux masqués, la présentation était sensible, l'utilisateur ouvrait / fermait le menu, puis redimensionnait pour revenir à la vue normale. Il suffit donc d'afficher à nouveau le nav mais il y a un problème. La méthode show () de jQuery attache également des styles en ligne, ce qui signifie que lors du redimensionnement, le menu de navigation reste ouvert en permanence. Pour résoudre ce problème, je vais ajouter une classe .keep-nav-closed. Cela ne sera ajouté que si le nav est fermé, puis redimensionné plus grand - s'il est laissé ouvert quand il est réactif, il restera ouvert quand redimensionné plus grand et redescendra.

if ($ (this) .width () <570 && n.hasClass ('keep-nav-closed'))) // // si le menu de navigation et le bouton de navigation sont tous deux visibles, //, le navigateur réactif est passé de ouvert à non réactif, puis à nouveau. // masque à nouveau le menu de navigation et supprime la classe masquée $ ('# topnav nav'). hide (). removeAttr ('class'); }

Maintenant, l’autre instruction if {} devrait expliquer pourquoi nous recherchons cette classe. Il n'apparaîtra qu'après la deuxième fois que vous aurez redimensionné et ouvert le nav. Nous savons donc qu'il faut supprimer la classe de cette manière, de manière à ce qu'elle reste fermée lors du redimensionnement à une largeur réactive. C'est un bug étrange et je n'ai pas encore trouvé de solution plus petite ou plus rapide pour gérer les styles jQuery en ligne, autre que la suppression complète de l'attribut (ce qui cause toujours des problèmes). Alors maintenant, passons à autre chose et examinons le dernier segment de JavaScript.

$ ('# navi topnav a, # topnav h1a, # btmnav nav a'). on ('click', function (e) {e.preventDefault (); // arrête le chargement de tous les liens d'ancrage hash (#)}} ) $ ('# navbtn'). on ('click', fonction (e) {e.preventDefault (); $ ("# topnav nav"). slideToggle (350);});

Les deux gestionnaires d'événements recherchent des événements de clic sur différentes cibles. Le premier est verrouillé sur tous les liens d'ancrage différents dans les sections de navigation d'en-tête et de pied de page. Les valeurs href sont des symboles de hachage (#) qui ne vont nulle part, je les ai donc définies pour ne rien charger. Ceci est similaire lorsque vous cliquez sur la bascule de navigation car nous ne voulons pas charger de hachage dans l'URL de la page. Au lieu de cela, le menu de navigation masqué réactif s'ouvrira et se fermera à 350 millisecondes en ignorant complètement la valeur href.

Live Demo - Télécharger le code source