10 extraits de code CSS et JavaScript pour créer des navigations réactives

L'une des parties les plus complexes 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 nous avons collecté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 quelque chose ici qui fonctionnera pour tous les types de sites Web.

1. Mise en page pleine page réactive par Johnny Mango

Cet exemple réactif montre jusqu'où vous pouvez aller dans la phase de prototypage d'un site Web. Vous remarquerez que la navigation a une fonctionnalité intéressante lorsque vous survolez et que vous vous concentrez automatiquement sur les liens. Cet effet peut être modifié sur un site Web "en direct" avec la même navigation, mais il est utile dans cet exemple de montrer l'UI/UX de la page.

Voir la démo de navigation réactive du stylet avec Kube par Johnny Mango

2. Barre de navigation déroulante par Tania Rascia

Si vous avez besoin d'éléments déroulants plus longs dans votre navigation, ce menu pourrait mieux fonctionner. C'est une alternative solide aux navigations plus basiques qui ne comportent qu'une poignée d'éléments de menu. 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 click qui est 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 que cet extrait offre aux développeurs.

Voir la barre de navigation déroulante Pen Responsive par Tania Rascia

3. Mise en page d'une seule page par Jan Czizikow

Les menus de navigation d'une seule page ont besoin d'amour comme les autres. Ceci est un exemple parfait de navigation sur une seule page en action. Les liens défilent avec une animation fluide mais ne vous font pas attendre trop longtemps.

Sans oublier qu'ils se redimensionnent automatiquement pour s'adapter parfaitement, quelle que soit la taille de votre navigateur. Je recommanderais surtout ce type de navigation pour une page de vente ou un simple site de portfolio. Il est propre et propose d'excellentes fonctionnalités d'animation ainsi que des techniques réactives.

Voir le stylet Navigation entièrement réactive avec animations CSS et jQuery par Jan Czizikow

4. Menu déroulant rouge par Stephanie Walter

La développeuse Stephanie Walter a construit des projets passionnants pour le Web. Cet extrait n'est qu'un exemple avec une navigation rouge vif et réactive.

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 à la place un menu déroulant coulissant. J'opterais presque pour une liste de liens au niveau du bloc pour mobile, mais cela fonctionne beaucoup mieux compte tenu du sous-menu.

Voir la navigation Pen Responsive multiniveau par Stephanie Walter

5. Conception CSS pure par Ahmad Hjazy

Voici un design unique utilisant du CSS pur pour la navigation. C'est un menu vertical avec des liens de navigation imitant le tableau périodique des éléments.

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 cet exemple entier utilise uniquement CSS .

Voir le Pen CSS Responsive Navigation Menu par Ahmad Hjazy

6. En-tête collant réactif par Marc Libunao

J'ai mentionné la conception d'une seule page dans un extrait 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 que cet exemple utilise l'icône hamburger avec une animation amusante. C'est bien vu le style, mais ce n'est peut-être pas tout le monde.

Voir la navigation d'en-tête collant Pen Responsive par MarcLibunao

7. Réactif et tactile par Dragoeco

Tous les bons sites Web doivent être tactiles par défaut, et c'est ce qui rend cette navigation encore plus attrayante pour les concepteurs.

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

Voir la navigation déroulante du stylet : réactif et tactile par Dragoeco

8. Liens de navigation simples par AnabolicHippo

Quand je pense à des menus de navigation 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 divisent en lignes distinctes.

La partie la plus délicate consiste à gérer l'effet déroulant sur les appareils mobiles. De nombreux liens ont des sous-menus et ils 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 pour voir ce que vous pensez de l'expérience.

Voir le menu de navigation réactif du stylet par AnabolicHippo

9. Menu rideau Playstation par Louis Chenais

Le développeur Louis Chenais a créé l'une de mes navigations réactives préférées basée sur le site Web PlayStation. Louis appelle cela un "menu rideau" où il glisse dans la vue, dépassant toute la page. Ceci est courant pour les interfaces mobiles et est rapidement devenu populaire pour les concepteurs de sites Web.

Une chose que j'aime beaucoup, c'est le style d'animation. Il est élégant et suffisamment rapide pour afficher les liens sans ennuyer les utilisateurs. Et le meilleur de tous, cela donne l'impression que cela pourrait fonctionner sur un site Web de production.

Voir le principe de navigation réactive du stylet n ° 3 - Le menu rideau par Louis Chenais

10. Méga-menu réactif par Samir Alley

Vous pouvez effectuer une recherche sur le Web et trouver des centaines d'exemples de méga menus de navigation. Ceux-ci apparaissent généralement sur les blogs et les sites Web d'actualités plus importants, mais ils sont également populaires dans les boutiques de commerce électronique ou les sites de grandes agences. La partie la plus difficile d'un méga-menu est de le rendre entièrement 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 glissante 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 le bureau sans aliéner les utilisateurs mobiles.

Voir le Pen Responsive Mega Menu – Navigation par samir alley