Hello, readers in my example I have created creative animated menu by using CSS3 animation and transition properties. I had simply made a composition of elements, an icon, main title and the sub title, that will get animated at hover using CSS3 transition and animation property.
The icon used in the example are Web Symbols typeface that will be included with @font-face.
In the below example I had simply created an unordered list of menu where each item is a link element containing icon in the span tag followed by a content div containing the main and the sub-heading. As I have used symbol font for the icons writing a alphabet corresponding to it.
In the CSS code I have used custom fonts that is in CSS3 with a font-face rule property. The desired font which we have to use in our website, we need to upload it on our server. For various browsers we use different files such as for Internet Explorer we use EOT(Embedded Open Type) and OTF (Open Type) and TTF(True Type) for rest.
In order to create a circle shape of the menu, I had set the border-radius to 50%. When we will hover the menu elements the item will be rotated at angle to 360 degrees, and the main title will disappear letting the sub title appear whose opacity is set to 0.
Hence, A creative animated menu is created using CSS3 transition and animation properties.
Note- The following example will run on the latest version browsers efficiently such as on Safari 3.2+, Chrome, Firefox 4+, Opera 10.5+, and IE 10 .