Comment créer une navigation par pression à l'aide de jQuery

La clé d'un site Web réussi est la facilité avec laquelle un utilisateur trouve ce qu'il cherche. Il est donc utile de consacrer beaucoup de temps et d’efforts à la création de systèmes de navigation utiles et visuellement attrayants. Dernièrement, j'ai commencé à expérimenter de nouvelles façons de naviguer sur un site Web. Dans ce tutoriel, je vais vous montrer comment laisser l'utilisateur utiliser son clavier pour se déplacer sur son site..

Étape 1

La première chose à faire est de créer notre page de test. Dans ce cas, je le désignerai par demo.html et il contiendra les éléments suivants:

1. Un lien vers le framework jQuery.
2. Un lien vers le script sur lequel nous travaillerons plus tard. Appelons ça keypress_nav.js
3. Un lien vers un fichier CSS appelé style.css (nous y travaillerons aussi plus tard).
4. Un en-tête div qui contiendra notre navigation, entre autres. Et
5. Cinq éléments div uniques qui serviront de pages pour notre site.

Donc, voici à quoi ressemble demo.html:

          
  
 
 
Bienvenue!
 
Du texte
 
 
 
À propos de moi
 
Du texte
 
 
 
Pas de spam s'il vous plaît
 
Du texte
 
 
 
Des prix, tellement… 
 
Du texte
 
 
 
Sites cool
 
Du texte
 
   

Étape 2

Maintenant que nos DIV sont en place, nous pouvons continuer et créer la navigation pour la page. Comme vous l'avez peut-être deviné, nous utiliserons une liste non ordonnée

pour contenir les liens et les identifiants de la DIV en tant que cibles de ces liens. Aussi, nous allons ajouter la classe récipient à toutes les "pages" DIV. Cette classe nous aidera à faire facilement référence à ces DIV lorsque nous créons notre script. Alors, voici ce que vous devriez avoir maintenant:

          
 
 
Accueil a )
 
À propos de
 
Contact (d)
 
Prix ​​(f)
 
Liens (g)
 
 
 
 
Bienvenue!
 
Du texte
 
 
 
À propos de moi
 
Du texte
 
 
 
Pas de spam s'il vous plaît
 
Du texte
 
 
 
Des prix, tellement… 
 
Du texte
 
 
 
Sites cool
 
Du texte
 
   

Remarque: La lettre (clé) à l'intérieur de la parenthèse est la clé que nous utiliserons plus tard comme navigation pour notre page.

Étape 3



La structure de notre page de test est maintenant complète mais manque d’attrait visuel. Alors, ajoutons du CSS et agrémentez-le. Une chose à garder à l’esprit avant de commencer le style est que notre page doit avoir une belle apparence, même si JavaScript est désactivé. Les scripts, à mon avis, devraient toujours être utilisés comme un bonus pour les utilisateurs qui ont JavaScript activé, mais ne doivent pas aliéner ceux qui ne le font pas. Nous sommes des concepteurs / développeurs Web après tout, et nous tenons à la convivialité, à droite?

Vous pouvez voir l'aspect que nous recherchons dans la capture d'écran ci-dessus. C'est simple et utilise de jolies couleurs vives pour mettre en évidence les différentes sections. Alors voici notre CSS:

corps marge: 0; rembourrage: 0; font-family: "Lucida Grande", "Lucida Sans", sans-serif; taille de police: 100%; arrière-plan: # 333;  /* Entête ---------------------------------------------- ---- * / #header width: 460px; marge: 0 auto; taille de police: .75em; famille de fontes: "Helvetica Neue", Helvetica, sans serif;  #header ul list-style: none; marge: 0; rembourrage: 0;  #header ul li float: left; text-align: left;  #header ul li a display: block; couleur: # ffff66; texte-décoration: aucun; text-transform: majuscule; marge droite: 20px;  #header ul li a: hover text-decoration: underline; couleur: # ffcc66;  / * Containers ---------------------------------------------- ---- * / .container width: 400px; hauteur: 300px; marge: auto 30px; rembourrage: 10px 20px; bordure: 10px solide #fff; couleur: #fff; taille de police: .75em; hauteur de ligne: 2em;  .container h2 padding: 5px 10px; largeur: 200px;  #home background: # 15add1;  #home h2 background: # 007aa5;  #about background: # fdc700;  #about h2 background: # bd9200;  #contact background: # f80083;  #contact h2 background: # af005e;  #awards background: # f18300;  #awards h2 background: # bb5f00;  #links background: # 98c313;  #links h2 background: # 6f9a00;  / * Règles de suppression automatique ------------------------------------------- ------- * / ul # navigation: after content: "."; bloc de visualisation; visibilité: cachée; clarifier les deux; hauteur: 0;  * html ul # navigation height: 1px;  ul # navigation min-height: 1px;  

Remarque: J'ai ajouté quelques règles d'auto-nettoyage à la navigation afin de contourner son manque de hauteur en raison de ses éléments internes flottants. En d’autres termes, les règles de marge du conteneur le plus haut auront désormais un effet approprié sur la navigation.

.

Étape 5

À ce stade du didacticiel, vous devriez avoir une page ressemblant à ceci:



C'est une page fonctionnelle qui fonctionne correctement sans qu'il soit nécessaire d'activer JavaScript. Cependant, comme je l'ai déjà dit, accordons un petit bonus aux utilisateurs qui ont JavaScript activé dans leur navigateur. Nous allons faire cela en deux étapes. Tout d'abord, nous allons créer deux fonctions qui masqueront et afficheront les pages de manière appropriée. Et ensuite, nous allons ajouter du code pour déterminer les touches sur lesquelles l'utilisateur appuie. Créons maintenant un fichier appelé keypress_nav.js et se mettre au travail sur nos fonctions.

Étape 6

Nous allons avoir besoin de deux fonctions pour que notre script fonctionne comme vous le souhaitez. Une des fonctions sera appelée lorsque l'utilisateur appuiera sur l'une de nos touches de navigation prédéterminées (les lettres entre parenthèses de l'étape 2) et masquera tous les autres conteneurs affichant uniquement le DIV associé à cette clé. Voici à quoi ressemble notre première fonction:

fonction showViaKeypress (id_élément) $ (". conteneur"). css ("display", "none"); $ (element_id) .slideDown ("slow");  

Maintenant, notre deuxième fonction va prendre un tableau de liens et les assigner à des fonctions de cible de clic. En d'autres termes, la fonction obtiendra nos liens de navigation, récupérera l'attribut "href" et affichera la DIV appropriée en cliquant dessus. Alors, voici à quoi ressemble la deuxième fonction:

fonction showViaLink (array) array.each (function (i) $ (this) .click (function () var target = $ (this) .attr ("href"); $ (". conteneur"). css ("display", "none"); $ (cible) .slideDown ("slow");););  

Étape 7

Maintenant que nos fonctions sont codées, nous devons les appeler correctement lors du chargement de la page. La première chose à faire est de cacher tous les éléments de classe récipient à l'exception de la DIV qui a l'ID maison. Ensuite, nous devons appeler le showViaLink () fonctionner avec les liens à l'intérieur de notre navigation

comme paramètre. Dernier point mais non le moindre, nous devons écouter la touche de l'utilisateur et appeler le showViaPress () fonctionne avec l'ID approprié en tant que paramètre. Ceci peut être accompli en utilisant un commutateur sur la touche appuyée.

Le commutateur aura 5 cas (un pour chaque lien) et son numéro correspond au numéro ASCII pour la pression de touche. Par exemple, si le "une" la touche est enfoncée, le commutateur utilisera le cas 97. Alors, voici à quoi ressemble le code:

$ (document) .ready (function () // masque toutes les DIV avec le conteneur CLASS // et affiche celui avec l'ID 'home' uniquement $ (". container"). css ("display", "none" ); $ ("# home"). css ("display", "block"); // active la navigation après que tous les conteneurs ont été masqués showViaLink ($ ("ul # navigation li a")); // écoute pour toute navigation touchez activité $ (document) .keypress (fonction (e) switch (e.which) // l'utilisateur appuie sur le "a" cas 97: showViaKeypress ("# home"); // utilisateur appuie sur le "s" clé de cas 115: showViaKeypress ("# about"); break; // l'utilisateur appuie sur la touche "d". 100: showViaKeypress ("# contact"); break; // l'utilisateur appuie sur la touche "f". : showViaKeypress ("# récompenses"); break; // l'utilisateur appuie sur la casse de touche "g" 103: showViaKeypress ("# links"););); 

Étape 8

Maintenant que nous avons toutes les pièces du puzzle, nous pouvons les assembler. Voici à quoi devrait ressembler l'itération finale de notre script:

$ (document) .ready (function () // masque toutes les DIV avec le conteneur CLASS // et affiche celui avec l'ID 'home' uniquement $ (". container"). css ("display", "none" ); $ ("# home"). css ("display", "block"); // active la navigation après que tous les conteneurs ont été masqués showViaLink ($ ("ul # navigation li a")); // écoute pour toute navigation touchez activité $ (document) .keypress (fonction (e) switch (e.which) // l'utilisateur appuie sur le "a" cas 97: showViaKeypress ("# home"); // utilisateur appuie sur le "s" clé de cas 115: showViaKeypress ("# about"); break; // l'utilisateur appuie sur la touche "d". 100: showViaKeypress ("# contact"); break; // l'utilisateur appuie sur la touche "f". : showViaKeypress ("# récompenses"); break; // l'utilisateur appuie sur la casse de touche "g" 103: showViaKeypress ("# links"););); // affiche un élément donné et masque toutes les autres fonctions showViaKeypress (id_élément) $ (". conteneur"). css ("display", "none"); $ (element_id) .slideDown ("slow");  // montre la bonne DIV en fonction du lien 'href' fonction showViaLink (tableau) tableau.each (fonction (i) $ (ceci)) .click (fonction () var cible = $ (ceci) .attr ("href "); $ (". conteneur "). css (" display "," aucun "); $ (cible) .slideDown (" slow ");););  

Démo

Regardez le script en action sur cette page de démonstration.
Le modèle utilisé dans cette démo a été créé par Taylor Satula.

ENDE

Code