Comment construire un menu de navigation de style lampe à lave

Il y a quelques semaines, j'ai créé un screencast qui montrait comment créer un menu de navigation à trois niveaux. Dans un courriel de réponse, l'un de nos lecteurs a demandé un tutoriel sur la création d'un menu de style lampe à lave. Heureusement, c'est une tâche assez simple, surtout lorsque vous utilisez une bibliothèque JavaScript. Nous allons en construire un à partir d'aujourd'hui.

Préférer un screencast?

Étape 1 Créer le balisage

Avant de pouvoir créer cette fonctionnalité soignée, nous avons besoin d’une base à partir de laquelle travailler. Dans votre éditeur de code préféré, créez une liste non ordonnée pour votre navigation et importez les interfaces utilisateur jQuery et jQuery via Google.

     SpasticNav Plugin      Accueil
 Sur
 Blog
 Plus sur mon portfolio
 Contact

Notez comment nous avons donné un identifiant de "sélectionné" à la page d'accueil. C'est assez standard dans la plupart des sites Web; il permet de cibler la page en cours et de styliser cet élément de liste en conséquence.

Ensuite, nous devons décider de la meilleure mise en œuvre de la fonctionnalité de la lampe à lave. Pour permettre la réutilisabilité, nous allons empaqueter ce petit script dans un plugin, et l'appellerons ainsi:

 $ ('# nav'). spasticNav ();

Depuis que nous avons décidé de créer un plugin, allons-y, créons un nouveau fichier pour ce script et référencons-le dans notre balise. Nous l'appellerons jquery.spasticNav.js.

Étape 2 Commencer le plugin

Pour réduire le nombre de variables globales que nous devons créer, ainsi que pour éliminer toute possibilité de conflit entre le symbole $ et d'autres bibliothèques JavaScript, encapsulons notre plugin dans une fonction anonyme à exécution automatique..

 (fonction ($) ) (jQuery);

Maintenant, jQuery sera passé dans notre plugin, et sera représenté via le symbole $.

Ensuite, il est généralement recommandé de donner aux utilisateurs du plug-in le plus de flexibilité possible. En tant que tels, nous leur donnerons la possibilité de passer un littéral d'objet lorsqu'ils appellent le plug-in pour remplacer une poignée de paramètres. À mon avis, ils devraient pouvoir:

Définissez la quantité de chevauchement pour notre petite goutte. Cela fait référence à combien le blob va dépasser la hauteur du menu de navigation.
Régler la vitesse
Définissez une réinitialisation, ce qui amène le blob à revenir à l'élément de page actuel (en supposant que l'utilisateur ne clique jamais sur un lien)
Définissez la couleur de la goutte. Cela peut être accompli avec CSS, mais c’est quand même un avantage.
Définir l'option d'accélération.

Maintenant, nous allons nommer notre plugin et le rendre égal à une fonction. $ .fn est simplement un alias pour jquery.prototype.

 $ .fn.spasticNav = fonction (options) ;

Sachant que nous autoriserons ces substitutions, nous devons nous assurer d'accepter un paramètre "options".

Étape 3 Options de configuration

Maintenant que nous avons nommé notre plugin, l'étape suivante consiste à créer les options de configuration..

 options = $ .extend (chevauchement: 20, vitesse: 500, réinitialisation: 1500, couleur: '# 0b2b61', atténuation: 'aisanceSoutExpo', options);

Ci-dessus, nous prenons la variable options, définissons des propriétés et des valeurs par défaut, puis nous l'étendons avec ce que l'utilisateur transmet (le cas échéant) lorsqu'il appelle le plug-in. De cette façon, les options qu’ils passent remplaceront nos paramètres par défaut. Par exemple, si, lorsque j'appelle ce plugin, je passe:

 $ ('# nav'). spasticNav (speed: 2000, assouplissement: 'aisanceSoutElastique');

Ces deux propriétés remplaceront les paramètres par défaut, tandis que le reste des options restera le même.

Étape 4: implémentation de la fonctionnalité

Nous sommes maintenant prêts à parcourir chaque élément transmis à ce plugin et à mettre en œuvre la fonctionnalité de lampe à lave. Rappelez-vous, nous ne pouvons pas supposer que l'utilisateur va passer un seul élément à ce plugin. Ils pourraient, s'ils le voulaient, faire référence à une classe, qui fait référence à plusieurs éléments devant recevoir cette fonctionnalité. En tant que tel, nous appellerons this.each pour parcourir chaque élément de l'ensemble emballé..

 retourne this.each (function () );

Dans cette fonction, nous allons créer des variables. Tous n'ont pas immédiatement des valeurs, mais comme le moteur JavaScript place de toute façon tous les noms de variables en haut de la fonction (en coulisse), il est généralement recommandé de les déclarer en haut, puis de les initialiser plus tard..

 var nav = $ (this), currentPageItem = $ ('# sélectionné', nav), blob, reset;

nav: "Caches" ce, enveloppé dans l'objet jQuery.
currentPageItem: Contient l'élément de la liste avec un identifiant sélectionné. Nous passons un second paramètre pour définir le contexte dans lequel effectuer la recherche. De cette façon, nous n'avons pas à parcourir tout le dom pour trouver cet élément.
blob: Faute de meilleur mot, cette variable référencera le surligneur, qui suivra notre souris lorsque nous survolerons le menu..
réinitialiser : Cela stockera une référence à la fonction setTimeout qui sera créée ultérieurement. C'est nécessaire pour appeler clearTimeout. Plus d'informations à ce sujet bientôt…

Maintenant que nous avons déclaré / initialisé nos variables, créons le blob réel, pour ainsi dire.

 $ ('') .css (width: currentPageItem.outerWidth (), height: currentPageItem.outerHeight () + options.overlap, à gauche: currentPageItem.position (). left, en haut: currentPageItem.position (). top - options.overlap / 2, backgroundColor: options.color). AppendTo (this);

La raison pour laquelle nous appelons la méthode CSS, plutôt que d'ajouter simplement une classe, est que ces valeurs varient en fonction de l'élément de liste de la page en cours. En tant que tel, nous devons utiliser JavaScript pour récupérer leurs valeurs.

largeur: Obtenir la largeur de currentPageItem, y compris les bordures et le remplissage.
la taille: Obtenez la hauteur de currentPageItem, y compris les bordures et le remplissage. Ajoutez également la quantité de chevauchement pour que le blob s’étende en dehors du menu..
la gauche: Définit la propriété left du blob égale à la position gauche de currentPageItem. (Nous devons définir un contexte de positionnement dans notre CSS pour que cette valeur prenne effet.)
Haut: Définit également la valeur supérieure et centre verticalement le blob.
Couleur de fond: Définit la couleur de fond.

Enfin, nous annexons ce nouvel élément de liste à ce, ou #nav.

Ensuite, nous devons stocker une référence à #blob. De cette façon, nous n'avons pas à rechercher le DOM chaque fois que nous souhaitons y accéder. Nous avons déclaré le goutte variable en haut de la fonction. Maintenant, initialisons-le.

 blob = $ ('# blob', nav);

Étape 5 L'événement de vol stationnaire

Nous devons maintenant "écouter" lorsque l'utilisateur survole l'un des éléments de la liste (à l'exception du blob bien sûr) dans notre menu de navigation. Dans ce cas, nous allons définir les propriétés width et left du blob égales à celles de l'élément de la liste actuellement survolé..

 $ ('li: not (#blob)', nav) .hover (function () // souris sur clearTimeout (reset); blob.animate (left: $ (this) .position (). left, width: $ (this) .width (), duration: options.speed, easing: options.easing, queue: false);, function () // sortie de la souris reset = setTimeout (function () blob.animate (width: currentPageItem.outerWidth (), left: currentPageItem.position (). left, options.speed), options.reset););

Pour résumer le script ci-dessus…

Obtenez tous les éléments de la liste - pas le #blob - dans le menu de navigation et, lorsqu'ils sont survolés, exécutez une fonction..
Animer le blob et définir ses valeurs de gauche et de largeur égales à celles de l'élément de liste survolé.
Passez un littéral d'objet en tant que deuxième paramètre de animate et définissez une durée et un assouplissement égaux à ceux définis dans nos options de configuration. Définissez la file d'attente sur false pour empêcher la création d'animation.
Quand ils passeront la souris, appelez setTimeOut, ce qui repoussera le blob vers l’élément de la page en cours. Si nous ne le faisions pas et que l'utilisateur ne cliquait pas sur un lien de navigation, le menu montrerait qu'il était sur
une page entièrement différente. Après environ une seconde, le blob reviendra dans currentPageItem..

Et c'est tout ce qu'il y a à faire! Ceci est un plugin super simple. La prochaine étape consiste à styler notre menu de navigation.

Étape 6 Styliser le menu

Sans style, notre menu devrait ressembler à ceci:

Commençons par appeler le "nav" ul. Ouvrez votre fichier style.css et ajoutez:

 #nav position: relative; arrière-plan: # 292929; float: gauche;

Ensuite, nous allons styliser chaque élément de la liste.

 #nav li float: left; style de liste: aucun; border-right: 1px solide # 4a4a4a; bordure gauche: 1px noir uni;

Cela fait simplement flotter chaque élément de la liste vers la gauche et ajoute une bordure à chaque côté.

En chemin, nous devons ensuite styliser les balises d'ancrage dans notre menu de navigation.

 #nav li a color: # e3e3e3; position: relative; z-index: 2; float: gauche; taille de police: 30px; famille de polices: helvetica, arial, sans-serif; texte-décoration: aucun; rembourrage: 30px 45px;

Nous définissons une couleur en les faisant flotter à gauche, en définissant des valeurs de police et une quantité suffisante de remplissage. Prenez note de la propriété z-index. Ceci est une nécessité et sera expliqué prochainement. Cependant, rappelez-vous que, pour ajuster l'indice z, vous devez définir un contexte de positionnement, ce que nous avons fait.

Comme nous n'implémentons pas de feuille de style à réinitialisation complète, assurons-nous de supprimer les marges et les marges par défaut sur nos valeurs ul et li, uniquement pour éviter les problèmes éventuels..

 ul, li marge: 0; rembourrage: 0;

La dernière étape consiste à styler le blob lui-même!

 #blob border-right: 1px solid # 0059ec; border-left: 1px solid # 0059ec; position: absolue; en haut: 0; z-index: 1; arrière-plan: # 0b2b61; arrière-plan: -moz-linear-gradient (haut, # 0b2b61, # 1153c0); arrière-plan: -webkit-gradient (linéaire, gauche en haut, gauche en bas, de (# 0b2b61) à (# 1153c0)); -moz-border-radius: 4px; -webkit-border-radius: 4px; -moz-box-shadow: 2px 3px 10px # 011331; -webkit-box-shadow: 2px 3px 10px # 011331;

Une fois encore, nous avons défini de jolies couleurs pour nos bordures et ajouté quelques couleurs de fond (notamment les dégradés / bordures / ombres CSS3 pour Firefox et Safari / Chrome). Une fois encore, nous voyons cette propriété z-index. Sans cela, le blob affichera surtout le texte dans le menu de navigation. Pour contrer cela, nous devons nous assurer que sa propriété z-index est inférieure à celle de l'élément de la liste! Nous devons également définir la position sur absolute afin d’ajuster ses valeurs top et left avec notre plugin..

Conclusion

C'est tout ce qu'on peut en dire! Avec un minimum d'effort, nous avons créé un menu de navigation vraiment soigné à partir de zéro. Faites moi savoir si vous avez des questions! Merci d'avoir lu et regardé.

Code