Moisés Neto

En juin 2017, nous avons publié notre nouveau site Web d'entreprise ici à Guava. Ce fut une étape importante pour nous car cette nouvelle version a consolidé notre identité visuelle.

Il y a eu beaucoup de changements par rapport à la version précédente: nous avons ajouté de belles nouvelles illustrations faites par nos incroyables designers, passé en revue notre palette de couleurs, écrit beaucoup de nouveaux contenus, mis en œuvre une expérience magazine-ish avec des couvertures sur toutes les pages et divisé l'intérieur sections avec de magnifiques formes courbes.

Toutes ces choses sont incroyables, mais un détail important à noter est que, du point de vue de l'implémentation frontale, il est très difficile de gérer l'interaction entre ces formes courbes et les éléments fixes après le défilement de l'utilisateur. En tant que fières artisanes et femmes que nous sommes, nous ne voulions pas nous débarrasser des éléments fixes, ce qui signifiait que nous devions trouver un moyen de le faire fonctionner comme prévu. C’est le défi que nous allons aborder dans cet article.

Contraste affectant la lisibilité d'un menu fixe lors du passage d'une section à une autre

Dès les premières versions du nouveau concept de site Web, nous avons pensé à l'idée d'un menu de navigation fixe pour les écrans de bureau. Le verrouillage de sa position allait très bien fonctionner avec notre vision de la navigation idéale pour ce projet particulier, mais cela a créé le problème de maintenir sa lisibilité sur plusieurs couleurs de fond différentes et leurs différentes palettes de contraste.

Tout d'abord, nous avons envisagé de protéger le contenu du menu avec une couleur de fond plate et simple. Cette solution résoudrait assez bien le problème de lisibilité, mais – en plus d'avoir l'air un peu bizarre dans nos expériences – elle a fini par cacher des parties d'illustrations clés dans certaines sections de la page. Nous ne le voulions pas. Et il restait un problème clé à résoudre…

Entrez les séparateurs de sections courbes. Les remplissages d'arrière-plan solides empiraient de minute en minute. Le seul plan d'action acceptable à gauche était de trouver un moyen de faire en sorte que le menu ajuste ses couleurs en fonction de la section sur laquelle il passe, tout en respectant toutes les limites des sections sinueuses et non sinueuses en cours de route. Zut.

À la recherche de solutions existantes à notre problème, nous sommes tombés sur une bibliothèque passionnante appelée Midnight.js. En vous permettant de modifier l'en-tête de votre site Web à la volée, ce petit plugin jQuery a retenu notre attention. Malheureusement pour nous, la bibliothèque ne traitait que les sections rectilignes, du moins à ce moment-là.

Même si nous ne pouvions pas utiliser la bibliothèque, l'idée derrière sa mise en œuvre serait la clé pour développer notre propre technique.

Le comportement que nous visons. Il peut être vérifié ici.

Le comportement de changement de menu que nous voulions était assez particulier. Les styles de menu doivent changer immédiatement lorsque vous survolez une section différente avec des couleurs d'arrière-plan différentes. En outre, ce survol peut être partiel, ce qui signifie que juste un mot, ou même une petite section d'un mot, aurait des styles différents. Cette exigence à elle seule a écarté toutes les solutions potentielles utilisant la technique classique de basculement de classe CSS / JS.

C’est là que la mise en œuvre de Midnight.js entre en jeu, introduisant la notion de éléments de masque, cela avec animations de menu constituent les deux concepts fondamentaux appliqués dans notre solution.

Au début, lorsque nous vous avons présenté notre petit défi, nous avons peut-être été tentés de spéculer sur une solution dans laquelle le menu «connaît» un peu la section qu'il survole et les styles à appliquer sur lui-même. je sais je avoir. Avec les éléments de masque, le problème est inversé exactement: le sections sont les éléments «intelligents» ici, sachant quel menu ou quels styles rendre.

C'est logique, non? Chaque section de page réelle a son propre menu fixe, masquant les débordements, afin que les menus ne se chevauchent pas. Eh bien, plus facile à dire qu'à faire.

Le premier problème que nous devrions remarquer est que les éléments HTML avec un positionnement fixe ne respectent pas les limites des parents positionnés. Au lieu, positionnement fixe épingle un élément en place par rapport à la fenêtre du navigateur elle-même. Donc intelligent overflow: hidden; La propriété appliquée aux éléments de section ne fonctionnera pas.

Deuxièmement, nous ne voulons pas glisser la totalité du balisage du menu dans chaque section de page. Il serait très déroutant de mélanger la navigation avec le contenu de chaque section de la page; sans parler des problèmes d'accessibilité. C'est là que les éléments du masque sont utiles.

Ces masques ne sont rien de plus que des éléments transparents, créés dans le seul but de reproduire le format de section d'origine, de restreindre le menu de chaque section à l'intérieur. Leurs propriétés sont clonées à partir des éléments de section réels. Les extraits ci-dessous illustrent cette étape de la mise en œuvre.

Tous les extraits de cet article sont du code HTML / jQuery générique.

Supposons que nous ayons un élément de section qui a besoin d'un masque.

Pour cela, nous avons besoin d'un élément de masque sur la page (à la fin de la page, de préférence, pour les raisons déjà mentionnées).

Ce masque a des propriétés intéressantes:

  • class: les classes supplémentaires sont utilisées pour définir certaines propriétés particulières d'un masque donné. Rappelez-vous les courbes mentionnées ci-dessus? Eh bien, nous devons implémenter ces courbes de section en CSS et les répliquer dans les masques. De cette façon, l'élément mask a la même forme que l'élément section.
  • data-menu-class: c'est la classe appliquée à l'élément de menu ajouté à ce masque enfants.
  • data-menu-mask: une chaîne indiquant un sélecteur pour son élément de section respectif.

Avec cela à l'écart, nous pouvons utiliser jQuery pour cloner les propriétés CSS de la section en utilisant les attributs définis dans l'extrait ci-dessus.

Très simplement, nous clonons les styles de section dans les éléments de masque. En plus des propriétés ci-dessus, nous devons rendre le masque en position absolue afin qu'il puisse être précisément au-dessus des sections. Nous pouvons le faire en utilisant les classes supplémentaires du masque.

Après cela, notre prochaine tâche devrait être d'ajouter un clone de menu aux enfants du masque. N'oublions pas la classe des modificateurs de menu, spécifiée dans le data-menu-class attribut. Il définit les styles du menu de cette section.

Un petit mot sur l'accessibilité de cette approche: les menus sont toujours en cours de réplication. Il est recommandé de placer un aria-hidden="true" sur tous les menus, sauf le premier.

"Auteurs MAI, avec prudence, utilisez aria-hidden pour masquer le contenu rendu visiblement des technologies d'assistance seulement si le fait de masquer ce contenu vise à améliorer l'expérience des utilisateurs de technologies d'assistance en supprimant le contenu redondant ou superflu. "

(W3C WAI-ARIA. Grâce à Thibaut Allender pour avoir remarqué.)

Étant donné que le positionnement fixe pur CSS ne fonctionnera pas pour les menus, ils doivent être positionnés de manière absolue et nous devons les déplacer de haut en bas à l'aide de JavaScript, simulant le comportement de positionnement fixe. C'est notre crochet pour la sous-section suivante: animation de menu.