Shingo Tamura's Blog

This tutorial will guide you through the process of creating a horizontal menu with animated icons utilising HTML, CSS and JavaScript. To maintain a simple approach, we'll divide the process into 4 steps, as follows:

• Design your icons and their behavior
• Create your menu with HTML
• Style with CSS
• Code the behavior with JavaScript

Design your icons and their behavior

To begin, draft your menu on a piece of paper, or on the computer, so that you have an idea of how it will look and, also, how it will animate. It is easy to skip this process and start coding immediately, but having the design prepared before coding clarifies the process and will help you save time at a later stage.

Here's a sample sketch I've prepared:

I then designed it on the computer using Inkscape, a free vector drawing program, but you can of course use whatever program you are familiar with. The following is the final design of my menu:

I then saved each icon separately as a PNG file for the menu. Make sure that the background that you choose for the icons are transparent so that they will blend in with the background of your web pages.

Create your menu with HTML

Once you've decided on the design and got the icons ready, it's time to start writing some HTML.

<ul class="icon">
    <li>
        <a href="..."><img src="cup.png" alt="Cup" /></a>
    </li>
    <li>
        <a href="..."><img src="cat.png" alt="Cat" /></a>
    </li>
    <li>
        <a href="..."><img src="pc.png" alt="PC" /></a>
    </li>
    <li>
        <a href="..."><img src="person.png" alt="Person" /></a>
    </li>
    <li>
        <a href="..."><img src="hand.png" alt="Hand" /></a>
    </li>
</ul>

To explain the markup above, a list of icons is expressed by a ul class named icon. If the tag itself has a meaning, like a list in this case, it's a good idea to exclude it from your class name. For example, if you use a div to mean a section, and you want to name it special-section, don't include the word section because the tag already implies it.

Note that img tags are used to display the icons. This will give us the ability to resize the icons easily as you will see later on.

Style with CSS

To cleanly make the menu horizontal:

Firstly, remove the margin and padding of the ul tag and set the list-style to none. You also need to insert overflow: hidden to clear the floats we are going to add, as follows:

ul.icon
{
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
}

Then, float the li tags to the left to make the menu horizontal.

ul.icon li
{
    float: left;
}

Next, make a and img tags to display as a block element so that they will take up the entire width of their parent tags. Also remove the default underline of the a tags, remove the default border around the img tags, and vertically align them, as follows:

ul.icon li a
{
    display: block;
    text-decoration: none;
}
ul.icon li a img
{
    display: block;
    vertical-align: middle;
    border: none 0;
}

This is the menu you will create with the CSS rules above:

Finally, set the dimensions of the li tags and their child elements.

Give the li tags a fixed size of 75 pixels, which is the original size of the icons:

ul.icon li
{
    float: left;
    width: 75px;
    height: 75px;
}

Then set the width and the margins of the a tags using percentages. With the margins, give the equal percentage to the top and left margins, and set the rest to zero. Make sure that the width, top margin and left margin add up to 100%, like so:

ul.icon li a
{
    display: block;
    text-decoration: none;
    width: 64%;
    margin: 18% 0 0 18%;
}

Here's what we have so far:

Ensure that you set the width of the img tags to 100%, so that the icons get stretched out to fit the containing a tag:

ul.icon li a img
{
    vertical-align: middle;
    display: block;
    border: none 0;
    width: 100%;
}

This ensures that the icon will always be the same size as the clickable area of the parent a tag.

Code the behavior with JavaScript

Once you have the horizontal menu all styled up, you just need to add few lines of JavaScript code to animate the icons.

Here's an illustration of what we want to achieve:

The complete code using jQuery is shown below:

$(function() {
    function addAnimationMethod(targetValues) {
        return function() {
            $(this).stop().delay(50).animate(targetValues, 200);
        }
    }
    
    $("ul.icon li a").hover(addAnimationMethod({
        width: "100%",
        height: "100%",
        marginTop: 0,
        marginLeft: 0
    }), addAnimationMethod({
        width: "64%",
        height: "64%",
        marginTop: "18%",
        marginLeft: "18%"
    }));
});

The code uses the hover function to add an event handler to the mouseover and mouseout events.

The most complex part of the code is where the animation occurs. Take note of the section: $(this).stop().delay(50).animate(targetValues, 200);. The specific purpose of this coding is to:

• Stop the animation that's currently in operation,
• Delay the next function by 50 milliseconds, and
• Alter the CSS properties from the current values to the specified, over 200 milliseconds.

Be sure to set all of the CSS properties that you have changed back to the original values in your mouseout event handler.

To develop your animation further:

Whilst it seems quite intricate to complete the animation as noted above, it is actually very easy to now extend this coding to add other simple animation effects to it. For example, to add a shrinking effect, you can add another class to the ul tag to indicate it, and change the behaviour of the icons of the different class, as follows:

HTML

<ul class="icon shrink">
    <li>
        <a href="..."><img src="cup.png" alt="Cup" /></a>
    </li>
    <li>
        <a href="..."><img src="cat.png" alt="Cat" /></a>
    </li>
    <li>
        <a href="..."><img src="pc.png" alt="PC" /></a>
    </li>
    <li>
        <a href="..."><img src="person.png" alt="Person" /></a>
    </li>
    <li>
        <a href="..."><img src="hand.png" alt="Hand" /></a>
    </li>
</ul>

JavaScript

$("ul.icon.shrink li a").hover(addAnimationMethod({
    width: "40%",
    height: "40%",
    marginTop: "30%",
    marginLeft: "30%"
}), addAnimationMethod({
    width: "64%",
    height: "64%",
    marginTop: "18%",
    marginLeft: "18%"
}));

Demo and Download

The demo contains 4 types of animations, expand, shrink, lift and drop. Feel free to download it for future use.