Catégories
Plugin et site web

10 extraits de code de navigation responsive CSS pur

La conception d’une mise en page réactive n’a pas besoin d’être difficile. Surtout si vous effectuez initialement un wireframe pour planifier à l'avance et déterminer exactement ce que vous créez.

L'une des parties les plus difficiles d'un bon site réactif est la navigation. Cela peut prendre un certain temps à comprendre et il existe de nombreux tutoriels pour vous aider.

Mais je suis également fan de l'utilisation d'extraits de code comme ceux que j'ai rassemblés pour cet article.

Tous ces extraits de navigation réactifs peuvent être modifiés et clonés gratuitement pour vos propres projets. Ils présentent également une variété de styles, il y aura donc ici quelque chose qui fonctionnera pour tous les types de sites Web.

La boîte à outils Web Designer

Téléchargements illimités: plus de 1 000 000 modèles Web, thèmes, plug-ins, éléments de conception et bien plus encore!

1. Démo pleine page réactive

Il y a beaucoup à dire sur cette démo pleine page créée par Johnny Mango. C'est un exemple de la mesure dans laquelle vous pouvez aller dans la phase de prototypage d'un site Web.

Vous remarquerez que la navigation a une fonctionnalité intéressante lorsque vous passez la souris et que vous vous concentrez automatiquement sur les liens. Cet effet peut être modifié dans un site Web "en direct" avec la même navigation, mais il est utile dans cet exemple de montrer l'interface utilisateur / UX de la page.

Redimensionnez la fenêtre de votre navigateur pour voir exactement comment cette navigation est réorganisée. Vous serez peut-être surpris du résultat final.

Vous pouvez même consulter l'aperçu en taille réelle pour mieux le voir.

2. Barre de navigation déroulante

Si vous avez besoin d'éléments déroulants plus longs dans votre navigation, ce menu pourrait mieux fonctionner.

C'est une alternative intéressante aux navigations plus basiques qui ne comportent que quelques liens. Dans ce cas, vous trouverez une simple liste de liens avec une très petite liste déroulante.

Les liens de sous-menu n'apparaissent que sur un événement de clic géré par jQuery. Vous pouvez changer cela en CSS uniquement, mais vous perdrez le déclencheur de clic.

Pourtant, pour un design aussi épuré, je suis surpris de la polyvalence offerte par cet extrait de code aux développeurs.

3. Mise en page sur une seule page

Les menus de navigation d'une seule page ont besoin d'amour comme les autres.

Heureusement, ce stylo de Jan Czizikow a suscité beaucoup d'amour avec un design brillant.

Ceci est un exemple parfait de navigation sur une seule page en action. Les liens défilent vers le bas avec une animation fluide, mais ne vous laissent pas attendre trop longtemps.

Sans oublier qu'ils se redimensionnent automatiquement pour s'adapter parfaitement à la taille de votre navigateur.

Je recommande surtout ce type de navigation pour une page de vente ou un simple site de portfolio. Il est vraiment propre et propose un excellent travail d'animation en plus des techniques réactives.

4. Menu déroulant rouge

La développeur Stéphanie Walter a réalisé des projets vraiment intéressants pour le web. Cet extrait de code n'est qu'un exemple avec une navigation réactive rouge vif qu'elle a créée.

Les liens ont un peu plus de piquant avec une fonctionnalité sélectionnée personnalisée et un bel effet de survol pour démarrer.

Une fois redimensionné, vous remarquerez que la navigation utilise un menu déroulant coulissant à la place. J'opterais presque pour une liste de liens de niveau bloc pour mobile, mais cela fonctionne beaucoup mieux compte tenu du sous-menu.

Si vous souhaitez quelque chose avec un peu de piquant sur votre page, cet extrait mérite d'être copié et retravaillé à votre guise.

5. Conception pure CSS3

Voici maintenant un design vraiment unique utilisant du CSS3 pur pour la navigation.

Il s’agit d’un menu vertical avec des liens de navigation imitant le tableau périodique des éléments. L'extrait a été créé par Ahmad Hjazy, et c'est un spectacle à voir.

Les effets de survol sont un peu retardés mais sans aucun doute intéressants. Sans oublier que le style réactif est étonnamment utilisable.

La partie la plus impressionnante est peut-être la façon dont tout cela fonctionne uniquement sur CSS3.

6. En-tête collant réactif

J'ai mentionné la conception d'une seule page dans un extrait de code précédent et cet en-tête réactif suit une trajectoire similaire.

La seule différence est que cette navigation a un bloc légèrement plus grand sur la page et qu'elle gère la conception de page réactive un peu différemment.

Lorsque vous redimensionnez le navigateur, vous remarquerez qu'il utilise l'icône de hamburger avec une animation amusante. C’est bien vu le style mais ce n’est peut-être pas la tasse de thé de tout le monde.

Toujours une navigation impressionnante pour les pages uniques ou les pages de destination qui ont besoin d'une barre de navigation élégante sans toutes les fioritures.

7. réactif et tactile

Tous les bons sites Web doivent être activés par défaut. C’est ce qui rend cette navigation encore plus attrayante pour les concepteurs.

Il prend en charge tous les styles d'écran et facilite grandement la navigation des utilisateurs sur leurs téléphones.

Chaque lien mène à une nouvelle page, mais vous pouvez appuyer pour survoler facilement les menus déroulants sur n'importe quel appareil tactile. Il s'agit d'une fonctionnalité souvent absente des menus de navigation et c'est l'une des raisons pour lesquelles les listes déroulantes peuvent être si délicates à concevoir.

8. Liens de navigation simples

Quand je pense à des menus de navigation vraiment simples, je pense à un design comme celui-ci.

Chaque lien apparaît comme son propre élément de bloc, même sur des écrans plus petits. Il n'y a pas de menu hamburger ni de fonction de menu animé caché. Au lieu de cela, les liens se redimensionnent et se coupent sur des lignes séparées.

La partie la plus délicate est de gérer l'effet de liste déroulante sur les appareils mobiles. De nombreux liens comportent des sous-menus et fonctionneront de la même manière sur des écrans plus petits.

Je dirais que cela fonctionne mieux pour les sites avec peu ou pas de sous-menus, mais cela vaut la peine d'essayer sur mobile juste pour voir ce que vous pensez de l'expérience.

9. Menu rideau PS

Le développeur Louis Chenais a créé l'une de mes navigations responsives préférées sur la base du site Web PlayStation.

Louis appelle cela un «menu rideau» où il glisse dans la vue dépassant la page entière. C'est très courant pour les interfaces mobiles et c'est aussi rapidement devenu un choix incontournable pour les concepteurs Web.

Une chose que j'aime vraiment, c'est le style d'animation. Il est suffisamment élégant et rapide pour afficher les liens sans ennuyer les utilisateurs.

Et le meilleur de tout cela donne l'impression que cela pourrait fonctionner sur un site Web de production.

Essayez de cliquer sur l'icône de recherche pour vérifier également cet effet. Les deux fonctionnent parfaitement, et j'appellerais cela une navigation brillante pour tout site Web d'entreprise.

10. Méga-menu réactif

Vous pouvez rechercher sur le Web et trouver des centaines de méga menus de navigation. Celles-ci apparaissent généralement sur les blogs plus grands et les sites Web d'actualités, mais elles sont également populaires dans les boutiques en ligne ou même sur les sites de grandes agences.

La partie la plus difficile d'un méga-menu est le rendant totalement réactif.

Grâce à ce petit extrait, vous pouvez retravailler la conception du méga menu pour l'adapter facilement à n'importe quel écran.

Sur mobile, il utilise une navigation coulissante pour afficher tous les liens internes dans un seul menu. Cela peut sembler un peu ennuyeux, mais vous pouvez également utiliser jQuery pour masquer les sous-liens si cela a du sens.

C’est toujours l’une des meilleures solutions réactives que j’ai vues pour exécuter un méga menu sur un ordinateur sans aliéner les utilisateurs mobiles.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *