News

Create keyboard-powered navigation with CSS

Add a different level of interaction to your web pages to add interest and appeal

Keyboard Navigation

inspiration:

Personal portfolio sites are always the place that web designers like to show off their skills. Here every budding web designer can show off all the latest tricks that they can employ and often add some bleeding edge techniques that perhaps clients aren’t quite willing to take the risk with.

The young, Polish web designer Adam Rudzki is no exception to this and for his personal portfolio he has created an ultra-minimalist site that has clean and crisp graphics. The unique aspect about Adam’s site is that it can also makes use of keyboard navigation to get around, which is a novel way to navigate and discover the content. Occasionally it slides left and right, at other times, up and down.

DOWNLOAD TUTORIAL FILES

TECHNIQUE

Setting up the document

The first step in creating keyboard-driven navigation is to create a new HTML document and in the head section add the following code. This links to the jQuery library and then starts the CSS style for the document. This will make the HTML and body fill the full width of the browser and create the first content section, which also fills the browser.

001 <script src=”http://code.jquery.    com/    jquery-1.7.2.min.js”></script>
 002 <style>
 003 html,body{
 004    margin: 0; padding: 0;
 005    height: 100%; min-height: 100%;
 006    overflow: hidden;
 007 }
 008 .one{
 009    position: absolute; top: 0px; left:     0px;
 010    width: 100%; height: 100%;
 011    background-color: #0C0;}

Left-hand side

We continue adding to the CSS and here we add the code that will style up the second and third content area. The second area will be positioned to the left of the screen dynamically later on with jQuery. The third area will also be positioned off the bottom of the document dynamically. The reason for this is that we don’t know the size of the browser.

Document content

Now move to the body section of the document. Here we add three <div> tags for each of the sections. Here you could add some real content, instead of the placeholder text. Following on from that we add a script tag to start the JavaScript section. We detect if the document is ready and we store the width and height of the document and record that we are in position 1.

Checking the keyboard

We position our second <div> to the right of the browser and our third <div> below the first. Then we listen for the keyboard being pressed. If the left arrow key is pressed, we only want to move content to the left if we’ve moved right, ie position 2. So, if the right arrow key is pressed we move our first two <div> tags to the left.

001    $(‘#two’).css( “left”, w );
 002    $(‘#three’).css( “top”, h );
 003    $(document.documentElement).        004 keyup(function (event) {
 005    if (event.keyCode == 37 && pos ==     2) {
 006    $(‘#one’).animate({left:     ‘+=’+w}, “fast”);
 007    $(‘#two’).animate({left:     ‘+=’+w}, “fast”);
 008    pos = 1;
 009    } else if (event.keyCode == 39 &&     pos ==1) {
 010    $(‘#one’).animate({left:     ‘-=’+w}, “fast”);
 011    $(‘#two’).animate({left:         ‘-=1440’}, “fast”);
 012          pos = 2;

Up and down

Similar to the previous code we detect if the up cursor key is pressed on the keyboard. We only move the content up if we’re in position 3. If we press the down key then we move down to show the content below. Notice each time we move, we update the variable ‘pos’ to the new position. Save the document and test in your browser.

001    } else if (event.keyCode == 38 &&     pos     == 3) {    $(‘#one’).animate({top:         ‘+=’+h},     “fast”);
 002    $(‘#three’).animate({top:     ‘+=’+h}, “fast”);
 003    pos = 1;
 004    } else if (event.keyCode == 40     &&     pos == 1) {
 005    $(‘#one’).animate({top: ‘-=’+h},     “fast”);
 006    $(‘#three’).animate({top:     ‘-=’+h}, “fast”);
 007    pos = 3;}
 008    });
 009    }); </script>
×