Design Lunatic

Jquery Lavalamp Menu with Keyboard Control

Today, I will explain how to create a jquery lavalamp menu. However, this is more than just a simple lavalamp menu; it will also have keyboard navigation. Sound interesting? Let’s get started!

HTML

The menu we’ll be creating has a simple markup consisting of “nav” element to hold everything, a “ul” to hold the menu content, and an “underline” div that will change position depending on what nav item is currently active.

<nav id="menu">

	<ul>
		<li id="nav1"><a href="#home">Home</a></li>
		<li id="nav2"><a href="#blog">Blog</a></li>
		<li id="nav3"><a href="#about">About</a></li>
		<li id="nav4"><a href="#contact">Contact</a></li>
	</ul>
	
	<div id="underline" class="pos1"></div>
	
</nav>

That’s all the HTML we’ll need.

CSS

Grab Eric Meyer’s CSS Reset before continuing. Now, we’ll give the body some simple styling.

body {
background: #f8f8f8;
font-family: arial;
}

This way, we’ll have a light grey body background, with the text on the page being Arial.

The menu requires some slightly more complicated styling.

#menu {
margin: 0 auto;
margin-top: 50px;
width: 400px;
height: 45px;
font-size: 18px;
line-height: 45px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #ffffff;
border: 1px solid #CACACA;
-webkit-box-shadow: 0px 0px 3px 1px #ebebeb;
-moz-box-shadow: 0px 0px 3px 1px #ebebeb;
box-shadow: 0px 0px 3px 1px #ebebeb;
}

The menu is centered, and is 50px from the top of the page. It’s got a nice width of 400px, and a height of 45px. The menu text is 18px, and has a line-height of 45px. The line-height is the same as the height of the menu so that the text is vertically centered. We then give the menu some nice rounded corners by using the “border-radius” CSS3 property. We also give the menu a white background and a grey border, as well as a box-shadow to make it more interesting.

Now, we have to style the menu items.

#menu ul li{
float: left;
width: 100px;
text-align: center;
}

Each menu item is floated to the left so that the menu items are in a horizontal row. They all have a width of 100px so that the four menu items end up fitting inside the 400px menu perfectly. They also have “text-align” set to “center” so that the text inside is centered rather than being aligned to the left.

Now, the links.

#menu ul li a {
display: block;
color: #515151;
}

Each menu link has “display: block” so that the link takes up the whole “li” space. In other words, the whole item is clickable rather than the just the text. They also have a color of #515151, which is a nice dark grey color.

Lastly, we’ve got to style the underline that will change position depending on what menu item is active.

#underline {
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;

-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-radius: 0px 0px 10px 10px;
border-radius: 0px 0px 10px 10px;

position: relative;
top: 40px;
width: 100px;
height: 5px;
background: #515151;
}

First of all, we make the underline have an animation length so that when it changes position, it moves over instead of instantly jumping over to the new spot. It also has a border-radius that is the same as the menu’s so that when the underline is at the edge of the menu, it doesn’t pop out of the borders. Its “position” is set to “relative” so that we can use the “top” property. Next, we use “top” to shift it 40px down. This way, the underline is right at the bottom of the menu. Then, we give it a width of 100px which is the same as each menu item, and a height of 5px. Lastly, we give it a background color.

Now, we have one more thing left to do.

.pos1 {
left: 0px;
}

.pos2 {
left: 100px;
}

.pos3 {
left: 200px;
}

.pos4{
left: 300px;
}

We’ll be using javascript to apply these classes to the underline depending on what link is currently active. For example, if the user hovers over the third link, the javascript will apply the “pos3″ class to the underline.

Jquery

Before we start with the code, I’ll go over what we’ll have once we’re done.

1. A $(document).ready function so that the code executes only when the document is fully loaded.
2. A menu item hover function so that we can move the underline to the correct spot.
3. A $(document).keydown function with a switch so that we can check which key was pressed and apply the correct javascript.
4. Two different cases inside the switch – one of them for the right arrow key and the other for the left arrow key.

Now, we can start.

$(document).ready(function(){
	$('#menu ul li').hover(function(){

	});
});

There’s the document ready function, and the menu item hover function. This checks to see if the user has hovered over one of the menu items.

$('#menu ul li').hover(function(){
		
	var pos = $(this).attr('id').substring(3);
			
	$('#underline').removeClass();
	$('#underline').addClass('pos'+pos);
		
});

First off, we create a variable called “pos” which is the number of the menu item just hovered over. We get this number by taking the ID of the item just hovered on, and then using the “substring” method to remove the first three characters.

Next, we remove all the classes from the underline, so that we have a clean foundation to work on. Then, we add one of the four “pos” classes to make the underline move over underneath the hovered link.

That’s it for the hover function. Now, we’ll write the javascript to handle the key presses.

$(document).keydown(function(e){
	switch(e.which)
	{
		// user presses left
		case 37:
		
		break;
	
		// user presses right
		case 39:
		
		break;
		
		//user presses enter
		case 13:
		
		break;
	
	}
});		

This is a simple keydown function with a switch inside. Each key on the keyboard has a unique ID that we can use to check what key was pressed. Depending on what key was pressed, different things will happen.

// user presses left
case 37:
			
	var prevPosStr = $('#underline').attr('class').substring(3);
	var prevPos = parseInt(prevPosStr);
			
	var newPos = prevPos-1;
			
	if(newPos<1){
		newPos=4;
	}
	
	$('#underline').removeClass();
	$('#underline').addClass('pos'+newPos);
	
break;

This is what happens if the user presses the left arrow key. First of all, we create a variable called “prevPosStr”. This variable takes the current class of the underline, and removes the first 3 characters. We then turn this variable into an integer by using the “parseInt” method. Now, we have a “prevPos” variable which contains the number of the menu item before the underline animates. In other words, if the underline was underneath the second menu item and the user presses the left arrow key, the value of the “prevPos” variable would be 2.
Now, we create a variable called “newPos”. The value of this variable is prevPos-1 so that the underline moves on spot to the left. Once we define the “newPos” variable, we have a simple “if” statement. This statement checks to see if the “newPos” variable is less than 1. If it is, it changes the value to be 4. This way, if the underline is under the first menu item and the user presses left, the underline will move over to the last menu item.
Lastly, we actually animate the underline. We remove all classes from the underline, and then we add one of our four “pos” classes.

Now, we’ll write the code that handles the right arrow key.

// user presses right
case 39:
			
	var prevPosStr = $('#underline').attr('class').substring(3);
	var prevPos = parseInt(prevPosStr);
			
	var newPos = prevPos+1;
			
	if(newPos>4){
		newPos=1;
	}
			
	$('#underline').removeClass();
	$('#underline').addClass('pos'+newPos);
			
break;

This code is very similar to the code for the left arrow key. The two differences here are:

1. The “newPos” variable is 1 larger than the “prevPos” variable.
2. The “if” statement is the opposite of the one for the left arrow key. If the underline is underneath the fourth menu item and the user presses the right arrow key, the underline moves over to the first menu item.

There’s one last thing we need to do. We’ll make the enter key follow the link of the item underneath the underline. For example, if the underline is under the “Blog” link, pressing enter will redirect the user to the blog.

//user presses enter
case 13:
	var posStr = $('#underline').attr('class').substring(3);
	var pos = parseInt(posStr);
			
	var link = $('#nav'+pos+' a').attr('href');
			
	window.location.href = link;
			
break;

First off, we create the “posStr” and “pos” variables so that we know under what menu item the underline is. Next up, we create a variable called “link. This variable takes the value of the “href” attribute of the “a” element inside the current menu item. Lastly, we use “window.location.href” to redirect the user to the link.

Well, that’s the end of this tutorial. If you have any questions or comments, feel free to post them below. Good luck and have fun!