1. Code
  2. Web Development

How To Create A Keypress Navigation Using jQuery

Scroll to top
Read Time: 7 min

The key to a succesful website is the ease with which a user finds what they are looking for. Thus, it's worth spending a lot of time and effort in creating both useful and visually appealing navigation systems. Lately, I have began experimenting with new ways to navigate a website. In this tutorial I'll show you how to let the user make use of their keyboard to get around your site.

Step 1

The first thing we need to do is create our test page. In this case, I will refer to it as demo.html and it will contain the following:

  1. A link to the jQuery framework.
  2. A link to the script we will work on later. Let's call it keypress_nav.js
  3. A link to a CSS file called style.css (we will also work on this later).
  4. A header div that will contain our navigation among other things. And
  5. Five unique div elements that will serve as pages for our site.

So, here is what demo.html looks like at this point:

Step 2

Now that we have our DIVs in place, we can go ahead and create the navigation for the page. As you may have guessed, we will be using an unordered list <ul> to hold the links and the DIV's IDs as the targets for these links. Also, we will add the class container to all the DIV "pages." This class will help us easily refer to these DIVs when we create our script. So, here is what you should have now:

Note: The letter (key) inside the parenthesis is the key we will later use as navigation for our page.

Step 3

The structure of our test page is now complete but lacking visual appeal. So, let's add some CSS and jazz it up. One thing to keep in mind before we begin the styling is that our page must look good even if JavaScript is turned off. Scripts, in my opinion, should always be used as a bonus to those users who have JavaScript turned on but should not alienate those who don't. We are web designers/developers after all, and we care about usability, right?

You can see the look we're going for in the screenshot above. It's simple and uses some nice, bold colours to highlight the different sections. So here's our CSS:

Note: I have added some self-clearing rules to the navigation in order to work around its lack of height due to its inner floated elements. In other words, margin rules from the upper most container will now have the proper effect on the navigation <ul>.

Step 5

At this point in the tutorial you should have a page looking something like this:

Test Page Preview

It is a functional page and it works properly without the need for JavaScript to be turned on. However, as I said before, let's give a little bonus to those users who do have JavaScript turned on on their browsers. We will do this in two steps. Firstly, we will create two functions that will hide and display the pages appropiately. And secondy, we will add some some code to determine the keys pressed by the user. Let's now create a file called keypress_nav.js and get to work on our functions.

Step 6

We are going to need two functions for our script to work as desired. One of the functions will be called when the user presses one of our predetermined navigation keys (The letters in parenthesis from Step 2) and will hide all other containers displaying only the DIV associated to this key. This is what our first function looks like:

Now, our second function will take an array of links and assign them on click target functions. In other words the function will get our navigation links, retrieve the "href" attribute and display the appropiate DIV upon clicking it. So, here is what the second function looks like:

Step 7

Now that we have our functions coded, we need to call them appropiately when the page loads. The first thing we need to do is hide all the elements that have class container with the exception of the DIV that has the ID home. Next, we need to call the showViaLink() function with the links inside of our navigation <ul> as its parameter. Last but not least, we have to listen for the user keypress and call the showViaPress() function with the appropiate ID as its parameter. This can be accomplished by using a switch on the key pressed.

The switch will have 5 cases (one for every link) and its number corresponds to the ASCII number for the keypress. For example, if the "a" key is pressed, switch will use case 97. So, here is what the code looks like:

Step 8

Now that we have all the pieces of the puzzle, we can put it together. Here is what the final iteration of our script should look like:


Take a look at the script in action on this demo page.
The pattern used in this demo was made by Taylor Satula.


Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.