jQuery: Navigation menu

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

Download Demo

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");
 });

Download Demo

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

Greetz,

Durgé

Posted: July 18th, 2009 by Durgé

How I Lost 30 Pounds in 30 Days Without Diet says:
Thanks for posting about this, I would love to read more about this topic.

July 24, 2009 at 08:30
دردشة says:
niec thanks

August 27, 2009 at 04:45
banny says:
hi
wat if we want to do a little randomizing trick and every time when a visitor refresh page or new visit comes to page the name of buttons change
like home can be at last button and contact can be at first button
can u plzz tell me how to do this
thnx

September 1, 2009 at 11:23
Antonio says:
In Firefox doesn’t work!

September 5, 2009 at 12:10
Max says:
Can you explain what doesn’t work. Because i have it working right now in Firefox 3.5

September 5, 2009 at 16:30
Durgé says:
Make sure to have javascript enabled. To enable go to tools > options > content > check enable javascript

September 6, 2009 at 01:55
Neel says:
hey how can i make this in a vertical navigation menu???
i want to make something similar but cant get it to work in vertical position…
plz help!!!

September 9, 2009 at 04:54
Durgé says:
To achieve this make sure every button has got a parent, with the overflow set to hidden (in the horizontal menu we use the menu div). So include every button in a div or another object you can even experiment with the li and a objects.

Hope this will help you further, just expirement with different settings and eventually you will figure it out.

September 9, 2009 at 23:16
Neel says:
Hey thnx 4 taking time & helping out.
I tried with li but it didnt work. The button image doesnt appear right if I use li tags.
But i will try it with div.
Is it possible for you to write the code for vertical navigation menu. You can also mail it to me
I would really appreciate that.
Thnx

September 10, 2009 at 03:21
mcdonalds coupon says:
Thank you very much for that nice entry.

September 13, 2009 at 23:52
Rajesh says:
u r god

September 26, 2009 at 09:23
red_w says:
this is excellent. I have one small problem, on page I’ve build I have an a href=”mailto:xxxx”. Now that scrolls up and down, and I don’t want it to. Any suggestion how I could stop that happening. Tried in Firefox, IE, Safari and Chrome, all seem to show same behaviour.

thanks again for superb menu.

October 24, 2009 at 00:22
Durgé says:
Why this menu works is because it are only images. If you make an image (like in the beginning) of the video, with the text Mail me or something. And just follow the steps it will looke the same as the demo.

If you dont want it to be an image you should place a div on top of it (maybe with a negative margin) and tweek the css.

October 24, 2009 at 09:53
Cameron Brister says:
This is a great tutorial! However with I include the file on my existing page (I’m coding in PHP) it justifies the whole page left! (I have the page justified center)

Any suggestions will be appreciated!

October 27, 2009 at 17:52
Durgé says:
I use the a, and li to style the menu. I assume you have more links and lists on your site if you have copied the css to your site all the li will float to the left.

The solution is to give the navigation menu an unique class,
so add for example: class=”navBar” to the li and a tags,
and style instead of a{} and li{}, a.navBar{} and li.navBar{}
(also in the javascript)

I hope this will solve your problem.

October 27, 2009 at 18:15
Cameron Brister says:
perfect! THANKS A TON!

October 28, 2009 at 06:12
BETO says:
sorry but i have a IE (i think 7.0) and doesn’t work.

in firefox works very well but in IE only shoy the motion (tween?). the complet image go up and down but doesn’t hide

October 28, 2009 at 19:07
Durgé says:
Here it works fine in IE 7. Did you change the code? Please make sure that you have position:relative at the #menu css.

This is a IE bug. If you haven’t set the container to relative the overflow won’t be hidden.

Hope this will help.

October 28, 2009 at 19:13
BETO says:
you are a genius, my hero…..etc….. thanks, i change the #menu css to external file; only add the code in the index file….. now works well in FF and IE…..thanks….

October 28, 2009 at 19:44
BETO says:
it’s me again:

I would like when select from, at the time the page is displayed, the button selected option to stay down

November 15, 2009 at 23:25
Durgé says:
If you use wordpress, style the .current_page_item.
And else ad on the page the class to your li item from the page.
Use the styles that are animated with javascript but then in the css.

November 15, 2009 at 23:32
BETO says:
thank you

November 16, 2009 at 02:02
42 jQuery Navigation based Techniques | Codrops says:
[…] : visit live demo : […]

November 22, 2009 at 23:04
Fariba says:
Thanks for ur brilliant tutorial xx

January 27, 2010 at 04:27
Lucas says:
Thank you, very nice xD

February 10, 2010 at 17:29
Create a jQuery Navigation menu says:
[…] Visit Tutorial […]

May 25, 2010 at 20:28
ths says:
en, for IE, we must add “position:relative” to the #menu css, or else it could not works fine in IE, that is because the overflow could not works fine in IE.

May 27, 2010 at 11:13
JQuery制作滑动的导航菜单 - 一刻钟二刻思 says:
[…] 最终成果：下载链接演示地址。原文来自：http://dimics.com/photoshop/jquery-navigation 2010年5月28日 JQuery | 没有评论 | 标签: JQuery, 导航菜单 function […]

May 28, 2010 at 15:33
Bill Hernandez says:
I forgot to thank you for your awesome tutorial…

June 7, 2010 at 04:32
gerry says:
I am having a conflict between your nav and the version of coda slider I am trying to run on the site. Can you help?

Thank you.

July 6, 2010 at 23:23
Cris says:
Really good

August 3, 2010 at 05:37
zac says:
i got this working nicely with my own images.. even did another menu that is vertical with vertical animation.. looks sick! BUUUUUTTT.. i tried putting them into my site and they are affecting every link on the page.. hopefully by tonight i have this problem fixed but if you would be so kind to let me know what an easy fix would be i would be very grateful.. if not.. i friggin love this and you did a GREAT job!!

March 20, 2011 at 03:07
Durgé says:
Jup i made a mistake.. ;p.. In the css ad the id of the container.. in my code it would be “#menu a” instead of just “a”..

Thanks for your positive comment, glad you like it :).

March 20, 2011 at 10:23
zac says:
ahhhh! you are da man!! thanks bro.. i LOVE this thing..

March 23, 2011 at 02:25
Pattaya Classified says:
Thanks for useful tutorial. Waiting for your new wordpress tutorials. keep up good work. 😉

April 6, 2011 at 13:16
42 jQuery Navigation based Techniques | palkistore says:
[…] : visit live demo […]

May 10, 2011 at 15:57
shaheen says:
really cutting-edge menue.expecting more in future.

May 25, 2011 at 22:10
George says:
What i need to do for make menu have a current selector image?

June 12, 2011 at 10:41
Oli says:
WOW! Looks really cool, i want this on my site…But I’ve got one problem. In the css it sais: * {margin:0; padding:0;}

So of course all of my other elements are now without padding and margin, which doesn’t look really good for me.
And when I copy this only to the menu it doesn’t work.

Pls reply and I know my english is shitty 😀

August 6, 2011 at 00:55
Healy says:
Quite possibly the most succinct and current info I came across about this subject

August 18, 2011 at 15:00
JQuery制作滑动的导航菜单 « 一刻钟二刻思 says:
[…] 到这里，我们已经完成了使用Photoshop，jQuery,xHTML和CSS来制作导航菜单的。最终成果：下载链接。原文来自：http://dimics.com/photoshop/jquery-navigation […]

August 20, 2011 at 16:38
Ateeq Ahmad says:
thanks awesome tutorial

September 20, 2011 at 17:02
ranzukie says:
[HELP] where to add “CLASS=”navBar”” on JAVASCRIPT?

October 11, 2011 at 07:36
سعودي انحراف says:
to add “CLASS=”navBar”” oN

October 27, 2011 at 11:26
Redbull says:
Thanks for the great tutorial!

November 16, 2011 at 07:56
Jawahere says:
amazing
it’s look like a jelly, i think but still amazing.
could you have idea for making menu diagonal,like a menu with surounding the cycle(lingkaran).

January 11, 2012 at 14:23
logan says:
how to show active page link to this navigation

June 10, 2012 at 08:45
20 Extra Sharp jQuery Navigation and Menu Bars says:
[…] jQuery Navigation menu […]

September 19, 2012 at 12:41
kill says:
Hey! Quick question that’s completely off topic. Do you know how to make your site mobile friendly? My website looks weird when viewing from my iphone. I’m trying to find a theme
or plugin that might be able to correct this issue.
If you have any recommendations, please share. Many thanks!

January 3, 2013 at 17:09
Gabriel Motta says:
Thanks!

You’re the only one that explained it easily! you helped me a lot!

April 3, 2013 at 02:03
carports says:
Hey there would you mind stating which blog platform you’re working with? I’m looking to start my own blog in the near future but I’m having a hard time deciding between BlogEngine/Wordpress/B2evolution and Drupal. The reason I ask is because your design and style seems different then most blogs and I’m looking for something completely unique.
P.S Sorry for getting off-topic but I had to ask!

April 9, 2013 at 10:38
Durgé says:
@kill There are many wordpress themes and plugins that will make your site mobile friendly, just search for “wordpress mobile” and you’ll find a lot of solutions.

@carport We use WordPress, and I would recommend it if you are going to blog. It’s fully customisable and very well documented. Plus there are a lot of tutorials, themes, and plugins out there that are awesome and free.

April 16, 2013 at 14:02
15 Cool CSS & jQuery Menu Effects says:
[…] http://dimics.com/photoshop/jquery-navigation […]

May 13, 2013 at 18:06
Shoaib says:
i use your Menu, which is excellent… thanks , i have only one question can you explain if i have to make the hover position as a active position as well so if some one click on it the hover position stay remain the same for that page until some one click on the other button

September 26, 2013 at 05:31
jQuery tutorial : Navigation menu | Coding Tutes says:
[…] coder 2 mins ago 0 View Share Tweet Pinit Google+ Email […]

November 30, 2015 at 19:25