Lors de la création d'une simple page Web, il peut souvent être judicieux de placer le contenu dans une seule disposition plutôt que dans plusieurs pages. Ces sites Web d'une seule page sont utiles lorsque vous avez un petit projet ou un petit portefeuille qui nécessite une présence en ligne. Si vous divisez le contenu en plusieurs parties, les visiteurs peuvent utiliser une petite navigation coulissante pour avancer rapidement dans la page.
Dans ce tutoriel, je souhaite montrer comment vous pouvez créer une navigation par glissement personnalisée avec jQuery. Il existe de nombreux plugins alternatifs offrant ces fonctionnalités et permettant également de gagner du temps. Mais je veux montrer comment nous pouvons créer cet effet en utilisant uniquement jQuery et le plugin scrollTo pour des performances optimales. Jetez un œil à ma démonstration d’échantillon en direct pour avoir un aperçu de ce que nous allons faire.
Live Demo - Télécharger le code source
Commencer
J'ai d'abord téléchargé une copie locale de jQuery à conserver avec les autres fichiers de script. Nous avons également besoin d’une copie du plug-in jQuery.scrollTo, qui est un fichier .js unique. J'ai créé deux fichiers alternatifs index.html et styles.css pour la structure de la page. Nous pouvons commencer par décomposer le contenu principal.
Le contenu de l'en-tête doit être simple, sans complication excessive. Le fichier d'index utilise un doctype HTML5 avec la feuille de style et les deux fichiers JS que nous avons téléchargés. Évidemment, il existe des alternatives pour personnaliser l'effet de défilement, mais dans ce cas, il est beaucoup plus facile d'implémenter un plugin. Dans la page HTML, nous pouvons voir comment la navigation est configurée.
Toute la page est contenue dans un wrapper utilisant l'ID #w. Une autre div #contenu marque le contenu interne de la page. Cette navigation fixe est conservée dans le contenu de la page pour ma démo, mais vous pouvez théoriquement la déplacer ailleurs. Comme il sera corrigé, vous pourrez toujours faire défiler le menu avec l’utilisateur, quel que soit son emplacement.
Le conteneur #stickynav est utilisé pour conserver tous les éléments internes en haut du contenu de la page. J'utilise la propriété CSS z-index avec des flottants internes sur tous les éléments de la liste. Notez que les valeurs HREF pointent toutes vers un signe dièse situé ailleurs sur la page. Nous pouvons utiliser cette valeur pour déterminer où notre curseur devrait aller.
Contenu interne
Après la fermeture du bloc de navigation, nous trouvons un petit nombre de sections de contenu. Il y a beaucoup d'espacement supplémentaire entre le contenu, afin que vous puissiez voir comment il se comporterait dans une page Web typique. Chaque conteneur de bloc utilise le HTML5
élément avec un nom de classe .section.
La classe est utilisée pour les styles en double trouvés dans chacune des zones de contenu. Cela économisera de la place dans la feuille de style lors de la copie de plusieurs propriétés pour chaque élément. En ciblant l'ID de section, nous pourrions appliquer des arrière-plans uniques, des couleurs de texte, des ombres de zone et d'autres effets similaires.
Cette méthode peut inclure autant de sections de contenu interne que nécessaire. Bien que le menu de navigation puisse éventuellement devenir trop large. Dans ce cas, il pourrait également être placé tout en haut sous forme de barre de navigation fixe. Je l'ai conservée dans la division content afin que nous puissions voir le fonctionnement de la solution construite autour d'un modèle de page. Passons dans les styles CSS pour plus de détails.
CSS Page Design
Je voulais vraiment faire la distinction entre la barre supérieure et cette navigation collante fixe. Nous aurions pu fixer la barre de navigation brune très supérieure qui contient également un lien, mais cela peut grignoter une petite partie de la mise en page. Au lieu de cela, j'ai créé une nouvelle liste non ordonnée et mis en forme chaque lien pour qu'il flotte le long l'un de l'autre - le menu est donc plus étroit et compact.
En regardant le conteneur #stickynav vous remarquerez que cela couvrira la totalité de la largeur de la page. Si vous utilisez un arrière-plan transparent, cela n’est certainement pas perceptible, mais gardez cela à l’esprit, car vous pouvez étendre la navigation encore plus large pour remplir la page externe.
Une autre partie intéressante de ma feuille de style comprend les entrées de formulaire et les conteneurs de page. Ces règles sont toutes situées au bas du fichier avec les mises à jour de typographie. Notez que chaque en-tête est centré sur la page pour offrir un espace latéral à ces éléments de navigation. Il ne serait pas difficile de réaligner ces en-têtes sur le côté droit pour donner encore plus d'espace aux liens de navigation.
Je n'ai pas le formulaire de contact soumis n'importe où mais je voulais qu'il ait quelques styles personnalisés décents. Certes, rien de spécial, mais cela réinitialise les polices et les couleurs par défaut. De même, si vous devez développer la zone de contenu centrale, vous pouvez trouver la propriété width: 750px attachée à l’enveloppe extérieure. Rien d’extraordinaire mais il est bon de comprendre ces styles de base.
Faire défiler en douceur avec jQuery
Maintenant, ce dernier bloc de code est assez simple, même si vous comprenez à peine les scripts. J'ai ajouté un nouveau tag avant ma fermeture qui cible les liens d'ancre de navigation fixes. Chaque fois qu'un utilisateur clique, nous extrayons la valeur de hachage et nous passons immédiatement à cette section de page.
La méthode jQuery .click () inclut un paramètre pour le gestionnaire d'événements. Avec ce paramètre, nous annulons le comportement par défaut afin que le navigateur ne saute pas de page. Ensuite, jQuery scrollTo est exécuté en ciblant la valeur actuelle du lien this.hash.
L'effet est simple mais pratique car vous pouvez implémenter le concept de page très rapidement. Je suis sûr qu'il existe d'autres plugins similaires liés à jQuery scrollTo, et si vous avez le temps, il peut être amusant de chercher d'autres solutions.
Live Demo - Télécharger le code source
Dernières pensées
Les sites Web simples ne nécessitent pas un système de menus compliqué et l'utilisation de techniques comme celle-ci peut aider à organiser le contenu. J'espère que ce tutoriel pourra être utile aux développeurs qui créent une mise en page simple. jQuery est très extensible et il est facile d'étendre cette base de code dans votre propre plugin jQuery. N'hésitez pas à télécharger une copie de mon code source et à voir si vous pouvez intégrer cet effet à vos projets futurs.