Share
Dans ce didacticiel, nous allons créer une barre de navigation qui reste avec vous lorsque vous faites défiler l'écran. Nous allons également ajouter un gimmick dans le mix pour le peaufiner..
«Tout le monde aime les rubans», explique Chris Coyier lorsqu’il discute des vertus du :avant et :après pseudo-éléments. J'ai vu ces rubans stylisés à bords triangulaires apparaître partout sur Internet (un exemple frappant étant la page Introducing Timeline de Facebook) et, bien qu'ils aient un certain attrait, je dois admettre que l'effet spatial qu'ils créent ne fait pas tout. t regarde bien à moi.
Cependant, les rubans sont appréciés pour une raison: ils brisent le paradigme de la conception à plat, auquel nous sommes traditionnellement liés, et ils constituent l’un des rares éléments visuels à le faire de manière discrète. Mais, comme le dit le vieil adage, il devrait exister plus d'un moyen de traiter un chat - donc, dans ce tutoriel, je proposerai un style visuel alternatif pour de tels éléments, que je trouve beaucoup plus naturel et esthétique. plaisant. J'espère que vous l'aimez et que vous en faites bon usage!
Dans ce tutoriel, nous allons utiliser l'un des nouveaux éléments de HTML5, le nav tag, en tant que conteneur pour une liste horizontale de liens. Je vais expliquer brièvement comment le rendre joli en utilisant un peu de CSS.
Plus important encore, vous vous familiariserez avec les bases du plug-in Waypoints de jQuery, qui fourniront des fonctionnalités avancées: lorsque l'utilisateur fait défiler l'écran vers le bas, la barre de navigation reste en haut de la fenêtre d'affichage, ainsi que des modifications pour indiquer la section en cours. . En guise de touche supplémentaire, nous utiliserons un autre plug-in, ScrollTo, afin de permettre un défilement régulier et un positionnement pratique lorsque l'utilisateur clique sur les liens de navigation..
Je suis sûr que vous connaissez déjà les différents nouveaux éléments introduits avec HTML5. Dans cet exemple, nous allons utiliser deux d'entre eux: et . Nous allons commencer avec ce qui suit:
Une rubrique assez large.
Lorem ipsum…
Nous allons devoir donner à notre barre de navigation une largeur explicite. Faites-le 28px plus large que l'emballage, et déplacez-le avec une marge gauche négative. Donnons-lui aussi des bords supérieurs légèrement arrondis en utilisant bordure - * - rayon, ainsi que du rembourrage arbitraire.
nav position: relative; largeur: 928px; rembourrage: 2em; marge gauche: -14px; bord-haut-gauche-rayon: 14px 7px; border-top-right-radius: 14px 7px;
Ensuite, nous allons ajouter une liste non ordonnée de liens dans la barre de navigation et définir ses éléments sur affichage: bloc en ligne afin de les mettre tous sur une seule ligne. Nous n'avons besoin d'aucune balle, nous allons donc aussi lancer style de liste: aucun dans le mix.
nav li display: inline-block; style de liste: aucun;
Jusqu'à présent, vous devriez avoir quelque chose comme ça:
Maintenant, si seulement CSS nous permettait d’avoir plusieurs pseudo-éléments (i.e. :: après :: après), nous pourrions facilement compléter les bords arrondis de la barre de navigation de manière sémantique. Mais nous ne pouvons pas faire cela, donc nous devrons ajouter deux non-sémantique divs à la fin du nav. Donnez-leur les cours nav-left et nav-right (ou vous pouvez les appeler quelque chose d'imaginant, comme Castor et Pollux). Ils sont 14px large par 14px de haut, et sont absolupositionné à 14 pixels de la partie inférieure de la nav.
Comme vu ci-dessus, le rayon de la frontière famille de propriétés peut prendre deux valeurs pour chaque coin. Celles-ci peuvent également être des pourcentages de la largeur de l'élément, ce qui est très pratique - cette approche permet au rayon de la frontière de s'adapter automatiquement aux changements de dimensions de la boîte..
Les petites "ombres" qui complètent l'aspect du ruban de la barre de navigation sont créées à l'aide de ::après pseudo-éléments. Leur largeur et leur hauteur, ainsi que leurs rayons de bordure, sont également définis à l'aide de pourcentages..
/ * swap 'left' avec 'right' pour les deux autres * / .nav-left position: absolute; gauche: 0; en bas: -14px; largeur: 14px; hauteur: 14px; arrière-plan: # 848a6a; rayon-bas-gauche-rayon: 100% 50%; .nav-left :: after content: "; position: absolute; droite: 0; width: 66%; height: 66%; background: # 000; border-top-left-radius: 100% 50%; border rayon inférieur gauche: 100% 50%;
Et nous avons fini ici!
Après nous être débarrassés de la plupart des géométries impossibles des rubans à bords droits, poursuivons.
Pour obtenir l'effet d'en-tête flottant, nous allons utiliser un plugin jQuery appelé Waypoints, de Caleb Troughton. Son seul but est de déclencher des événements lorsque l'utilisateur fait défiler jusqu'à un certain élément. Comme vous le verrez, il est extrêmement simple, tout en offrant une grande flexibilité - vous pouvez consulter plusieurs exemples sur sa page d'accueil..
Incluez jQuery et des points de cheminement dans votre page, et commençons!
La première chose à faire est d’enregistrer un point de cheminement en appelant le .waypoint () méthode sur un élément. Bien sûr, cela ne fait rien par lui-même - vous devrez définir une fonction de gestionnaire pour l'événement. Le moyen le plus simple de le faire est de passer cette fonction en tant que paramètre à .waypoint ().
Essayez-le maintenant: ajoutez ce qui suit à votre script et un message s’affiche lorsque vous faites défiler la barre de navigation..
Accentsconagua
$ (function () // Une fois la page chargée, $ ('nav'). waypoint (// crée un point de cheminement function () alert ("Point de cheminement atteint.");)); Maintenant, afin d’obtenir l’effet souhaité, les choses se compliqueront forcément un peu. Premièrement, nous devons enfermer notre barre de navigation dans un conteneur, qui constituera notre point de passage, et servir d’espace réservé (plus de détails ci-dessous)..
Dans votre CSS, créez la règle CSS suivante. (Pendant que vous y êtes, déplacez les marges verticales du nav pourrait avoir à la Nav-conteneur)
.collant position: fixe; en haut: 0;
Et nous sommes prêts pour la bonne partie! Modifiez le contenu de votre script comme suit:
$ (function () // Faisons au préalable nos recherches dans le DOM var var_container = $ (".nav-conteneur"); var n = (("nav")); nav_container.waypoint (gestionnaire: function (event, direction) nav.toggleClass ('sticky', direction == 'down'););); D'accord, d'où diable est-ce que tout ça vient, demandez-vous à juste titre. Eh bien, vous avez probablement compris que nous attachons un waypoint à la Nav-conteneur; mais cette fois, nous le faisons différemment. Au lieu de passer directement la fonction handler à .waypoint (), nous l'encapsulons dans un objet. En soi, cela ne fait aucune différence: les deux sont des moyens tout à fait valables de faire la même chose. Cependant, l'objet que nous passons peut contenir plusieurs autres valeurs d'option. Par conséquent, son utilisation rend le code plus cohérent ultérieurement..
La fonction de gestionnaire que nous avons définie reçoit deux paramètres: le premier est le jQuery standard un événement objet, qui présente peu d'intérêt ici. Le second est spécifique aux points de cheminement: c’est une chaîne dont la valeur est soit 'vers le bas' ou 'up' en fonction de la manière dont l'utilisateur faisait défiler lorsqu'il atteignait le point de passage.
Désormais, il est très important de savoir quelle direction prend l'utilisateur, tout simplement parce que cela nous permet d'exécuter un comportement différent dans les deux sens. Dans le corps de la fonction handler, nous utilisons une variante relativement peu connue de celle de jQuery .toggleClass () méthode, qui constitue un raccourci utile: dans cette syntaxe, le deuxième paramètre détermine si la classe sera ajoutée à l'élément cible ou supprimée de celui-ci. Lorsque l'utilisateur fait défiler l'écran, l'expression direction === 'vers le bas' évalue à vrai, donc notre barre de navigation reçoit le gluant classe, et colle au sommet de la fenêtre. Dès que l'utilisateur revient à la page précédente, la classe est supprimée de la barre de navigation, qui retourne à sa place. Essayez-le maintenant.
Cool hein? Toutefois, si vous faites lentement défiler le waypoint que vous venez de créer, vous remarquerez probablement que lorsque vous le transmettez, le contenu «saute» un peu en raison de la suppression de la barre de navigation du flux de contenu. En plus de paraître très bâclé, un tel comportement peut éventuellement masquer une partie de votre contenu et nuire à sa convivialité. Heureusement, tout ce qu’il faut, c’est une solution simple: ajouter le code suivant à votre fonction de gestion permet d’éviter le saut..
if (direction == 'down') nav_container.css ('height': nav.outerHeight ()); else nav_container.css ('height': 'auto'); Ce qui se passe ici est assez évident: nous utilisons Nav-conteneur en tant qu'espace réservé, comme mentionné ci-dessus. Lorsque nous faisons défiler l'écran vers le bas, nous agrandissons sa hauteur et le contenu ci-dessous reste en place. Il y a cependant un inconvénient: pour que cela fonctionne tel quel, vous devez appliquer toutes les marges verticales autour de la barre de navigation. Nav-conteneur et non au nav.
Tiens voilà! Nous avons nous-mêmes une belle barre de navigation fixe, comme de nombreux autres sites le font déjà. Le spectacle est terminé, les gars…
… ou est-ce? Eh bien, il y a toujours un truc ou deux que vous voudrez peut-être voir et qui pourrait vous donner une longueur d'avance. Si tel est le cas, lisez la suite.
Si vous y réfléchissez, il existe de nombreux cas où le déclenchement d'un événement lorsqu'un élément atteint le bord même de la fenêtre du navigateur n'est pas ce que vous voulez faire. Heureusement, Waypoints offre une option pratique pour cela: décalage. Voici à quoi ça ressemble:
nav.waypoint (handler:…, offset: 50)
décalage vous permet de créer le point de cheminement réel à une distance variable du haut de l’élément. Une valeur positive déclenche le point de cheminement lorsque le sommet de l'élément se trouve à la distance spécifiée au-dessus du haut de la fenêtre d'affichage, et une valeur négative déclenche le point de cheminement lorsque l'élément se trouve très au-dessus du haut de la fenêtre d'affichage (l'utilisateur a bien défilé ).
La valeur de décalage peut être un nombre (représentant un nombre fixe de pixels), une chaîne contenant un pourcentage (interprété comme un pourcentage de la hauteur de la fenêtre d'affichage) ou une fonction renvoyant un nombre de pixels. Le dernier peut permettre une certaine souplesse et nous en ferons un usage plus tard. Pour l'instant, restons sur des valeurs fixes et voyons à quoi elles servent.
La première chose qui me vient à l'esprit est d'ajouter un peu d'espace au-dessus de l'élément collant. En utilisant le décalage variable, cela est facile: pour un décalage de 15 pixels par rapport au sommet, ajoutez offset: 15px à .waypoint ()Options de, et changer en haut: 0px à en haut: 15px dans le .gluant Règle CSS.
Si votre conception le requiert, un petit dégradé au-dessus de la barre de navigation pourrait également être une touche agréable. Ceci est facilement accompli en ajoutant encore un autre div à l'intérieur de nav, et écrire un peu de CSS:
.collant .nav-above position: absolute; en haut: -15px; à gauche: 1em; à droite: 1em; hauteur: 15px; arrière-plan: gradient linéaire (haut, rgba (255,255,255,1) 0%, rgba (255,255,255,0) 100%); / * ajoute le code de dégradé croisé selon les besoins * /
Ce joli morceau de bonbon pour les yeux fonctionnerait bien dans des designs minimalistes.
Une chose que Caleb a judicieusement incluse dans les points de route est la capacité de générer un décalage dynamique d’un point de route, comme ceci:
nav.waypoint (handler:…, offset: function () return - (nav.outerHeight () + 50);)
Cela nous permet d'avoir un gestionnaire qui se déclenche lorsque l'utilisateur a déjà fait défiler 50 pixels au-dessous du bas de l'élément, sans avoir besoin de connaître sa hauteur à l'avance..
Remarque: Ces décalages générés de manière procédurale (ainsi que ceux exprimés en pourcentages) sont recalculés chaque fois que la fenêtre est redimensionnée, que de nouveaux points de cheminement sont ajoutés ou que les options d'un point de cheminement sont modifiées. Si vous faites autre chose qui pourrait affecter la position des points de passage (comme changer le DOM ou la mise en page), assurez-vous d'appeler $ .waypoints ('actualiser') ensuite pour les positions à recalculer.
Dans le cadre de notre tutoriel, l’une des utilisations de cette fonctionnalité est de faire glisser la barre de navigation sans à-coups depuis le haut. Soyez prêt - ce qui suit est le plus gros morceau de code à ce jour. Il ne devrait y avoir rien dans ce que vous ne connaissez pas déjà, alors, voici:
var top_spacing = 15; var waypoint_offset = 50; nav_container.waypoint (gestionnaire: function (événement, direction) if (direction == 'bas') nav_container.css ('hauteur': nav.outerHeight ()); nav.addClass ("collant"). stop () .css ("top", -nav.outerHeight ()) .animate ("top": top_spacing); else nav_container.css ('height': 'auto'); nav.removeClass ("collant") .stop () .css ("top", nav.outerHeight () + waypoint_offset) .animate ("top": "), offset: function () retour - (nav .outerHeight () + waypoint_offset);); Pas trop mal! C'est tout un tarif jQuery standard: dès que nous ajoutons ou supprimons le gluant classe à la nav, nous substituons la position verticale de l'élément en utilisant .css (), et alors .animer() à ce qu'il devrait être. le .Arrêtez() sert à prévenir d'éventuels bugs en effaçant la file d'attente des événements de jQuery.
Il y a toutefois un petit effet secondaire: dans la mesure où le code reprend la position verticale de l'élément de navigation une fois fixé, vous pouvez également laisser tomber le en haut: 15px déclaration de votre CSS. Si vous faites partie d'un grand projet, avec des personnes distinctes travaillant sur la conception et les scripts front-end, cela peut constituer un problème, car il est facile de perdre la trace de ces hacks. Pour vous informer, il existe des plugins - tels que l'excellent jQuery.Rule d'Ariel Flesler, qui peuvent être utilisés pour combler le fossé entre les scripts et les feuilles de style. Vous devrez décider vous-même si vous avez besoin de quelque chose comme ça.
Vous pourriez sûrement obtenir un effet similaire avec CSS @ keyframes au lieu de cela, mais il y a beaucoup moins de soutien pour eux (et beaucoup de préfixes de vendeurs), ils sont moins flexibles et l'animation «up» serait un gros no-no. Puisque nous ne quittons pas la voie de l'amélioration progressive, il n'y a aucune raison de ne pas rester avec la fonctionnalité robuste de jQuery.
Vous pourriez avoir besoin de changer l’élément mis en surbrillance au fur et à mesure que le lecteur avance au-delà des différentes sections de votre page. Avec les points de repère, c'est assez facile à réaliser. Vous devrez ajouter les éléments suivants à votre script:
$ (function () … // copier à partir d'ici… var sections = $ ('section'); var liens_connexion = $ ('nav a'); sections.waypoint (gestionnaire: function (événement, direction) // code du gestionnaire, offset: '35% '); //… jusqu'à ici); Cette fois, nous utilisons un décalage exprimé en pourcentage de la hauteur de la fenêtre. En réalité, cela signifie que la ligne imaginaire qui indique à notre script quelle section est actuellement visualisée est placée à environ un tiers du haut de la fenêtre d'affichage, à savoir l'endroit où le spectateur regardera lorsqu'il lit un long texte. Une solution plus robuste pourrait utiliser une fonction pour s'adapter aux changements de hauteur de la barre de navigation.
Le code que nous allons utiliser dans notre fonction de gestionnaire est cependant un peu moins explicite. C'est ici:
var active_section; section_active = $ (ceci); if (direction === "up") active_section = active_section.prev (); var lien_actif = $ ('nav a [href = "#' + section_active.attr (" id ") + '"] "); navigation_links.removeClass ("sélectionné"); active_link.addClass ("sélectionné"); Premièrement, nous devons savoir quelle section est en cours de visualisation. Si nous faisons défiler l'écran vers le bas, la section à laquelle appartient le waypoint est la même que celle qui devient active. Passer au-delà d’un waypoint signifie toutefois que c’est la section précédente qui est mise en évidence - nous utilisons donc .prev () pour le sélectionner. Ensuite, on enlève le choisi classe de tous les liens de la barre de navigation, avant de la réappliquer à celui dont href attribut correspond à la identifiant de la section actuellement active.
Cela fonctionne plutôt bien. si vous souhaitez aller au-delà de l'ajout et de la suppression de classes, vous pouvez également consulter un plugin tel que LavaLamp..
À un moment donné, vous avez peut-être remarqué que cliquer sur les liens dans la barre de navigation place le haut de la section tout en haut de la fenêtre du navigateur. C’est assez contre-intuitif quand rien ne masque cette partie de l’écran; maintenant que nous avons une barre de navigation là-bas, cela devient un énorme ennui. C'est ici que ScrollTo d'Ariel Flesler vient à la rescousse. Incluez-le dans votre page, puis ajoutez le code suivant:
navigation_links.click (fonction (événement) $ .scrollTo ($ (this) .attr ("href"), durée: 200, offset: 'left': 0, 'top': - 0.15 * $ (fenêtre) .la taille() ); ); (bien sûr, ce code va au-dessus de la dernière accolade!)
Bien qu'il existe de meilleurs moyens de lier une fonction à des événements de clic, nous allons nous en tenir au plus simple: .Cliquez sur(). le .scrollTo () méthode est appelée d'une manière qui est très similaire à .waypoint (). Il faut deux paramètres - une cible de défilement et un objet contenant différentes options, qui, dans ce cas, s’expliquent assez bien. Le lien cliqué href Cet attribut fonctionne parfaitement comme une cible de défilement. L'expression utilisée comme décalage supérieur place la cible à 15% de la hauteur de la fenêtre d'affichage..
Et il semble que nous ayons fini. Je vous ai présenté le petit plug-in très pratique que sont les points de passage, et nous avons passé en revue certains cas d'utilisation qui devraient vous donner une idée des différentes choses que vous pouvez accomplir avec ce point. Nous avons également implémenté un comportement de défilement beaucoup plus intuitif pour notre navigation. Ajoutez un peu d’Ajax à la composition et vous êtes sur la voie de créer le type d’expérience Web immersive homogène qui constituera l’avenir du Web. En fait, il est probable qu’il sera à la mode pendant un court laps de temps puis deviendra banal, rendant les vétérans du Web nostalgiques de la façon dont les choses étaient. Mais bon, c'est comme ça.
En ce qui concerne les rubans, leur plus gros inconvénient est le suivant: ils ne sont qu’une illusion. Les côtés du ruban ne vont pas réellement autour des bords du conteneur; ils apparaissent uniquement de cette manière, ce qui devient assez évident lorsque le ruban passe sur un élément qui dépasse du bord de la page..
En raison du fonctionnement de z-index, il ne semble pas y avoir de moyen simple de résoudre ce conflit, si ce n’est de l’éviter. Cependant, avec un peu d’imagination et une connaissance de base de jQuery, vous pourriez trouver un moyen d’aider ces éléments à sortir du ruban comme il les approche. Cela va bien au-delà de la portée de ce tutoriel. J'espère pouvoir vous le montrer tôt ou tard sous forme d'un conseil rapide, ici ou sur Nettuts +. Restez à l'écoute!
