Utilisez jQuery pour gérer facilement les incohérences du navigateur avec les liaisons d'événements et de le rendre facile à basculer des cours sur les éléments DOM
Donc, pour nous faciliter la vie, nous allons construire une navigation réactive. Quelques objectifs pour cette navigation sont les suivants:
Dans le pied de page?
La navigation à une petite taille après avoir touché / cliquant sur l'icône du menu pour exposer l'élément hors toile
plus petite
Nous allons commencer par ce qui suit dans nav.js. Cela va créer un objet (window.NAV) pour contenir tout le code pour contrôler notre navigation:
La méthode init contient surtout de la configuration nécessaire. Ici, il vous appelle NAV.bindEvents. qui utilise jQuery pour lier un événement de clic pour quoi que ce soit avec une classe de js-togglesOffCanvas. appeler la méthode NAV.toggle.
NAV.toggle va arrêter l'événement par défaut de mise à feu (donc nous ne pas suivre les liens que nous ne voulons pas) et utiliser jQuery pour activer la classe mainMenu-est ouverte sur le corps. Cela crée les règles CSS pour déplacer le .mainNav div (actuellement positionné sur le côté gauche de l'écran) en vue à l'aide de CSS transforme. En utilisant les forces translate3d accélération matérielle dans WebKit. Ainsi, nous pouvons détecter ce qui est disponible à l'aide Modernizr et utiliser translate3d (si disponible) pour des animations plus fluides.
Étant donné que notre événement est lié à togglesOffCanvas de la classe. vous devrez ajouter cette classe au lien show dans l'en-tête:
Vous devriez maintenant avoir une navigation qui glisse depuis le côté gauche à une petite taille lorsque vous cliquez sur le lien Afficher Nav. Mais attendez - nous n'avons pas une façon de fermer la navigation maintenant que nous avons ouvert il. Fixons que.
Nous allons ensuite ajouter une ligne à la méthode init pour ajouter cette div au DOM. De cette façon, nous ne sommes que l'ajout si nous avons JS et la navigation hors toile peut être activée.
Si vous voulez voir que div, ajouter une classe de visible: que cet élément est invisible, cela peut être utile pour les tests. Maintenant est un bon moment pour ajouter le bouton près de la navigation lui-même. Ajouter un