So erstellen Sie eine Keypress-Navigation mit jQuery

Der Schlüssel zu einer erfolgreichen Website ist die Leichtigkeit, mit der ein Nutzer findet, wonach er sucht. Daher lohnt es sich, viel Zeit und Mühe in die Entwicklung nützlicher und optisch ansprechender Navigationssysteme zu investieren. In letzter Zeit habe ich mit neuen Wegen experimentiert, um auf einer Website zu navigieren. In diesem Tutorial zeige ich Ihnen, wie Sie Benutzern die Verwendung ihrer Tastatur ermöglichen, um auf Ihrer Website zu navigieren.

Schritt 1

Als Erstes müssen wir unsere Testseite erstellen. In diesem Fall werde ich darauf Bezug nehmen demo.html und es wird folgendes enthalten:

1. Ein Link zum jQuery-Framework.
2. Ein Link zum Skript, an dem wir später arbeiten werden. Nennen wir es mal keypress_nav.js
3. Ein Link zu einer CSS-Datei, die aufgerufen wird style.css (wir werden später auch daran arbeiten).
4. Ein Header-Div, das unter anderem unsere Navigation enthält. Und
5. Fünf einzigartige div-Elemente, die als Seiten für unsere Site dienen.

So sieht demo.html an dieser Stelle aus:

          
  
 
 
Herzlich willkommen!
 
Etwas Text
 
 
 
Über mich
 
Etwas Text
 
 
 
Kein Spam bitte
 
Etwas Text
 
 
 
Auszeichnungen, so viele… 
 
Etwas Text
 
 
 
Coole Seiten
 
Etwas Text
 
   

Schritt 2

Jetzt, da wir unsere DIVs eingerichtet haben, können wir die Navigation für die Seite erstellen. Wie Sie vielleicht schon erraten haben, verwenden wir eine ungeordnete Liste

die Links und die IDs des DIV als Ziele für diese Links zu halten. Außerdem fügen wir die Klasse hinzu Container zu allen DIV-Seiten. Diese Klasse hilft uns bei der Erstellung unseres Skripts, auf diese DIVs zu verweisen. Also, hier ist was Sie jetzt haben sollten:

          
 
 
Zuhause (a)
 
Über (s)
 
Kontakt (d)
 
Preise (f)
 
Links (g)
 
 
 
 
Herzlich willkommen!
 
Etwas Text
 
 
 
Über mich
 
Etwas Text
 
 
 
Kein Spam bitte
 
Etwas Text
 
 
 
Auszeichnungen, so viele… 
 
Etwas Text
 
 
 
Coole Seiten
 
Etwas Text
 
   

Hinweis: Der Buchstabe (Schlüssel) in der Klammer ist der Schlüssel, den wir später als Navigation für unsere Seite verwenden werden.

Schritt 3



Die Struktur unserer Testseite ist nun vollständig, aber es fehlt ihr an Optik. Fügen wir also ein paar CSS hinzu und jazz es auf. Bevor Sie mit dem Styling beginnen, sollten Sie daran denken, dass unsere Seite auch bei deaktiviertem JavaScript gut aussehen muss. Meines Erachtens sollten Skripte immer als Bonus für Benutzer verwendet werden, die JavaScript aktiviert haben, aber diejenigen, die dies nicht tun, nicht entfremden. Wir sind schließlich Webdesigner / -entwickler, und wir legen Wert auf Benutzerfreundlichkeit, richtig?

Sie sehen den Look, den wir in der Abbildung oben sehen. Es ist einfach und verwendet einige schöne, kräftige Farben, um die verschiedenen Abschnitte hervorzuheben. Hier ist unser CSS:

body margin: 0; Polsterung: 0; Schriftfamilie: "Lucida Grande", "Lucida Sans", serifenlos; Schriftgröße: 100%; Hintergrund: # 333;  /* Header ---------------------------------------------- ---- * / #header width: 460px; Marge: 0 auto; Schriftgröße: .75em; Schriftfamilie: "Helvetica Neue", Helvetica, serifenlos;  #header ul list-style: none; Marge: 0; Polsterung: 0;  #header ul li float: left; Text ausrichten: links;  #header ul li a display: block; Farbe: # ffff66; Textdekoration: keine; Text-Transformation: Großbuchstaben; Rand rechts: 20px;  #header ul li a: hover text-decoration: underline; Farbe: # ffcc66;  /* Behälter ---------------------------------------------- ---- * / .container Breite: 400px; Höhe: 300px; Marge: 30px auto; Polsterung: 10px 20px; Rahmen: 10px fest #fff; Farbe: #fff; Schriftgröße: .75em; Zeilenhöhe: 2em;  .container h2 padding: 5px 10px; Breite: 200px;  #home background: # 15add1;  #home h2 background: # 007aa5;  #about Hintergrund: # fdc700;  #über h2 background: # bd9200;  #contact Hintergrund: # F80083;  #contact h2 background: # af005e;  #awards background: # f18300;  #awards h2 background: # bb5f00;  #links background: # 98c313;  #links h2 background: # 6f9a00;  / * Regeln zum automatischen Löschen --------------------------------------- ------- * / ul # navigation: after content: "."; Bildschirmsperre; Sichtbarkeit: versteckt; Lösche beide; Höhe: 0;  * html ul # navigation height: 1px;  ul # navigation min-height: 1px;  

Hinweis: Ich habe der Navigation einige Regeln zum Löschen hinzugefügt, um die mangelnde Höhe aufgrund der inneren Elemente zu umgehen. Mit anderen Worten, Randregeln aus dem obersten Container haben jetzt die richtige Auswirkung auf die Navigation

.

Schritt 5

An dieser Stelle im Tutorial sollten Sie eine Seite haben, die ungefähr so ​​aussieht:



Es ist eine funktionale Seite und funktioniert einwandfrei, ohne dass JavaScript aktiviert werden muss. Wie bereits gesagt, möchten wir den Benutzern, die JavaScript in ihren Browsern aktiviert haben, einen kleinen Bonus geben. Wir werden dies in zwei Schritten tun. Zunächst werden wir zwei Funktionen erstellen, die die Seiten entsprechend ausblenden und anzeigen. Zweitens werden wir etwas Code hinzufügen, um die vom Benutzer gedrückten Tasten zu bestimmen. Erstellen wir nun eine Datei mit dem Namen keypress_nav.js und arbeiten Sie an unseren Funktionen.

Schritt 6

Wir benötigen zwei Funktionen, damit unser Skript wie gewünscht funktioniert. Eine der Funktionen wird aufgerufen, wenn der Benutzer eine unserer vorbestimmten Navigationstasten drückt (Die Buchstaben in Klammern von Schritt 2), und alle anderen Container werden ausgeblendet, wobei nur der DIV angezeigt wird, der dieser Taste zugeordnet ist. So sieht unsere erste Funktion aus:

function showViaKeypress (element_id) $ (". container"). css ("display", "none"); $ (element_id) .slideDown ("langsam");  

Unsere zweite Funktion nimmt nun eine Reihe von Links und weist sie den Klick-Zielfunktionen zu. Mit anderen Worten, die Funktion ruft unsere Navigationslinks ab, ruft das Attribut "href" ab und zeigt beim Anklicken das entsprechende DIV an. So sieht also die zweite Funktion aus:

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

Schritt 7

Jetzt, da wir unsere Funktionen codiert haben, müssen wir sie beim Laden der Seite entsprechend aufrufen. Als erstes müssen wir alle Elemente ausblenden, die eine Klasse haben Container mit Ausnahme des DIV, der die ID hat Zuhause. Als nächstes müssen wir die anrufen showViaLink () Funktion mit den Links in unserer Navigation

als dessen Parameter. Last but not least müssen wir auf die Benutzertaste warten und die anrufen showViaPress () Funktion mit der entsprechenden ID als Parameter. Dies kann mit a erreicht werden Schalter auf der Taste gedrückt.

Der Switch hat 5 Fälle (einen für jeden Link) und seine Nummer entspricht der ASCII-Nummer für den Tastendruck. Zum Beispiel, wenn die "ein" Die Taste wird gedrückt, der Schalter verwendet den Fall 97. So sieht der Code aus:

$ (document) .ready (function () // verbirgt alle DIVs mit dem CLASS-Container // und zeigt nur das mit der ID "home" an) $ (". container"). css ("display", "none") ); $ ("# home"). css ("display", "block"); // bewirkt, dass die Navigation funktioniert, nachdem alle Container ausgeblendet wurden showViaLink ($ ("ul # navigation li a")); // hört zu für eine beliebige Navigationstaste $ (Dokument) .keypress (Funktion (e) switch (e.which) // Benutzer drückt den "a" -Fall 97: showViaKeypress ("# home"); break; // Benutzer drückt die "s" Tastenfall 115: showViaKeypress ("# about"); break; // Benutzer drückt die "d" Tastenfall 100: showViaKeypress ("# contact"); break; // Benutzer drückt die "f" Keyfall 102 : showViaKeypress ("# awards"); break; // Benutzer drückt die "g" -Taste. Fall 103: showViaKeypress ("# links"););); 

Schritt 8

Nun, da wir alle Teile des Puzzles haben, können wir es zusammensetzen. So sollte die letzte Iteration unseres Skripts aussehen:

$ (document) .ready (function () // verbirgt alle DIVs mit dem CLASS-Container // und zeigt nur das mit der ID "home" an) $ (". container"). css ("display", "none") ); $ ("# home"). css ("display", "block"); // bewirkt, dass die Navigation funktioniert, nachdem alle Container ausgeblendet wurden showViaLink ($ ("ul # navigation li a")); // hört zu für eine beliebige Navigationstaste $ (Dokument) .keypress (Funktion (e) switch (e.which) // Benutzer drückt den "a" -Fall 97: showViaKeypress ("# home"); break; // Benutzer drückt die "s" Tastenfall 115: showViaKeypress ("# about"); break; // Benutzer drückt die "d" Tastenfall 100: showViaKeypress ("# contact"); break; // Benutzer drückt die "f" Keyfall 102 : showViaKeypress ("# awards"); break; // Benutzer drückt die "g" -Taste. Fall 103: showViaKeypress ("# links"););); // zeigt ein gegebenes Element und verbirgt alle anderen Funktionen showViaKeypress (element_id) $ (". container"). css ("display", "none"); $ (element_id) .slideDown ("langsam");  // zeigt die richtige DIV in Abhängigkeit vom Link 'href' Funktion showViaLink (array) array.each (function (i) $ (this) .click (function () var target = $ (this) .attr ("href.") "); $ (". container "). css (" display "," none "); $ (target) .slideDown (" slow ");););  

Demo

Schauen Sie sich das Skript in Aktion auf dieser Demo-Seite an.
Das in dieser Demo verwendete Muster stammt von Taylor Satula.

ENDE

Code