Idag ska vi titta på hur man lägger till tangentbordsnavigering på en webbplats med några enkla rader med JavaScript. Först ska vi skapa ett enkelt webbplatstema i Photoshop och sedan omvandla det till en fungerande webbplats som använder tangentbordsfunktioner för att byta sidor.
Här är en skärmdump av vad vi ska bygga. Klicka på bilden för att se liveexemplet:
Photoshop Work
För att starta saker, öppna Photoshop och skapa ett nytt 800px med 600px-dokument vid 72dpi.
Radial Gradient
Hämta därefter gradientverktyget och sträck en radial gradient över bakgrunden. Din förgrundsfärg bör sättas till # 343636 och din bakgrundsfärg till # 121414. Se till att ljusare färg inte löper in i kanterna på dokumentet eller att du får en hård kant när vi placerar den i vår CSS.
Typ
Ta tag i typverktyget och välj ett teckensnitt. Jag valde Helvetica Neue. Skriv lite text på din hemsida som ovan, kopiera sedan det laget och ändra den typ som ska läsas? Om mig.? Upprepa det steget för? Min portfölj ,? och? Kontakta mig.?
Inre skugga
Placera nu en inre skugga på alla textlagren du just skapat med inställningarna ovan. Du kan tillämpa effekten på ett lager, högerklicka och gå till? Kopiera lagstil ,? högerklicka på de andra skikten och klistra in skiktstilen.
Navigationsnyckel
Skapa nu en nyckel för att instruera användarna hur man använder tangentbordsnavigeringsfunktionen. Skriv ut texten i blått och använd ett yttre glöd för att ge den en fin strålande effekt. Titta på skärmdumparna ovan för de specifika inställningarna. Var noga med att lämna ett mellanrum mellan parenteserna för pilarna i nästa steg.
pilar
Ta tag i det anpassade formverktyget (hittat under rektangulärverktyget flyger menyn) och välj en pil som din form. Rita fyra pilar (upp, ner, vänster och höger) och använd samma färg och yttre glöd som typen. Placera pilarna i parentesen från föregående steg.
Spara de fyra versionerna
Gå nu till? Spara för webb och enheter? under filmenyn. Spara ut varje version (Hem, Om, etc.) som en jpg i en mapp med namnet? Bilder.? Nu är vi alla färdiga i Photoshop så nära det och gå över till din favorit textredigerare eller webbutvecklingspaket. Jag använder den fantastiska Mac-applikationen Espresso.
HTML
Skapa en index.html-fil i samma katalog som bildmappen du skapade tidigare. Lägg till i en grundläggande HTML-struktur som länkar till en CSS- och JavaScript-fil.
Lägga till en navigeringsmeny
Vi vill inte att vår webbplats ska köras rent på tangentbordsnavigering så vi lägger till i en visuell navigationsmeny som den primära metoden att komma runt. För att göra detta ska vi skapa en? Nav? div inuti en? container? div i kroppsdelen av vår HTML. Inne i nav div, placera en oordnad lista med länkar som nedan.
Skapa de andra sidorna
Som jag sa tidigare vill vi hålla HTML-koden i denna handledning enkel så vi kommer att stanna där för hemsidan. Kopiera denna kod till tre html-filer: about.html, portfolio.html och contact.html. I var och en av dessa filer ändrar du bara namnet på container div. I den om filen, byt den till? OmContainer.? Följ med på? PortfolioContainer? och? contactcontainer? i de andra två.
Lägga till CSS
Du borde nu ha fyra väsentligen tomma webbsidor som bara innehåller en lista över ostylade länkar. Skapa en style.css-fil och starta den med följande grundläggande styling.
Här har vi väsentligen bara ställt in en bakgrundsfärg (matchande bakgrundsfärgen på vår PSD) och ställa in fontfamiljen som en fin, tunn Helvetica. Marginalautomat kommer att se till att innehållet är centrerat.
Lägga till bakgrundsbilder
Här är allt som börjar se rätt ut. Stil in var och en av de fyra containerdelarna för att ha de fyra bakgrunderna vi installerar i Photoshop.
Vid den här tiden borde dina sidor ta form och se något som bilden nedan:
Styling Navigationsmenyn
En sista bit av CSS kommer att slutföra navigationsmenyn.
Som du kan se har jag applicerat en del polstring på huvudnav div och tagit bort alla textdekorationer från länktexten. Sedan ställer jag in textfärgen till vit och lägger till en svängareffekt som matchar färgen på den blå texten i "Nav-tangenten"? på botten av sidan. Slutligen har jag lagt till i få rader för att specifikt rikta in listobjekten och sprida dem lite ut.
Om du har följt efter måste din sida matcha följande skärmdump:
JavaScript
Du borde nu ha en grundläggande, fungerande sida för fyra sidor! Länkarna i navigeringsmenyn ska låta dig växla mellan sidor med relativ lättnad.Nu kommer vi in i projektets hjärta: lägga till tangentbordsnavigering. Det är faktiskt en ganska enkel process och borde bara ta dig några minuter på det mesta. Vår JavaScript kommer att inspireras av denna handledning men tas i en annan riktning.
Ställa in skriptet
Skapa en script.js-fil och sätt in följande kod:
Som du kan se är den här koden ganska kort och väldigt grundläggande. I huvudsak berättar vi JavaScript för att köra funktionen? KeyCheck? när användaren trycker på en knapp. KeyCheck-funktionen är sedan knuten till variabeln? KeyID.? Detta kommer att se vad en användare trycker på och ställa in värdet till KeyID. Nu lägger vi till i en rad kod som berättar vad som ska göras om KeyID matchar vissa kriterier.
Denna kod är lite förvirrande. Som angivet på vår navigeringsknapp vill vi programmera siffrorna 1-4 och piltangenterna för att hoppa till specifika sidor. Här har vi satt upp ett fall som säger: om koden? 49? returneras, byt till sidindex.html (genom window.location). Du har antagligen märkt kod 49 är inte ett intuitivt sätt att hänvisa till att trycka på nummer ett. För att upptäcka nyckelkoderna för en viss nyckel, gå till den här sidan och rulla ner till avsnitt 3.3. Vi ser att numren 0-9 hänvisas till av koderna 48-57. Bläddra ner längre och se till att pilknappskoderna är följande: 37 (vänsterpil), 38 (pil upp), 39 (högerpil), 40 (nedåtpil). Med hjälp av denna uppsättning koder som riktlinje kan vi programmera varje knapptryckning för att motsvara en sida.
Fena!
Det är allt det finns! Du ska nu kunna navigera på din webbplats med bara pil- och nummerknapparna som med öppningsexemplet. Använd kommentarerna nedan för att meddela om du tycker att det här är en bra idé och om du lägger till tangentbordsnavigering till din webbplats eller ej. Det finns definitivt mer än ett sätt att ta itu med, så låt oss också veta några idéer du har för en alternativ metod för att implementera kortkommandon.