Étapes simples pour créer une barre de navigation fixe

Lors de la conception d'un système de navigation pour votre site Web, il est important de prendre en compte les modifications dynamiques permettant de gérer l'assistance mobile et les conceptions réactives. Mais une autre approche systématique consiste à garder vos visiteurs en contrôle total tout au long du processus de visualisation. Cela nécessite souvent un menu d'accès rapide ou une zone de liste déroulante pour extraire les liens vers d'autres pages Web.

Dans ce didacticiel, je vais créer une barre de navigation supérieure qui apparaît uniquement après le déplacement au-delà de la navigation dans l'en-tête. Cet effet est intéressant si vous avez quelques pages qui sont le plus souvent consultées par les visiteurs. La barre de navigation collante restera fixée en haut de l'écran et ne disparaîtra que lorsque vous entrerez de nouveau dans la zone de navigation d'en-tête. Pour avoir une idée de ce que nous allons faire, consultez mon exemple de démonstration en direct après le saut!

Live Demo - Télécharger le code source

Structurer le document

Nous devons d’abord créer l’espace de travail du projet et construire le code HTML original. Il est à noter que nous aurons besoin d’utiliser jQuery avec les effets CSS.

Créer un nouvel ensemble de documents nommés index.html et styles.css dans le même répertoire. J'utilise une image de fond personnalisée et une bannière de logo dans la section en-tête. Vous pouvez télécharger ces ressources avec mon code source si vous voulez gagner du temps. Maintenant, dans le fichier d'index principal, nous devons configurer un doctype HTML5 et ajouter les liens associés.

Barre d'outils de navigation supérieure fixe

Heureusement, beaucoup des ressources dont nous avons besoin peuvent être hébergées à l'extérieur. Notre police Web personnalisée, appelée Capriola, a pour style le texte de l'en-tête. Nous avons également besoin d'une copie de la dernière bibliothèque jQuery hébergée à partir du code CDN de Google. La plupart de ces éléments doivent être familiers. Passons maintenant au contenu du corps.

Blocs de construction HTML

La mise en page n'est pas aussi compliquée que vous pourriez le penser. Tout en haut, après avoir ouvert la balise body, nous devons configurer la barre de navigation fixe. Cet élément utilisera affichage: aucun; rester initialement caché jusqu’à ce que vous ayez fait défiler un peu la page

<ul> <li>Page d'accueil</li> <li>À propos de nous</li> <li>Communauté</li> <li>Les membres du personnel</li> <li>Contact</li> </ul>

L'élément UL interne centre tous les liens afin qu'ils soient au même endroit que le contenu principal. Ensuite, sous cette barre de navigation, nous configurons l’encapsuleur principal qui centre la page à une largeur de 710 pixels, moins 30 pixels pour le remplissage. Le total s'élève à 680px, ce qui est la taille idéale pour le billet de faveur de Pontus Johansson utilisé dans la conception de la bannière.

Un site webLogo <ul> <li>Page d'accueil</li> <li>À propos de nous</li> <li>Communauté</li> <li>Les membres du personnel</li> <li>Contact</li> </ul>

La barre de navigation principale contient exactement les mêmes liens que ceux que nous conservons dans la barre d’en-tête fixe. Cela a été conçu de manière à ce que votre conception soit modifiée, mais vous pouvez changer les choses et ne placer que les liens les plus importants dans votre navigation fixe. L'en-tête peut contenir des menus déroulants qui semblent également déplacés dans une barre de navigation fixe coulissante.

Personnaliser CSS

Avant de manipuler le bref extrait de JavaScript, laissez-moi vous expliquer comment nous pouvons styler tout ce code. Tout d'abord, j'utilise un style de réinitialisation plus personnalisé, basé sur la feuille de style d'origine d'Eric Meyer. J'ai défini le taille de la boîte propriété comme boîte à bordure de sorte que les valeurs de largeur exactes incluent marge / remplissage et non pas développer, comme le comportement par défaut.

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-text-size-adjust: 100%; -webkit-box-sizing: border-box; -moz-box-dimensionnement: border-box; taille de la boîte: boîte-frontière; } html {height: 101%; } body {font-family: Tahoma, Verdana, Arial, sans-serif; taille de police: 62,5%; hauteur de ligne: 1; rembourrage en bas: 65px; background: # 444 url ​​('images / bg.png'); } article, aparté, détails, figcaption, figure, pied de page, en-tête, hgroup, menu, navigation, section {display: block; } ol, ul {list-style: none; } blockquote, q {quotes: none; } blockquote: before, blockquote: after, q: before, q: after {content: "; content: none;} strong {poids de police: gras;} table {border-collapse: collapse; border-spacing: 0;} img {border: 0; max-width: 100%;}

L'image d'arrière-plan utilise Debut Dark du site Web Subtle Patterns. Il existe de nombreuses textures répétitives fantastiques que vous pouvez télécharger gratuitement pour améliorer la qualité de vos mises en page. Mais pour passer à la structure principale, nous devons configurer un conteneur d’emballage afin qu’il remplisse naturellement le contenu central. De plus, l'arrière-plan doit apparaître en blanc dans la zone de contenu, mais pas dans la section d'en-tête complète.

#w {display: block; largeur: 710px; rembourrage: 14px 15px; marge: 0 auto; marge supérieure: 45px; } #content {display: block; background: #fff; rembourrage: 14px 20px; } #logo {display: block; bordure: solide 1px # 232323; border-bottom-width: 0; } #logobg {display: block; largeur: 100%; hauteur: 130px; background: url ('images / logo.png') en haut à gauche, no-repeat; retrait du texte: 100%; espace blanc: maintenant; débordement caché; } / * navigation du haut * / #navigation {display: block; hauteur: 35px; couleur de fond: # 131313; background-image: -webkit-gradient (linéaire, en haut à gauche,en bas à gauche, du n ° 202020) au n ° 131313); background-image: -webkit-linear-gradient (haut, n ° 202020, n ° 131313); image d'arrière-plan: -moz-linear-gradient (haut, # 202020, # 131313); background-image: -ms-linear-gradient (haut, n ° 202020, n ° 131313); background-image: -o-linear-gradient (haut, n ° 202020, n ° 131313); background-image: linear-gradient (haut, # 202020, # 131313); } #navigation ul {list-style: none; remplissage: 0px 7px; } #navigation ul li {display: inline; float: gauche; } #navigation ul li a {display: block; remplissage: 0 8px; couleur: #fff; taille de police: 1.1em; texte-décoration: aucun; hauteur de ligne: 35px; poids de police: gras; marge droite: 6px; text-shadow: 1px 1px 1px # 000; -webkit-transition: tous les 0.2s linéaires; -moz-transition: tout 0.2s linéaire; transition: tous 0.2s linéaires; } #navigation ul li a: hover {color: # a8d6e7; }

J'ai configuré un dégradé d'arrière-plan répétitif très coloré dans le menu de navigation principal. En utilisant également une hauteur fixe pour la barre, nous pouvons configurer la même valeur fixe pour hauteur de la ligne propriétés sur les éléments de la liste. Cela force tout le texte à être centré verticalement dans le conteneur navbar. J'ai inclus quelques propriétés de transition CSS3 pour gérer un état de survol plus élégant.

Correction de la barre de navigation cachée

Au bas de notre feuille de style CSS, vous trouverez tous les codes liés à notre navigation en haut fixe. Le conteneur couvre 100% de la largeur de la page afin que la barre apparaisse sur tout l'écran. Mais l'objet UL interne contient tous les liens centrés à la même position que notre contenu. La couleur de fond est également appliquée à l'aide de la syntaxe rgba () pour la transparence alpha.

/ * navigation fixe masquée * / #fixedbar {display: none; position: fixe; en haut: 0; largeur: 100%; hauteur: 80px; arrière-plan: rgba (0,0,0,0,75); } #fixednav {display: block; largeur: 710px; marge: 0 auto; remplissage: 0px 25px; } #fixednav li a {display: block; float: gauche; taille de police: 1.75em; poids de police: gras; couleur: # 96aed8; hauteur de ligne: 80px; texte-décoration: aucun; remplissage: 0px 8px; marge droite: 6px; -webkit-transition: tous les 0.2s linéaires; -moz-transition: tout 0.2s linéaire; transition: tous 0.2s linéaires; } #fixednav li a: hover {color: #fff; arrière-plan: rgba (0,0,0,0,3); }

Encore une fois, nous pouvons voir une hauteur fixe à 80px qui est assez grande par rapport à l'original. Mais cela attire votre attention et les liens sont très faciles à manœuvrer. Je souhaitais conserver un effet d'animation similaire en utilisant les transitions CSS3 en survol. Ainsi, les liens remplissent un autre fond de 30% qui apparaît plus sombre, mais toujours transparent pour le contenu derrière.

Gestion des animations JavaScript

Je regarde tout au bas de notre fichier index.html avant la clôture finale étiquette. Ici, je veux ajouter un petit peu de JavaScript qui gérera les effets de défilement pour afficher et masquer la barre de navigation fixe. Nous pouvons ventiler ligne par ligne les choses les plus compliquées.

$ (document) .ready (function () {$ ('# navigation a, #fixedbar a'). on ('clic', fonction (e) {e.preventDefault ();}); $ (fenêtre) .on ('scroll', function () {var scrolltop = $ (this) .scrollTop (); if (scrolltop> = 215) {$ ('# barre fixe'). fadeIn (250);} sinon if (scrolltop <= 210 ) {$ ('# fixedbar'). fadeOut (250);}});});

L'appel jQuery typique suspend l'exécution du DOM avant de lancer le rendu avant d'exécuter des codes. On peut aussi ignorer le premier bloc qui utilise la ligne e.preventDefault (); pour arrêter les liens d'ancrage du chargement. Les éléments les plus importants sont gérés dans l'écouteur d'événements pour $ (fenêtre) .on ('scroll') qui lance une nouvelle fonction à chaque fois que l'utilisateur fait défiler l'écran vers le haut ou vers le bas.

La variable? Scrolltop? contient la valeur en pixels à partir du haut de l'écran. Cela mettra à jour chaque fois que l'utilisateur fait défiler vers un nouvel emplacement. En utilisant cette valeur, nous pouvons vérifier si l'utilisateur a fait défiler au-delà de 215px et, le cas échéant, afficher la barre de navigation masquée. Par contre, s'ils défilent à 210 pixels ou moins, nous savons que la barre de navigation de l'en-tête principal est visible. Nous masquons donc la barre de navigation fixe et éclaircissons l'espace à l'écran.

Live Demo - Télécharger le code source

Dernières pensées

Bien qu'il s'agisse d'un effet relativement simple, le code peut prêter à confusion si vous ne connaissez pas JavaScript. Passez un peu de temps à parcourir mes extraits pour vous assurer de bien comprendre comment nous affichons et cachons le menu. N'hésitez pas également à télécharger une copie du code source de mon projet et à vous débrouiller seul. Si vous souhaitez supprimer des questions ou des commentaires sur ce didacticiel, faites-le nous savoir dans le fil de discussion après discussion.