La pagination de sites Web est un aspect crucial de toute mise en page à contenu répétitif. Les blogs sont souvent une considération, mais aussi les listes de portefeuilles ou les liens d'actualités / flux connexes ou tout autre type d'archive. Organiser un article de blog en plusieurs pages permet de réduire le temps de lecture, en particulier pour les articles plus détaillés.
Dans ce tutoriel, je souhaite illustrer un ensemble de techniques CSS permettant de concevoir une pagination. Une fois que vous combinez ces conceptions avec des systèmes de contenu tels que WordPress, vous pouvez voir comment les interfaces fonctionnent réellement. Pour avoir une idée du produit final, jetez un œil à la démonstration en direct ci-dessous.
Live Demo - Télécharger le code source
Commencer
Ce didacticiel ne nécessitant aucun code JavaScript, il n’existe aucune dépendance de fichiers. J'aimerais commencer par souligner la mise en page simple. Chaque lien paginé mène à une page HTML différente avec une liste de 5 au total.
Vous remarquerez rapidement la ligne commentée qui affiche un bouton précédent pour passer d’une page à l’autre. J'ai seulement affiché ce lien dans les autres mises en page car sur la première page, nous n'avons aucun moyen de revenir à une page précédente. Aussi le premier élément de la liste .unique n'a pas de lien d'ancrage, il affiche simplement le numéro de la page en cours et le nombre total de pages.
L'exemple ci-dessus est copié de index-2.html qui affiche la deuxième page. Vous constaterez que chaque page numérique n'a pas d'ancre menant sur elle-même. Au lieu de cela, nous appliquons une classe de .actuel sur l'élément de la liste pour une apparence différente.
Styles de page généraux
J'ai divisé la feuille de style en segments avec les réinitialisations de page typiques. Cela facilite la copie et le collage du style exact des liens de pagination avec lesquels vous souhaitez travailler.
Rien de trop différent ici par rapport à mes autres tutoriels. En utilisant l'extérieur .paginer classe sur la liste non ordonnée signifie que cela s'appliquera à toutes les UL sur toutes les pages. Il augmente la taille de la police générique tout en garantissant que la liste couvre toute la largeur du conteneur parent.
Directement sous ce code, vous trouverez les 5 autres blocs pour chacune des sections de pagination. Ceci est un exemple de ma première idée de design. Le conteneur .paginate.pag1 n'a pas de styles par défaut, mais si vous souhaitez appliquer quelque chose directement à cette liste non ordonnée, vous pouvez le faire en ciblant des styles de pagination individuels.
Les liens utilisent un fond de couleur plat avec quelques ombres de boîte qui se mettent à jour lorsque vous cliquez dessus. C'est un design simple qui peut réellement s'intégrer dans n'importe quelle mise en page de site Web, à condition que vous mettiez à jour le jeu de couleurs.
Autres styles de pagination
En regardant ma deuxième conception, vous remarquerez peut-être qu'elle a été construite autour du PSD à pagination minimale publié sur Pixels Daily. J'ai donné aux ombres plus de longueur et gardé les tailles de police plus petites. Mais c'est un modèle fantastique que vous pouvez commencer à personnaliser très rapidement.
Une autre version intéressante de Pixels Daily appelée Slick Pagination Links comprend une copie PSD et CSS. Ma troisième démo est basée sur ce design, mais j'ai écrit tout le code CSS moi-même.J'ai essayé de faire correspondre les couleurs similaires dans le dégradé, mais j'ai utilisé une bordure plus épaisse autour de chaque lien.
Cela ira probablement mieux sur un fond plus clair ou dans un contenant UL léger. Toutefois, la mise à jour des dégradés de bordure et d'arrière-plan ne nécessiterait pas beaucoup de travail avec un concepteur de nuanciers. Les états actifs et survolés mettent simplement à jour l'arrière-plan et je me suis abstenu de changer les ombres de la boîte.
Toutes ces conceptions pourraient être étendues pour inclure différents types de polices, icônes, padding et autres fonctionnalités CSS. Tout mon code est écrit avec le plus petit dénominateur commun, afin que ces styles puissent fonctionner correctement avec n'importe quelle page Web.
Liens de navigation arrondis
Mes deux dernières pages utilisent le même type de motif, mais inversent simplement le jeu de couleurs du clair au foncé. Je ne montre que les codes CSS les plus sombres, car ils comportent davantage de modifications. Toutes les propriétés d'affichage doivent correspondre parfaitement à part les couleurs.
Cette conception particulière est basée sur un PSD haut de gamme appelé Flat Pagination Interface, également de Pixels Daily. En regardant la capture d'écran, vous verrez qu'il a une liste plus petite et qu'il utilise les points de suspension pour varier les pages. Ceci est courant lorsque vous avez plus de 10 pages dans la liste et que vous ne voulez pas toutes les afficher en même temps.
J'ai mentionné précédemment que nous pouvons cibler la liste non ordonnée externe en utilisant son nom de classe tel que .paginate.pag5. Cela aide pour la démonstration de liens, mais cela ne sera probablement pas utile sur un site Web actif, sauf si vous envisagez d'utiliser différents styles de pagination.
Chacun de ces deux derniers styles inclut des transitions CSS3 pour les états de survol. C'est une fonctionnalité supplémentaire intéressante que vous pouvez choisir de conserver, mais elle n'a pas toujours fière allure dans tous les cas.Les jeux de couleurs claires et sombres incluent des reflets verts correspondant à la mise en page. Si vous aimez ce design, jouez avec les couleurs et voyez si l'interface claire ou sombre semble meilleure pour votre projet.
Live Demo - Télécharger le code source
Fermeture
Beaucoup de ces techniques peuvent être adaptées à vos propres styles pour créer une pagination de site Web unique. Ce n'est pas un aspect crucial pour tous les sites Web, mais le devient immédiatement si vous traitez avec une quantité importante de contenu.
N'hésitez pas à télécharger une copie de mon code source et à utiliser ces styles CSS pour toute pagination de site Web. De plus, si vous avez des questions ou des suggestions connexes, vous pouvez les partager avec nous dans l’espace de discussion ci-dessous.