Animated menu with CSS 3

We created a menu with a CSS3 animation, only with cascading style sheets, without the need for Javascript or jQuery.

In this new article of our manual on animation with we are going to make a dynamic menu with only HTML and CSS 3. Personally, I found it simple and it can give us many possibilities when it comes to designing our website, since we do not need to have knowledge of or of .

Before we get down to business, I suggest . But remember that only browsers that support CSS animations will be able to see it correctly. At the time of writing this article, the browsers with which you will see the example well are: Google Chrome and Safari. Although it should be noted that Opera and Mozilla Firefox are in beta and some properties such as transition and box-shadow work.

Note: As the CSS animations specification is still in draft stage, all properties associated with them are prefixed with “-moz-” for use in Gecko(Firefox 4). For WebKit compatibility, it is recommended to also use the “-webkit-” prefix and for Opera compatibility, the “-o-” prefix. That is, for example, you would specify the transition property as -moz-transition, -webkit-transition, and -o-transition.

Updated: For extra information on the subject of prefixes, it should be noted that most of the prefixes used in this code that you find in the article would not really be needed anymore, since they are fully-settled standards. We recommend you learn to use PostCSS with the Autoprefixer plugin so that it is that plugin that is in charge of putting the prefixes that are really needed for each case. You find more information in the .

The first thing we are going to do is create our HTML, that is, the necessary code that we would use to create our menu normally, that is, made with DIVs and not with tables.

< title>CSS animated menu

As you can see, there is nothing special about it, it is simply a menu in which we use a list.

Well, now we are going to style the DIVs and the list to create our dynamic menu.

The first thing we are going to do is a background, simply so that the menu looks good in our example.

html { height: 100%; } body{ background: -webkit-gradient(linear, left top, left bottom, from(#34bdfc), to(#f5f8fa)); }

This phone is a blue color that fades to white from top to bottom. The height: 100% of the html helps the background to display in the full size of the window.

Next we are going to give styles to our general-menu:

.menu-general { position: relative; float: left; }

We are simply going to make it float to the left and have a relative position (This is important for our animation to work correctly).

Now we move on to the styles of the list of our menu:

ul.nav { list-style: none; display: block; width: 200px; position: relative; top: 50px; left: 100px; padding: 60px 0 60px 0; -webkit-background-size: 50% 100%; -moz-background-size: 50% 100%; -o-background-size: 50% 100%; }

Here what we do is remove the hyphens from the list, we place the list and give it a size. At the end we give the animation to transform the size from 50% to 100%. this will give us the animation we want, that is, make the button big.

ul.nav li a { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; background: #f77e08; colour: #174867; padding: 7px 15px 7px 15px; -webkit-border-top-right-radius: 10px; -moz-border-top-right-radius: 10px; -o-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-bottom-right-radius: 10px; -o-border-bottom-right-radius: 10px; -webkit-border-top-left-radius: 10px; -moz-border-top-left-radius: 10px; -o-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-bottom-left-radius: 10px; -o-border-bottom-left-radius: 10px; width: 100px; display: block; text-decoration: none; -webkit-box-shadow: 2px 2px 4px #0e169b; -moz-box-shadow: 2px 2px 4px #0e169b; -o-box-shadow: 2px 2px 4px #0e169b; }

In this style, what we do is build the buttons of our menu. We give it a background color, some rounded corners, and a shadow around it.

ul.nav li a:hover { background: #faef77; colour: #67a5cd; padding: 7px 15px 7px 30px; }

And finally we give styles to our menu for when we pass over it with the mouse.

With this, our menu should already work for us, yes, always remembering that at the time of writing this article it only worked fully for Safari and Chrome browsers and partially for Mozilla Firefox and Opera.

The complete code of this exercise and the link to the demo, to see the working result, can be found at .

Surely with a little hand you can improve the CSS and make your menu look more beautiful. The important thing in this article is that you have learned to make the transitions necessary for those animations to be generated. It’s all very simple thanks to CSS3.