Easy image based hover menu with HTML, CSS & jQuery
It has become convention on most websites to have the main navigation in the form of a horizontal menu at the bottom of a header.
If, like Adal Design, you design unique websites, you are most likely going to make a different menu every time. Though it is great to be able to build your navigation entirely in HTML, CSS and jScript, this will limit your creative powers. Apart from applying some basic font-styling, gradients, colors and simple animations, you can’t do much visually.
Still today, due to browser rendering capabilities, the only way to integrate custom fonts and intricate details is to use raster images. If are concerned about multi-level menus, consider this: nothing forces you to use rasters beyond the first level!
In this tutorial, I will walk you through the process of creating a simple, yet infinitely customizable image-based hover menu using HTML, CSS and jQuery. For the creation of the images, I will refer to Photoshop, feel free to use your own favorite software (Illustrator, Gimp, Corel-Draw…).
Step 1: Design the default state menu
In Photoshop, create a file with the dimensions of your final menu. In this example, I will chose 980 x 150 px. It is good to design slightly under the current 1024px width standard to account for inevitable waste of screen real-estate on most machines (scroll bars, widgets, etc). Be sure to chose 72 pixels/inch for the resolution and RGB for the color mode.
Design the menu as you want it to appear when the website first loads. Here I used the “Rosewood” font from DaFont.com and a wood texture from Adobe’s ‘Exchange’. (Image is not to scale)
Step 2: Design the hover-state menu
Expand the canvas size vertically by 100%. Duplicate the existing layers, and move the copies all the way to the bottom. (For increased precision, enable the snap.)
Design the bottom half of the canvas to create the “hover” version of the menu. This is what people will see when they place their mouse over the menu items.
CSS defines 4 types of link selectors:
- A:link or simply A Defines the style for normal unvisited links.
- A:visited Defines the style for visited links.
- A:active Defines the style for active links. A link becomes active once you click on it.
- A:hover Defines the style for hovered links. A link is hovered when the mouse moves over it.
For this example, I used exposure settings to imitate the effect of a flashlight. We could repeat this process and create a version of the menu for “active” and “visited”, but for the sake of this tutorial, I will move on.
Step 3: Slice and save the images
First you must divide the file into slices. In this case, I used texture on the entire surface of the menu. Thus, I simply divided the file into three slices. If you were using this technique only to include a non-supported font, with say white as default and blue on hover (over a uniform black background), you could chose to only include the vertical space above and below the actual text to save on file size.
Here, I divided the menu into three slices. I will now save the files using the “Save for Web” function to minimize file-size. In this case, a ‘high’ quality jpg setting gives me a good quality/file-size compromise, and since we don’t have to worry about transparency, this will do quite fine.
Photoshop automatically gives me an “images” folder containing three images:
- menu_01.jpg
- menu_02.jpg
- menu_03.jpg
They are all 300px high, and their cumulative width is 980px.
Step 4: Setting up the HTML
Create a blank document. Just after the opening <body> tag, place a set of DIVs with appropriate IDs. For later steps, in the <head>, place a link to the CSS file “style.css” that we will create, as well as one to the Google library file for jQuery:
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/
1.3.2/jquery.min.js"></script>
</head>
<body>
<div id="menu">
<a href="home.html"><div id="menu1"> </div></a>
<a href="about.html"><div id="menu2"> </div></a>
<a href="contact.html"><div id="menu3"> </div></a>
</div>
<body>
Step 5: Setting up the CSS
Create a blank style-sheet named “style.css”. (We will not go into details for CSS page layouts in this tutorial.) The following styles define the layout, appearance and behaviors of our menu:
* { padding: 0; margin: 0; }
#menu {
width: 980px;
height: 150px;
}
#menu div {
height: 150px;
float: left;
background-position: top;
cursor: pointer;
}
#menu #menu1 {
width: 278px;
background-image: url(images/menu_01.jpg);
}
#menu #menu2 {
width: 299px;
background-image: url(images/menu_02.jpg);
}
#menu #menu3 {
width: 403px;
background-image: url(images/menu_03.jpg);
}
#menu div:hover {
background-position: bottom;
}
If all your slices were equal width, you could simply define it once in ‘#menu div’. If, as discussed earlier, your background is a solid color and you have slices that stop at the edge of the menu items; you can use CSS to play with spacing. In that case, be sure to use margins, not padding.
Step 6: Making each page unique (jQuery)
Using CSS selectors to let users know which page they are on would not work… ‘:active’ is only useful to make the actual “click” more enjoyable (we could add 150px height to our images, and have the third row full of gunshots for example). ‘:visited’ will eventually make all menu items look different once the visitor has seen the whole site. I personally don’t recommend using this selector, unless you see a very good reason to do so.
Whichever technique we settle on, we need to define this extra style:
#menu div.current {
background-position: bottom;
}
You could then manually assign the class to the appropriate DIVs on each HTML page of the website. Not only would this force you to dive deep into template complications (if you use templates, which you should for static HTML sites), but it would also limit your freedom to create fun effects.
What we want:
- When a user goes to the About page, the “about” link appears in a non-default state (:hover for us).
- When he places his mouse over the “contact” link, THAT part of the menu becomes special, and EVERY OTHER link returns to it’s default state.
- When his mouse exist the menu entirely, the “about” link returns to it’s special state, reminding the user where he is.
The power of jQuery:
With this awesome JavaScript library, we are going to turn these wishes into scripts, that we can simply paste into the editable regions of our HTML document’s heads, below the references to the jQuery library and our CSS file.
Let’s stick with the About page example:
<script type="text/javascript">$(document).ready(function(){
$('#menu2').addClass('current');
$('#menu div').hover( function() {
$('#menu div').removeClass('current');
}, function () {
$('#menu2').addClass('current');
});
});</script>
First we assigned the .current class to the “about” menu link, then, using the jQuery ‘hover’ function, we defined behaviors for mouseOver and mouseOut on all menu divs.
Step 6 with WordPress: using is_page()
WordPress really makes everything easier once you get a hang of it. Here, we can do everything exactly the same, down to a few last details. Instead of assigning arbitrary IDs to our DIVs like #menu1, #menu2… we can use the WordPress ID’s of the pages we are linking to. To find out the WordPress ID of a page created in WordPress, go the Pages section, and place your mouse over the page you want to identify. The number at the end of the string that appears in the bottom left corner of your browser is what you are looking for.
Now, rewrite the jQuery as such:
<script type="text/javascript">$(document).ready(function(){
$('#menu<?php the_ID(); ?>').addClass('current');
$('#menu div').hover( function() {
$('#menu div').removeClass('current');
}, function () {
$('#menu<?php the_ID(); ?>').addClass('current');
});
});</script>
When the About page loads, if it’s ID is say ’15′, the jQuery will appear to the browser as such:
$('#menu15').addClass('current');
$('#menu div').hover( function() {
$('#menu div').removeClass('current');
}, function () {
$('#menu15').addClass('current');
});
});</script>
Make sure to edit your “style.css” file accordingly!
View a demo; imagine you are on the About page.
Well, that’s it folks, I sure hope you all found this very useful!
Tags: blog, coding, design, development, how to, HTML, images, instructions, jQuery, menu, navigation, photoshop, raster, step by step, tutorial, UI, website
That rss page on your blog here is awesome, you should tell people about it in your upcoming post. I haven’t noted it a first, now I’m using it each morning to check on any updates. I’m on a really slow dial-up link in Alabama and it’s quite discouraging to sit there and wait for such a long time ’til the page loads… but hey, I just found your rss page and added it to the Google Reader and there you are… I’m always up-to-date! Well pal, keep up the good work and make that rss button a little bigger so that other people can enjoy that as well
I’ve just stumbled upon your site while searching for a tutorial on an related subject. Glad I did too. There’s a lot I like. Anyway, you’ve been bookmarked and I’ll be back soon.