Créer un menu de navigation réactif plus intelligent avec ce plugin jQuery
Chaque site moderne a besoin d'un mise en page réactive et un navigation utilisable. C'est une donnée.
Mais les menus de hamburgers ne peuvent aller que très loin et ils changer radicalement la convivialité pour différentes tailles d'écran. La meilleure façon de gérer cela est par masquer progressivement les liens avec un plugin tel que Okayav.
Ce plugin gratuit jQuery ajoute une fonction de menu très simple à n'importe quelle page et c'estcache bas éléments de navigation, basé sur différentes fenêtres. De cette façon, les utilisateurs de smartphones ont le menu hamburger unique, mais les utilisateurs de tablettes peuvent également voir quelques liens..
Par défaut, il s’appuie sur un élément et un longue liste non ordonnée. Jusqu'à présent, je ne pense pas que ce plugin prenne en charge les menus déroulants à plusieurs niveaux, mais si vous connaissez un peu de jQuery, vous pouvez l'ajouter vous-même..
OkayNav est extrêmement simple et c'est destiné à des sites Web plus simples qui ont seulement une poignée de liens de navigation. Ces liens se cacher lentement derrière un menu hors écran une fois qu'ils ont frappé une certaine fenêtre et plus de liens se cachent plus le navigateur devient petit.
Vous aurez besoin de Enveloppez votre liste non ordonnée dans un élément de navigation et lui donner un identifiant spécifique. Ensuite vous pouvez cibler tout le nav avec le okayNav () fonctionne comme ceci:
var navigation = $ ('# nav-main'). okayNav (); Notez que ceci est juste le configuration la plus simple sans fonctionnalités personnalisées. Vous pouvez travailler avec plus d'une douzaine d'options personnalisées intégré à cette bibliothèque pour contrôler le style des icônes, l'animation du menu, la prise en charge des balayages et les fonctions de rappel.
Et vous pouvez même appeler le menu pour ouvrir / fermer à volonté en passant des valeurs spécifiques à la fonction. Voici un exemple simple à ouvrir la navigation:
navigation.okayNav ('openInvisibleNav'); Tous ces codes sont bien documentés dans la Repo GitHub qui comprend également un téléchargement du script. Si vous préférez l’itinéraire CDN, vous pouvez également utiliser le Lien RawGit ajouter ce script directement depuis GitHub.
OkayNav est idéal pour les petits sites qui bénéficient de la technique de navigation progressive. Mais, si vous ne savez toujours pas comment cela fonctionne, consultez cette démo sur CodePen montrant ce que ce petit plugin peut faire..
