Create Menu with jQuery

Today I will tell you how to create an original menu using jQuery.

I decided to write this note because I spent quite a few hours creating a menu, and everything you'll read here was made by my own hands.

To determine whether you should continue reading this article, take a look at what we'll end up with:

DEMO page

I've encountered similar menus on websites multiple times, but whenever I saw them, I never felt inclined to find out how they were implemented. Recently, I needed to create a similar menu, but I didn't know of any specific solutions, and I couldn't find and examine how such menus on the websites I've come across were made. Searching is still a challenge for me.

The first attempt

The first thing that came to mind for implementing this task was, of course, to create images, place them as backgrounds (using the CSS "background" property), and move them using the jQuery library's animate() function. However, it turned out that animate() does not work correctly with the CSS property background-position, specifically, there's no way to set both X and Y parameters (background-position: X Y); only X can be set.

To solve this problem, there is a jQuery plugin (Background-Position Animations).

After installing it, I was able to create such a menu using images instead of text, but I found this option to be extremely inconvenient, because if, for example, we need to change the menu item's name, we would have to redraw the images and reassign the sizes in the CSS, which is very inconvenient.

Therefore, I rejected this option and decided to implement it using CSS and HTML markup.

Creating the menu

To create such a menu without using image-texts and without connecting various jQuery plugins, it's not that difficult.

Let's go through it step by step:

1. First and foremost, create the menu in HTML:

<ul class="menu">
	<li><a href="#">About</a></li>
	<li><a href="#">Business</a></li>
	<li><a href="#">Art</a></li>
	<li><a href="#">Painting</a></li>
	<li><a href="#">Design</a></li>
	<li><a href="#">Creativity</a></li>
	<li><a href="#">History</a></li>
</ul>

2. Include the jQuery library, if it hasn't been included yet: add this line to the beginning of the HTML document:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

In this case, jQuery is included from the Google repository. Of course, it can be included in some other way.

3. Add CSS styles:

<style type='text/css' rel='stylesheet'>
/* reset */
ul, li{ margin:0; padding:0; vertical-align:baseline; list-style:none; }

/* mandatory */
.menu li{ float:left; height:40px; overflow:hidden; }
.menu li a,
.menu li a div{ display:block; padding:0 20px; line-height:40px; }
.menu li a div{ margin:0 -20px; }

/* coloring */
.menu{ position:absolute; margin:100px 10px; font:12px Georgia; }
.menu li{ border-right:1px dashed #999; text-transform:uppercase; }
.menu li a{ color:#4C596F; }
.menu li a:hover{ text-decoration:none; }
.menu li a div{ background:#F0F3F4;  }
</style>

As you can see, I divided the styles into "mandatory" and those responsible for the appearance of the menu, which do not affect the correct operation of the jQuery script. That is, if you delete the second styles, the menu will still work.

4. Add the jQuery code:

<script type="text/javascript">
(function($){

$(function(){
	var menu = $('.menu li a');
	menu.each(function(){
		$(this).append('<div>'+ $(this).html() +'</div>');
	});
	menu.hover(
		function(){
			$(this).stop().animate( {marginTop:'-40px'}, 300 );
		},
		function(){
			$(this).animate( {marginTop:'0'}, 500 );
		}
	)
})

})(jQuery)
</script>

Let's go over the code a little bit. In menu.each(...), we add a div block with the anchor of the link inside the link tag (a) , so we create a two-level anchor link that will move later. In menu.hover(...) we set the action when hovering over the link: we move it 40 pixels up.

That's it. Now, such a menu can be easily edited without unnecessary effort.

I've mentioned before that this menu is the result of my imagination, so I would like to see how similar menus are implemented on other sites. If you happen to have examples, please share them!