Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Foundation for Apps
Webdesign

Comment créer un menu Top Bar fixe rétrécissant avec Foundation

by
Difficulty:IntermediateLength:LongLanguages:

French (Français) translation by Aurélien Troublé (you can also view the original English article)

Les sites utilisant une barre de menu qui rétrécie lorsque l'utilisateur scroll sur votre page, afin d'être moins envahissante est en vogue en ce moment. Dans ce tutoriel, je vais vous montrer comment réaliser ceci en utilisant la Top Bar de ZURBs Foundation, ainsi que du sass et jQuery. Nous ajouterons également quelques media queries afin de rendre le menu responsive. C'est parti!

Pré-requis

Les éléments suivants seront nécessaire afin de bien appréhender ce tutoriel :

Se lancer

Tout d'abord, nous allons installer notre environnement de travail. Si vous ne savez pas faire ceci en utilisant Compass et Sass, référez-vous à la setion "Getting Started" du tutoriel Build a Top Bar Off Canvas Navigation With Foundation 5 (en anglais).

Créez votre nouveau projet Foundation et utilisez compass watch afin de compiler votre projet. Nous allons créer notre propre fichier style.scss dans le dossier scss pour nos ajustements et modification du style général. Maintenant que ceci est fait, penchons nous sur la structure HTML générale.

Mise en place de la structure HTML

Étape 1: Balisage général

Une fois votre nouveau projet Foundation mis en place, ouvrez votre fichier index.html et commencez par supprimer tout le contenu qui se situe entre les balises body sauf les scripts situés juste avant la balise qui ferme le body Ajoutez maintenant la ligne suivante entre les balises <head>, afin d'importer style.css.


Maintenant, nous allons ajouter des balises, comme header, une section principale et le footer, nous ajouterons également du contenu fictif afin de remplir la page et de permettre le scroll.


Ici, nous avons créé une section header, incluant notre <nav>, une section contenu, et une section footer. Quelques éléments notables :

  • Notre <nav> a une classe .important-class, que nous utiliserons afin de signaler à jQuery quel élément cibler lorsque nous scrollerons.
  • Nous avons inclus une div avec la classe .header-fill. Nous l'utiliserons afin de créer un espace entre le haut du navigateur et la section contenu, alors que notre header sera fixe, et aura un z-index plus élevé que les autres éléments de la page.

Étape 2: Balisage de la Top Bar

Attaquons nous maintenant à au code HTML de notre Top Bar. Il nous faut un title area pour notre logo et une section avec un <ul> pour contenir les objets de notre menu. Voici notre code HTML à insérer entre nos balises <nav> :



Nous avons ajouté un <ul> avec la classe title-area où se situe notre logo (vous pouvez ajouter le votre). Ensuite, nous avons notre <section> avec une classe top-bar-section et un <ul> avec une classe .right, contenant tous les éléments de notre liste. Notre image a un id logo-image dont nous aurons également besoin dans notre jQuery, plus tard dans ce tutoriel.

Étape 3: Résultat actuel

En ouvrant notre fichier index dans un navigateur, nous constatons que le style de base de Foundation nous épargne beaucoup de travail, en plus d'avoir un rendu de base visuellement agréable. Si ce n'est que notre logo ne rentre pas correctement. Dans l'étape suivante nous allons résoudre ce problème et personnaliser le style de notre header de navigation.

Utilisation de Sass

Afin d'obtenir le résultat souhaité, nous aurons besoin de modifier le style de nos sections, et plus particulièrement le header et la section Top Bar. Pour ce faire, nous allons utiliser Sass.

Etape 1: Style général

Pour commencer, appliquons un style de base à toutes nos sections. Voici le code Sass du style que nous vous proposons :


Nous utilisons ici une variable couleur primaire, que nous utiliserons pour le style de certains éléments de notre Top Bar. Notre header-section a une subtile box-shadow, lui donnant l'air de flotter au dessus du reste du contenu. En affectant affectant une position position fixed et en lui donnant un z-index : 999, nous nous assurons que la navigation reste collée à la partie supérieure du navigateur et qu'elle reste au dessus des autres éléments de notre page lorsque nous scrollons vers le bas.

Notre classe .contain-to-grid a un blanc légérement transparent, de sorte que lorsque l'on scroll, le header donne l'impression de flotter au dessus des autres éléments. Nous devons encore configurer quelques éléments de notre menu, et c'est ce que nous allons faire à présent.

Étape 2: Style de la Top Bar

Nous allons maintenant apporter quelques ajustements au style afin d'obtenir un rendu sophistiqué. Vous pouvez également ajuster quelques réglages de la Top Bar dans _settings.scss, mais je vais vous montrer comment faire cela en utilisant nos propres overrides. Voici le code Sass que nous utiliserons :

Note :  Nous allons déplacer la classe .padding-on-my-header (de la portion de code Sass précédente) en dessous des règles ci-dessus, concernant la Top Bar. Ceci est nécessaire afin que le padding replace celui de la Top Bar

Nous avons ajouté un padding à notre Top Bar et nous ont mis une transition de 0,5 s, ease 0,1 s. Cela vous donnera un effet de transition en douceur quand notre jQuery sera utilisé. L'arrière-plan est définie sur none, afin que notre header prenne la couleur légèrement transparente que nous avons donné notre classe .contain-to-grid . Le reste est un styles de base pour de les objets de menu de la Top Bar, les menus déroulants, les hovers et les états actifs. Nous avons jugé que l'ajout de padding et de white space nous donnait un rendu épuré et élégant.

Étape 3: Résultat actuel

Jetons un œil à ce que nous obtenons désormais. Cela commence probablement à prendre forme. Toutefois, notre menu reste un peu envahissant lorsque l'on scroll sur la page. C'est là que notre classe .padding-on-my-header rentre en jeu!

Utiliser le jQuery pour l'effet

Utilisons la magie du jQuery pour lier la classe .padding-on-my-header au scroll et changer le logo, pour une version plus petite.

Étape 1: Création de notre init.js

Nous allons créer un fichier init.js pour abriter notre code jQuery. Placez-le dans votre dossier /js et ajoutez la ligne suivante tout en bas de votre fichier index.html, juste avant la balise de fermeture du body, afin intégrer notre script :

Notre init.js contiendra la portion de code suivante :

Observons ce qu'il se passe ici. Lorsque l'utilisateur scroll, la fonction suivante est déclenchée : si l'utilisateur scroll sur plus de 50 pixels, alors la Top Bar rétrécie et remplace le logo par une version plus petite :

  • L'id logo-image est sélectionnée, et la source de l'image est remplacée par celle de la version plus petite du logo.
  • Ensuite, la classe .important-class est sélectionnée et une autre classe lui est attribué : .padding-on-my-header

Lorsque nous remontons en scrollant, à partir de 50 pixel de distance par rapport au haut de la page, le processus inverse s'effectue, redonnant la classe d'origine, et remettant en place notre gros logo.

Étape 2: Vérifier le résultat

Retournons à notre navigateur. Rafraichissons notre page (F5), et essayons de scroller. Si tout s'est déroulé comme prévu, vous devriez maintenant voir la Top Bar rétrécir avec une transition en douceur et le grand logo être remplacée par le petit. Jusqu'ici tout va bien. Mais lorsque nous redimensionnons notre navigateur, vous verrez que ce n'est pas tout à fait responsive pour le moment. Occupons nous de ça!

Media Queries pour l'optimisation Mobiles

Nous allons créer une media query pour les appareils de 1024px et plus petits. Pour obtenir l'effet approprié, nous devons changer breakpoint small de Fondation. Comment faire? Me demanderez-vous... Eh bien, c'est facile! Il suffit d'ouvrir notre fichier _settings.scss et de rechercher les lignes suivante :

Comme vous pouvez le constater, nous avons modifié la taille de small-range de 0em - 40em à 0em - 64em, ce qui permet de calculer de 1024px ; Notre medium-range commence maintenant à 64em. Enregistrez vos réglages pour que les modifications prennent effet. Nous allons maintenant nous atteler aux media queries!

Étape 1: Ajouter les Media Queries

Notre Top Bar n'aura pas besoin d'être si grosse sur un écran plus petit. Nous allons la réduire un peu et repositionner notre menu. Nous utiliserons également un header-fill plus petit. Voici le code de notre style :

Jetons un œil à ce que nous venons de faire :

  • Nous avons supprimé tous les padding et les margins de notre Top Bar.
  • Nous avons donné donné une couleur grise au texte du menu et à l'icone hamburger à la place du blanc par défaut, afin de les rendre visible sur notre Top Bar blanche.
  • Nous avons fait en sorte de faire rentrer notre gros logo à l'intérieur de la Top Bar.
  • Dans la top-bar-section nous stylisons nos objets de menu responsive, les hovers et les états actifs.
  • Nous redimensionnons et repositionnons également la version plus petite du logo.
  • Nous avons enlevé du padding et des margins sur notre menu responsive déplié.
  • Pour finir, nous avons rétrécie notre classe .header-fill , pour qu'elle soit égale à la taille de notre Top Bar.

Étape 2: Voilà le résultat final!

Lorsque nous revenons à notre navigateur et que nous le redimensionnons, nous constatons que notre navigation responsive fonctionne. En scrollant, vous constaterez que les images changent bien. Cliquez sur l'icône du menu pour voir la version dépliée du menu responsive.

Conclusion

Avec du Sass et la magie de jQuery, nous avons réussis à transformer le menu de base de ZURB's Foundation en un menu fixe tendance avec des effets sophistiqués! Vous pouvez maintenant l'utiliser pour vos projets ou ceux de vos clients. Lâchez-vous!

Ressources

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.