How To Create A Keypress Navigation Using jQuery

Bedrich Rios on Jun 1st 2008 with 90 comments

Tutorial Details

Difficulty: Beginner
Completion Time: 15 Minutes

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:

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<title>KeyPress Navigation Demo</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="style.css" />
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="keypress_nav.js"></script>
	</head>
	<body>
		<div id="header">
			<!-- Our navigation will go here -->
		</div>
		<div id="home">
			<h2>Welcome!</h2>
			<p>Some Text</p>
		</div>
		<div id="about">
			<h2>About Me</h2>
			<p>Some Text</p></p>
		</div>
		<div id="contact">
			<h2>No Spam Please</h2>
			<p>Some Text</p>
		</div>
		<div id="awards">
			<h2>Awards, So Many ...</h2>
			<p>Some Text</p>
		</div>
		<div id="links">
			<h2>Cool Sites</h2>
			<p>Some Text</p>
		</div>
	</body>
</html>

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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<title>KeyPress Navigation Demo</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="style.css" />
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="keypress_nav.js"></script>
	</head>
	<body>
		<div id="header">
			<ul id="navigation">
				<li><a href="#home">Home ( a )</a></li>
				<li><a href="#about">About ( s )</a></li>
				<li><a href="#contact">Contact ( d )</a></li>
				<li><a href="#awards">Awards ( f )</a></li>
				<li><a href="#links">Links ( g )</a></li>
			</ul>
		</div>
		<div id="home" class="container">
			<h2>Welcome!</h2>
			<p>Some Text</p>
		</div>
		<div id="about" class="container">
			<h2>About Me</h2>
			<p>Some Text</p></p>
		</div>
		<div id="contact" class="container">
			<h2>No Spam Please</h2>
			<p>Some Text</p>
		</div>
		<div id="awards" class="container">
			<h2>Awards, So Many ...</h2>
			<p>Some Text</p>
		</div>
		<div id="links" class="container">
			<h2>Cool Sites</h2>
			<p>Some Text</p>
		</div>
	</body>
</html>

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:

body 
{
	margin: 0;
	padding: 0;
	font-family: "Lucida Grande", "Lucida Sans", sans-serif;
	font-size: 100%;
	background: #333;
}
/* Header
-------------------------------------------------- */

#header
{
	width: 460px;
	margin: 0 auto;
	font-size: .75em;
	font-family: "Helvetica Neue", Helvetica, sans-serif;
}

#header ul 
{
	list-style: none;
	margin: 0;
	padding: 0;
}

#header ul li 
{
	float: left;
	text-align: left;
}

#header ul li a
{
	display: block;
	color: #ffff66;
	text-decoration: none;
	text-transform: uppercase;
	margin-right: 20px;
}

#header ul li a:hover
{
	text-decoration: underline;
	color: #ffcc66;
}
/* Containers
-------------------------------------------------- */

.container
{
	width: 400px;
	height: 300px;
	margin: 30px auto;
	padding: 10px 20px;
	border: 10px solid #fff;
	color: #fff;
	font-size: .75em;
	line-height: 2em;
}

.container h2
{
	padding: 5px 10px;
	width: 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; }
/* Self-Clearing Rules 
-------------------------------------------------- */

ul#navigation:after 
{
    content: ".";
    display: block;
    visibility: hidden;
    clear: both;
    height: 0;
}

* html ul#navigation 	{ height: 1px; }
ul#navigation 			{ min-height: 1px; }

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:

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:

function showViaKeypress(element_id)
{
	$(".container").css("display","none");
	$(element_id).slideDown("slow");
}

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:

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

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:

$(document).ready(function()
{
	// hides all DIVs with the CLASS container
	// and displays the one with the ID 'home' only
	$(".container").css("display","none");
	$("#home").css("display","block");
	
	// makes the navigation work after all containers have bee hidden 
	showViaLink($("ul#navigation li a"));
	
	// listens for any navigation keypress activity
	$(document).keypress(function(e)
	{
		switch(e.which)
		{
			// user presses the "a"
			case 97:	showViaKeypress("#home");
						break;	
						
			// user presses the "s" key
			case 115:	showViaKeypress("#about");
						break;
						
			// user presses the "d" key
			case 100:	showViaKeypress("#contact");
						break;
						
			// user presses the "f" key
			case 102:	showViaKeypress("#awards");
						break;
						
			// user presses the "g" key 
			case 103:	showViaKeypress("#links");
		}
	});
});

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:

$(document).ready(function()
{
	// hides all DIVs with the CLASS container
	// and displays the one with the ID 'home' only
	$(".container").css("display","none");
	$("#home").css("display","block");
	
	// makes the navigation work after all containers have bee hidden 
	showViaLink($("ul#navigation li a"));
	
	// listens for any navigation keypress activity
	$(document).keypress(function(e)
	{
		switch(e.which)
		{
			// user presses the "a"
			case 97:	showViaKeypress("#home");
						break;	
						
			// user presses the "s" key
			case 115:	showViaKeypress("#about");
						break;
						
			// user presses the "d" key
			case 100:	showViaKeypress("#contact");
						break;
						
			// user presses the "f" key
			case 102:	showViaKeypress("#awards");
						break;
						
			// user presses the "g" key 
			case 103:	showViaKeypress("#links");
		}
	});
});

// shows a given element and hides all others
function showViaKeypress(element_id)
{
	$(".container").css("display","none");
	$(element_id).slideDown("slow");
}

// shows proper DIV depending on link 'href'
function showViaLink(array)
{
	array.each(function(i)
	{	
		$(this).click(function()
		{
			var target = $(this).attr("href");
			$(".container").css("display","none");
			$(target).slideDown("slow");
		});
	});
}

Demo

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

Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By Bedrich Rios

Rollover to read this author's bio or click through to see a full list of posts by this author.

My name is Bedrich (@bedrios) — as in Bed an Rich — and I design and develop web sites for a living.

Plus Premium

Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more

Joseph
it’s a great tutorial, but (without reading all of the comments), there’s an obvious bug. clicking quickly on the links creates multiple tables, it doesn’t redo a single one. pressing the shortcuts quickly does the same, but when they’re done spreading down, it only keeps one.
http://a83.se A83
I haven’t seen that kind of S3 hosting before, how does it work? Is it a combination of S3 and EC2?
http://www.fijiwebdesign.com/ Gabe
A beauty. Only thing I’d change is have the subsequent event’s kill the previous events and animation. That way you don’t have everything animating all at once if you pressed all keys very quickly.
UNKNOWN
Nice tut. However there is a bug with this. If you click one link after the other very quickly then it will show you the contents of both nav links. So it would be nice if the one that did this tut can fix this.
Overall nice tut. =)
Leland
A completely useless tool, as a user generally will not spend enough time on your portfolio to actually make use of these “faux accesskeys.” Of course, these are only useful on portfolios, as high-profile websites will either have too many pages to have use of these, or not want to use tabs at all. I heartily agree with both. So again, this is a useless tutorial.
Alex
Hey, what would the JQuery code be like if we wanted it to be just links and no keypress? I’m new to jquery :)
http://www.baris-solution.de Baris
Awesome Tutorial. Thx NetTuts.
http://vincent-voyer.fr Vincent
You can have shorten the tutorial to :
# $(document).keypress(function(e)
# {
# switch(e.which)
# {
# // user presses the “a”
# case 97: showViaKeypress(“#home”);
# break;
#
# // user presses the “s” key
# case 115: showViaKeypress(“#about”);
# break;
#
# // user presses the “d” key
# case 100: showViaKeypress(“#contact”);
# break;
#
# // user presses the “f” key
# case 102: showViaKeypress(“#awards”);
# break;
#
# // user presses the “g” key
# case 103: showViaKeypress(“#links”);
# }
# });
Because this is the only interesting part in an article named aimed at “Keypress navigation”.
To handle the problem with multiple div showing when clicking fast :
#function showViaLink(array)
#{
# array.each(function(i)
# {
# $(this).click(function()
# {
# var target = $(this).attr(“href”);
# $(target).css(‘height’,’300px’).slideDown(0);
# $(“.container”).not($(target)).stop().hide();
# });
# });
#}
Bye !
http://sixrevisions.com Jacob Gube
Problem in IE7: There’s an issue with IE7 where when the page is refreshed, sometimes there’s a moment when the hidden elements show up (sort of like a flicker). I haven’t had much luck with this issue, and the problem stems from IE7 being sluggish in processing the .css("display", "none").
One workaround that I can think of is to assign the display: none attribute in the stylesheet instead of using jQuery, then select the first div, and assign it an attribute of display: visible or use .show() to show it initially. Something like: $('#home').css('display', 'visible') or $('#home').show()
The problem with this method: Poor degradation in the JS off / CSS on scenario, where you won’t see any of the div’s. So I would prefer not to do that.
If anyone out there can find a solution to this, I’d love to hear it.
http://www.dktutor.com Kaiserlino
Hi…
I am now with a big trobule…
When some one clicks the menu, its doesn’t stays in same place.
It gets left about 20px.
Have removed most the Css and nothing worked.
http://jaredrhizor.com/ Jared
Nice tutorial.
However, it should probably detect if the user is typing in a form. Since most contact pages would have a form on them, it would be troublesome to have it disappear whenever you type an A, S, D, F, or G.

Matt
Exactly. I’m doing something very similar, but I’m having this very problem with a form on the page.

Bill
Did you ever figure out how to disable this if the user is in a form?

MiMi
Nice tutorial!
I have a problem with IE7. I can view demo in IE7. I can use my code in FireFox. But I cannot use my code in IE7.
any advice?
Thx.
Pingback: Nova’s Blog » Blog Archiv » JQuery Tutorials für Einsteiger
http://www.windows7themes.com Windows Themes
Great techniques. Thanks alot
Pingback: 75 (Really) Useful JavaScript Techniques | Developer's Toolbox | Smashing Magazine
Pingback: 75 (Really) Useful JavaScript Techniques | aboutCREATION
Rick Adams
I am just a user reacting to the premise statement. (“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.”). Very, very true I think, however, in my decades of user experience (yes, I go back to and beyond the original PC, Commodore and TI) software and website designers RARELY consult with real users before designing things. Instead they design what THEY think will help the user. This is usually about as successful as trying to please your spouse with a gift or thoughtful action they have not asked for but which YOU think is perfect for them. Works sometimes; but other times, not so much. The wise developer spends considerable time with real world users discussing their needs and then watching users try to use the software they designed. I’ve seen many users just quit being users out of frustration with software that presumably some designer thought was user friendly. Likely this demo/technique is super (I’ve not read it) and perhaps even “tried” out on folks that don’t like computers but if not, I’d urge you to do so as you spin your new work of art. We’ll all thank you for it!
Pingback: 75 (Really) Useful JavaScript Techniques | rowebdesign
Pingback: 75 useful Javascript Techniques | rafdesign
Pingback: Design Feeds » Blog Archive » 75 (Really) Useful JavaScript Techniques
Pingback: 75 (Really) Useful JavaScript Techniques | Evolution : weblog
Pingback: 50+ jQuery Tutorials und mehr für Einsteiger und Fortgeschrittene
Vikrant Thakkar
I can not understand your lession for creating a cool menu in my site
Robbie
Well, after using $(document).keypress(…….., how can i stop the document from listening keypress ??
Any ideas ?
thanks
vaer
very nice, but it seems like an odd letter choice.
or is that because I use a dvorak keyboard?
Jmaes
Click the navigation links one after the other fastly you can observe that the last two tabs will be opened
http://www.wpdigger.com/ wpdigger
Cool tutorial,Thanks for this post and this site!
ktsixit
It’s a good script. I’m trying to use it in my page and there’s a small problem here.
The fact that it works using anchor links, scrolls down the screen. In your demo the div.container is at the top of the page but in my page it’s not.
Is there a way to prevent the page moving down to the start of the container div and stay at the top of it?
http://mywebdeveloper.in Shailender
It is not working properly, ie.e if e click two tabs with in a sec then twoi content loads on the spot
Remove it
Pingback: Keypress | jTutorials
Pingback: Tutoriales de la web para tu web » Blog Archive » Cómo crear un Keypress Navigation Usando jQuery
aparela
How can I implement ajax in this script? I mean doing the slide sown effect and then lead the slide’s content via ajax?
Sarah
You know how to make this in Flash? (eg. for menu in games)
jmarreros
good tut, although keypress event don’t refresh the url

http://www.facebook.com/profile.php?id=100003406011224 Natali
Thanks for all of your work on this website. Gloria dehiglts in engaging in research and it is obvious why. My spouse and i learn all of the compelling mode you offer vital techniques by means of this web blog and even cause participation from some others on the content then my girl is really studying a lot. Take advantage of the remaining portion of the year. Your carrying out a really great job.

http://www.dev-hq.co.uk Joe
Pretty Decent Tut!
Pingback: jQuery Keypress Navigation « Blog.laroouse
Pingback: Jquery for Web Design: Navigation | Chicago Web Design
Pingback: 42 jQuery Navigation based Techniques | Codrops
korzo
Hello,
I have small problem with this tutorial. Everything works fine exept one thing. Navigation works fin with keys but it don’t react when i click on navigation links with moue. I don’t know what the problem is, I checked source code many times.
Can anyone help? Thanks
Pingback: Professional web designers and web 2.0 experts » Blog Archive » Top 40 Jquery for Web Design: Navigation
pawel from poland
Hi,
I just begun with webmastering. This tutorial is very nice, I like it. But I would want to change some things but I don’t knew how.
How to link to other subsites e.g. awards.html instead to div with id=”awards”?
When I put every subsite into index.html it will be big file… :/
So I need some help, thanks :)
http://bloggerzbible.blogspot.com/ Bloggerzbible
beautiful tabbed pugin
Pingback: 45 jQuery Navigation Plugins and Tutorials | iDESIGN
Pingback: 45 jQuery Navigation Plugins and Tutorials | Afif Fattouh - Web Specialist
Pingback: 45 jQuery Navigation Plugins and Tutorials | Google Reader | Юлиян Попов
Pingback: 45 jQuery Navigation Plugins and Tutorials
Pingback: Wordpress Blog Services - 45 jQuery Navigation Plugins and Tutorials
Pingback: 45 jQuery Navigation Plugins and Tutorials » IMvsMI blog
Pingback: 45 jQuery Navigation Plugins and Tutorials - Interactive Middle East
Pingback: 45个 jQuery的导航插件和教程 « SonicHTML – 高品质 HTML+CSS 服务

How To Create A Keypress Navigation Using jQuery

Tutorial Details

Step 1

Step 2

Step 3

Step 5

Step 6

Step 7

Step 8

Demo

Enjoyed this Post?

By Bedrich Rios

Hello!

Premium Members

Full-time, Part-time and Contract Jobs

Freelance Jobs

How To Create A Keypress Navigation Using jQuery

Tutorial Details

Step 1

Step 2

Step 3

Step 5

Step 6

Step 7

Step 8

Demo

Enjoyed this Post?

By Bedrich Rios

Hello!

Premium Members

Full-time, Part-time and Contract Jobs

Freelance Jobs

Follow Nettuts+ and Tuts+ on Twitter