Dimics

Learn everything you want to know. Graphic and web tutorials.

jQuery: Navigation menu

In this tutorial i’m going to show you how to make a navigation menu with Photoshop, jQuery, xHTML, and CSS.

DownloadDemo

Photoshop

For the Photoshop part I’ve made a video:


HTML

Now we’ve made the button images in Photoshop we’re going to write the code. First the HTML.

Make a new HTML file and call it index.html.

Type (or copy paste) the doctype and the basic HTML tags:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
	<title>jQuery menu</title>
</head>
<body>

</body>
</html>

Inside the body tags create a div with a id of menu, this will be the container of our buttons. Inside the menu div we make an unordered list, and for each button a list item with the actual link inside it. Give each button its own class.

<div id="menu">
 	<ul>
 	<li><a href="#" class="home"></a></li>
	 <li><a href="#" class="about"></a></li>
	 <li><a href="#" class="links"></a></li>
	 <li><a href="#" class="contact"></a></li>
 	 </ul>
</div><!--/MENU-->

CSS

Now we will style our menu with CSS inside the head tags include a stylesheet or insert the tags for a styling block.

First reset the padding and margin so you don’t get any problems with default margins you don’t want to have. Then we’re going to style our menu container.

<style type="text/css" media="screen">
 * { margin:0; padding:0; }

 #menu {
 	margin:50px auto 0 auto;
	height:35px;
	overflow:hidden;
 	position:relative;
 	width:404px;
 }
</style>

The with of 404px is because we want 1px space between the buttons. Overflow:hidden will hide every object that gets outside the div menu. The position:relative is in this case a IE fix, IE will not recognize overflow without the object set to relative.

Then we give the list items some default styling and a left margin of 1px so there is a gap of one pixel between the buttons.

li {
 	display:inline;
 	float:left;
	list-style-type:none;
	margin-right:1px;
 }

And style the links. And by selecting each class give every button his background.

a {
	 display:block;
	 height:70px;
	 top:-35px;
	 position:relative;
	 width:100px;
 }

 a.home {
	 background:url(images/home.jpg) no-repeat bottom center;
 }

 a.about {
 	background:url(images/about.jpg) no-repeat bottom center;
 }

 a.links {
	 background:url(images/links.jpg) no-repeat bottom center;
 }

 a.contact {
	 background:url(images/contact.jpg) no-repeat bottom center;
 }

The position is set to relative so the links are positioned relative to their parent #menu in this case. Top:-35px will set the position of the link -35px relative to the top of #menu.

jQuery

First inlcude the jQuery library and make the script tags in the head tags. We don’t want the code to be processed before the whole site is loaded, else it would slow down the load time, so we check if the document is ready.

<script type="text/javascript" src="http://dimics.com/wp-content/themes/dimics/jquery-1.3.2.js"></script>
 <script type="text/javascript" language="javascript">
 $(document).ready(function(){

 });
 </script>

Then we make the slide function, we want it only to be executed if you hover over the link. After it slides down we want it to slide in, so we make another function behind it:

$("a").hover(function(){
	 $(this).animate({top:"0px"}, "300");
	 }, function(){
	 $(this).animate({top:"-35px"}, "300");
 });

The animate function will animate the link with the top set to -35px, to an top value of 0px, and after that animate it back to -35px, the 300 defines the time in milliseconds, you can also change it in slow, normal, or fast. And because the overflow of the menu div is set to hidden you only see 35px of the button.

example

But we have a problem, now it will stack the functions, so if we would hover 3 times over a button it will slide down and up 3 times. To solve this problem we put the stop function before the animation:

$("a").hover(function(){
	 $(this).stop().animate({top:"0px"}, "300");
	 }, function(){
	 $(this).stop().animate({top:"-35px"}, "300");
 });

DownloadDemo

You can customize the menu by changing the background images and colors.

Greetz,

Durgé