How to Create a Pure CSS3 Menu with Opacity Animation

In today’s tutorial, I will be teaching you how to create a pure css3 menu with opacity animation. For the smooth animation effect we will be using the CSS3 transition property ease-in-out which unfortunately is not supported for IE9 and earlier. However, I will also be using the CSS3 opacity property as well as the filter property to support IE8 and earlier for our standard opacity hover effect. Let’s get started!


Step 1: Creating the Markup

First we will need to create a brand new index.html file and create our basic markup.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
    <title>Create a Pure CSS3 Animated Menu</title>
    
    <link rel="stylesheet" href="styles.css" />
    
</head>
<body>
    <div class="menu">
        <ul>
            <li><a class="purple" href="">Home</a></li>
            <li><a class="green" href="">About</a></li>
            <li><a class="blue" href="">Services</a></li>
            <li><a class="pink" href="">Portfolio</a></li>
            <li><a class="orange" href="">Contact</a></li>
        </ul>
    </div>
</body>
</html>

If you open your index.html file now you should be left with a simple unordered list like this:

Create a Pure CSS3 Menu with Opacity Animation | Step 1


Step 2: Creating the General Styles

First we need to create a brand new styles.css file and create some general styles to get us started.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
* {
    margin: 0;
    padding: 0;
}
body {
    background: #111;
    color: #FFF;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 20px;
}
ul, li { list-style-type: none; }
a {
    color: #FFF;
    text-decoration: none;
}

Your index.html file should now look like this when opened:

Create a Pure CSS3 Menu with Opacity Animation | Step 2


Step 3: Creating the Menu Styles

Still using our styles.css we will begin to style the menu starting with the anchor tag classes used in the markup by giving them each background colors.

1
2
3
4
5
.blue { background: #009FE3; }
.purple { background: #574696; }
.orange { background: #EE7202; }
.pink { background: #E61C67; }
.green { background: #96C11F; }

Your index.html file should now look like this when opened:

Create a Pure CSS3 Menu with Opacity Animation | Step 3a


Next we will style our the div.menu giving it a fixed width and margin of auto to center it on the page. We will also float the list items left so they become horizontally listed, give them a margin of 4px and align the text centered on their backgrounds.

1
2
3
4
5
6
7
8
9
10
.menu {
    width: 940px;
    margin: 40px auto;
}
.menu li {
    float:left;
    margin: 4px;
    text-align: center;
}

Your index.html file should now look like this when opened:

Create a Pure CSS3 Menu with Opacity Animation | Step 3b


Finally we will style the menu list anchor tags and create our CSS3 opacity and CSS3 transition effects.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.menu li a {
    width: 180px;
    line-height: 60px;
    display: block;
    
    /* Set the opacity */
    opacity: 0.5;
    filter: Alpha(opacity=50); /*IE8 and earlier*/
    
    /* Create the animation */
    -o-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.menu li a:hover {
    /* Set the hover opacity */
    opacity: 1.0;
    filter: Alpha(opacity=100); /*IE8 and earlier*/
}

Final Result:

Create a Pure CSS3 Menu with Opacity Animation | Final Result

Leave a Reply

Your email address will not be published. Required fields are marked *