CSS3 Animated Navigation Menu

In this short tutorial, we will be creating a colorful dropdown menu using only CSS3 and the Font Awesome icon font. An icon font is, as the name implies, a font which maps characters to icons instead of letters. This means that you get pretty vector icons in every browser which supports HTML5 custom fonts (which is practically all of them). To add icons to elements, you only need to assign a class name and the icon will be added with a :before element by the font awesome stylesheet.

The HTML

Here is the markup we will be working with:

index.html


<nav id="colorNav">
        <ul>
                <li class="green">
                        <a href="#" class="icon-home"></a>
                        <ul>
                                <li><a href="#">Dropdown item 1</a></li>
                                <li><a href="#">Dropdown item 2</a></li>
                                <!-- More dropdown options -->
                        </ul>
                </li>

                <!-- More menu items -->

        </ul>
</nav>

Each item of the main menu is a child of the topmost unordered list. Inside it is a link with an icon class (see a complete list of the icon classes here), and another unordered list, which will be displayed as a drop down on hover.

CSS3 Animated Dropdown Menu

The CSS

As you see in the HTML fragment above, we have unordered lists nested in the main ul, so we have to write our CSS with caution. We don’t want the styling of the top UL to cascade into the descendants. Luckily, this is precisely what the css child selector ‘>‘ is for:

assets/css/styles.css


#colorNav > ul{
        width: 450px;
        margin:0 auto;
}

This limits the width and margin declarations to only the first unordered list, which is a direct descendant of our #colorNav item. Keeping this in mind, let’s see what he actual menu items look like:


#colorNav > ul > li{ /* will style only the top level li */
        list-style: none;
        box-shadow: 0 0 10px rgba(100, 100, 100, 0.2) inset,1px 1px 1px #CCC;
        display: inline-block;
        line-height: 1;
        margin: 1px;
        border-radius: 3px;
        position:relative;
}

We are setting a inline-block display value so that the list items are shown in one line, and we are assigning a relative position so that we can offset the dropdowns correctly. The anchor elements contain the actual icons as defined by Font Awesome.


#colorNav > ul > li > a{
        color:inherit;
        text-decoration:none !important;
        font-size:24px;
        padding: 25px;
}

Now we can move on with the drop downs. Here we will be defining a CSS3 transition animation. We will be setting a maximum-height of 0 px, which will hide the dropdown. On hover, we will animate the maximum height to a larger value, which will cause the list to be gradually revealed:


#colorNav li ul{
        position:absolute;
        list-style:none;
        text-align:center;
        width:180px;
        left:50%;
        margin-left:-90px;
        top:70px;
        font:bold 12px 'Open Sans Condensed', sans-serif;

        /* This is important for the show/hide CSS animation */
        max-height:0px;
        overflow:hidden;

        -webkit-transition:max-height 0.4s linear;
        -moz-transition:max-height 0.4s linear;
        transition:max-height 0.4s linear;
}

And this is the animation trigger:


#colorNav li:hover ul{
        max-height:200px;
}

The 200px value is arbitrary and you will have to increase it if your drop down list contains a lot of values which do not fit. Unfortunately there is no css-only way to detect the height, so we have to hard code it.

The next step is to style the actual drop-down items:


#colorNav li ul li{
        background-color:#313131;
}

#colorNav li ul li a{
        padding:12px;
        color:#fff !important;
        text-decoration:none !important;
        display:block;
}

#colorNav li ul li:nth-child(odd){ /* zebra stripes */
        background-color:#363636;
}

#colorNav li ul li:hover{
        background-color:#444;
}

#colorNav li ul li:first-child{
        border-radius:3px 3px 0 0;
        margin-top:25px;
        position:relative;
}

#colorNav li ul li:first-child:before{ /* the pointer tip */
        content:'';
        position:absolute;
        width:1px;
        height:1px;
        border:5px solid transparent;
        border-bottom-color:#313131;
        left:50%;
        top:-10px;
        margin-left:-5px;
}

#colorNav li ul li:last-child{
        border-bottom-left-radius:3px;
        border-bottom-right-radius:3px;
}

And of course, we are going nowhere without some fancy colors! Here are 5 versions:


#colorNav li.green{
        /* This is the color of the menu item */
        background-color:#00c08b;

        /* This is the color of the icon */
        color:#127a5d;
}

#colorNav li.red{               background-color:#ea5080;color:#aa2a52;}
#colorNav li.blue{              background-color:#53bfe2;color:#2884a2;}
#colorNav li.yellow{    background-color:#f8c54d;color:#ab8426;}
#colorNav li.purple{    background-color:#df6dc2;color:#9f3c85;}

One neat aspect of using icon fonts, is that you can change the color of the icon by simply declaring a color property. This means that all customizations you might want to make can be done with CSS alone.

Done!

Icon fonts are a great addition to one’s web development toolset. As they are regular fonts, you can use the font-size, color and text-shadow properties to customize them. This example doesn’t use images nor JS, so it should be fairly easy to match it with your current design and use it within a few minutes.