Use Sprites to Create an Awesomeness-Filled Navigation Menu

CSS sprites can dramatically increase a website's performance, and with jQuery, we can implement awesome transition effects easily. Let's get started.

Tutorial Details

Requirements:
- Basic Knowledge of jQuery
- Basic Knowledge of Photoshop
- Basic Knowledge of CSS
Difficulty: Intermediate
Estimated Completion Time: 40 mins

What is a CSS Sprite?

Sprites date back to the early days of video games, where they were used as optimization technique for displaying 2D graphics. A CSS sprite is a technique that involves grouping images to form a single master image, and then selectively displaying only the required sections using CSS attributes (width, height, background-position etc).

In this tutorial we'll create a navigation menu inspired by Dragon Interactive. They have an excellent design concept, with a perfect use of highlights and colors.

Step 1

Begin by creating a new Photoshop document, which is 800px wide by 500px high.

Step 2

Next, we'll create a horizontal ruler at the 70px mark by going to view -> new guide; this will be our menu height.

Step 3

Now we are going to create a folder menu, and inside it, a sub folder called "Menu Text."

Step 4

Select the text tool(shortcut: t) and set the following properties in the character toolbox.

Font: Franklin Gothic Medium Cond
Font Size: 15pt
Color: Black

Other fonts can be used as well but this font family is best suited for embedded text effect which we will give later. If you don't have this font you can get it from Website.

Step 5

Create another horizontal ruler at 40px, this will help to keep our menu text horizontally aligned.

Step 6

Now select the menu text folder, and type the menu words HOME, SERVICES, PORTFOLIO, ABOUT, and CONTACT, keeping equal spaces between each. It should now look like the image below.

Step 7

Now create another folder below the menu text folder, and name it "Menu Background."

Step 8

Let's next create a new layer inside the Menu Background folder, and then using a rectangular marquee tool, create a selection of 100px wide and 70px high.

Step 9

Select the gradient tool (shortcut : g), and set the gradient colors from #555555 to #adadae .

Step 10

Now draw a gradient starting from the bottom of the selection to the top of the selection; then give it a stroke with the following properties:

Stroke Size : 1px
Position : outside
Color : Black

The stroke was added to provide depth to our menu divisions.

Step 11

Now In order to achieve the highly polished ends, and to create the proper effect when the mouse hover occurs, we will give it an adjacent highlight.

Step 12

Go to select > modify > contract and enter 1px.

Step 13

Select the burn tool and set the following properties:

Brush Size : around 200px
Brush Hardness : 0%
Range : Shadows
Exposure :30%

Step 14

Now we will move the menu division right 1px, using the move tool(shortcut: v) in order to show the left side of the stroke, which was invisible due to its position.

Step 15

Create copies of the above layer and adjust them with respect to the menu text.

Two things that Must be Noted

Transform (ctrl + t) and increase the size of the layer underneath SERVICES and PORTFOLIO, since they are wider than the other words. Change the length from 100px to 110px.
The stroke of the adjacent layers must overlap each other.

This is what the menu looks like when we adjust the positioning of the layers and menu text accordingly.

Step 16

In order to embed the typographic effect, we add the "Drop Shadow" effect with the following settings to our text:

Color: #b7b6b6
Opacity: 40%
Distance: 1px
Spread: 100%
Size: 0px

Step 17

Now, its time to create what the menu looks like during the mouse hover state. Create a copy of the "Menu Background" folder, and rename it to "Menu Hover." Then, using the move tool, move the folder 70px down so that the newly created menu's top part touches the horizontal guide.

The reason we have created the copy of the menu folder, is because we're interested in the positioning of the menu text. If we had created it manually, then we would have to worry about the exact alignment of the menu's text, which would be much more tedious.

Step 18

Now, we will select the background layer of the service menu from the "Menu Hover" folder, and give it a nice elegant effect upon the hover state. To do this, first create a selection by pressing ctrl and click on the layer; then press delete, which will delete the current shade. Next...

Color - #9de0ff at 0% Location
Color - #0072ff at 50% Location
Color - #005ead at 100% Location

Select radial gradient, and draw a line from the bottom of the selection to 30px above the top of the selection.

Step 19

Our work is not done quite yet. To give it a smooth touch, we need to polish it a bit more. To create a more revealing menu division, we'll make the edges darker. To achieve this, we need to add the following effects:

Select the burn tool, with a brush size of 200px, range - highlight and exposure to 50%, brush it along the edges of the division.
To make the edges even darker, we add an inner shadow effect:
- Blend Mode : Hard light
- Opacity : 70%
- Distance: 0px
- Choke: 0%
- Size: 10px

Step 20

Apply a similar effect for the portfolio and about menus. For the contact menu, change the gradient colors to:

Color - #ff9dbd at 0% Location
Color - #ff0084 at 50% Location
Color - #a00337 at 100% Location

This what our menu looks like now:

Step 21

The home menu division needs to be given special treatment; select the layer by pressing ctrl and clicking on the layer. Press delete to remove the current shade, and select the gradient tool with the following colors:

Color - #fff5c0 at 0% Location
Color - #fae15d at 50% Location
Color - #eac500 at 100% Location

This time, select linear gradient, and draw a gradient from the top of the selection to the bottom of the selection.

Step 22

Select the burn tool, keeping the rest of the properties the same except for the range, set it to midtones, and apply brush strokes around the edges except for the top.

Step 23

Now to create the glassy effect: select the pen tool, make sure that "shape fill" is selected, and draw the shape like the one in the image, and set its blend mode to soft light with an opacity of about 40%.

Step 24

Two more things before we're finished with the Photoshop part.

First, the text effect within the "Menu Hover" folder is not looking elegant enough; so we change the color of the drop shadow property.
- Home Menu
  - Color : #fff368
  - Opacity : 80%
  - Also add gradient-overlay : #854406 to b75a03
- Services, Portfolio and About Menus
  - Color: #78bbff
  - Opacity : 70%
- Contact Menu
  - Color : #f78bb6
  - opacity : 80%
Second is the last division in Menu folder does not have an adjacent highlight to the right; so we'll clip a small portion of the background layer, and align it next to the contact background layer. Then, we crop the image and save.

Finally our sprite image looks so:

Step 25

Now comes the coding section, which is quite easy. Create an html file, and add the following code:


<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="sprite.js"></script>
<title>Awesome Menu</title>
</head>

<body>
<div id="nav">
<ul id="navigation">
	<li ><a class="home" href="#"></a></li>
	<li ><a class="services" href="#"></a></li>
	<li ><a class="portfolio" href="#"></a></li>
	<li ><a class="about" href="#"></a></li>
    <li ><a class="contact" href="#"></a></li>
</ul>
</div>
</body>
</html>

Here we have created a simple html file, which consists of an unordered list - our navigation bar. Before moving forward, let's take a look at a couple of files we'll now be importing:

style.css is the external CSS file in which we will be styling our navigation list.
We've imported jQuery for the animation on hover.
The jQuery easing plugin is also used, which we'll review later.
It's good practice to create an external js file for our work, so we also do that in "sprite.js."

Step 26

Create an external .js file, called sprite.js, and paste in the following code.


$(function(){
		 
		   $('#navigation li a').append('<span class="hover"></span>');
           // span whose opacity will animate when mouse hovers.
		   
		   $('#navigation li a').hover(
             function() {
	         $('.hover', this).stop().animate({
			'opacity': 1
			}, 700,'easeOutSine')
        	},
            function() {
	       $('.hover', this).stop().animate({
			'opacity': 0
			}, 700, 'easeOutQuad')
	
	})
		   });

When the DOM is loaded, we inject a span into our anchor tag; this span will actually animate. Then, using the hover function for the anchor tag, we animate the opacity of the span. To create a smoother animation, we will use the easing equation. I am using 'easeoutsine' and 'easeoutquad'; feel free to try an alternative combinations, if you wish.

Step 27

Now comes the CSS part. Create the style.css file. Below is the initial image of what the menu looks like. For now, it's only four dots, because we haven't yet styled it.

Step 28

First, we align the list.


body{
background:#000000; }


#navigation 
{
margin-left:250px;
}


#navigation li
{
float:left;
}

We've only moved the menu in the center a bit.

Step 29

Style the anchor tag; its background will be our sprite image.


#navigation li a
{
background-image:url(images/sprite.jpg);
display:block;
}

The display style must be set to block; otherwise, nothing will be displayed.

In the next step, we will give each of them the proper positioning.


	.home
	{
	background-position:0px 0px;
	width:102px;
	height:70px;
	}
	
	.services
	{
	background-position:-102px 0px;
	width:110px;
	height:70px
	}
	
	.portfolio
	{
	background-position:-212px 0px;
	width:108px;
	height:70px
	}
	
	.about
	{
	background-position:-320px 0px;
	width:102px;
	height:70px
	}
	
	.contact
	{
	background-position:-422px 0px;
	width:103px;
	height:70px
	}

Here, we've set the background positioning, and width of each anchor tag. The values may vary, and it requires a bit of time to get perfect.

Step 30


#navigation a .hover {
	background:url(images/sprite.jpg) no-repeat;
	display: block;
	opacity: 0;
	position: relative;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	}
	
	#navigation a.home .hover {
	background-position: -0px -72px;
	
	}
	#navigation a.services .hover{
	background-position: -102px -72px;
	
	}
	#navigation a.portfolio .hover {
	background-position: -212px -72px;
	}
	#navigation a.about .hover {
	background-position: -320px -72px;
	}
	#navigation a.contact .hover {
	background-position: -422px -72px;
	}

Now we will define the CSS for the span; this is the same sprite image which is used above. The height and width are made 100% so that it occupies the whole anchor block. The background of each span tag is adjusted, and finally our work is complete.

Step 31

Note that it takes time to get the position and width tuning right; you may end up with slightly different values for these attributes - and that's perfectly okay!

CSS Sprites Resources

Phew seems like a lot of work, but great things take time to build up. Here are some additional resources that you might find handy.