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.
Below is the HTML code:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<title>Aniamted Menu</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
<!-- =section block start= -->
<div class="section">
<h1>Creative Animated Menu</h1>
<ul class="menu">
<li><a href="#"><span class="ca-icon">A</span>
<div class="content">
<h2 class="main">Exceptional Services</h1>
<h3 class="sub">Personalized to your need</h2>
</div>
</a>
</li>
<li><a href="#"><span class="ca-icon">I</span>
<div class="content">
<h2 class="main">Creative Storytelling</h1>
<h3 class="sub">Advance use of technology</h2>
</div>
</a>
</li>
<li><a href="#"><span class="ca-icon">C</span>
<div class="content">
<h2 class="main">Infographical Information</h1>
<h3 class="sub">Understanding visually</h2>
</div>
</a>
</li>
<li><a href="#"><span class="ca-icon">S</span>
<div class="content">
<h2 class="main">Sophisticated Team</h1>
<h3 class="sub">Professionals in Action</h2>
</div>
</a>
</li>
</ul>
</div><!-- =section block end= -->
</div><!-- =container end// -->
</body>
</html>
Below is the CSS code:-
@font-face {
font-family: 'WebSymbolsRegular';
src: url('../images/websymbols-regular-webfont.eot');
src: url('../images/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/websymbols-regular-webfont.woff') format('woff'),
url('../fonts/websymbols-regular-webfont.ttf') format('truetype'),
url('../fonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
font-weight: normal;
font-style: normal;
}
body{
background-color: #E5E5E5;
}
h1{
text-align: center;
font-size: 45px;
font-weight: 600;
}
.menu {
margin: 80px auto;
padding: 0;
width: 1020px;
}
.menu li {
background: #fff none repeat scroll 0 0;
border: 10px solid #f6f6f6;
border-radius: 125px;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
float: left;
height: 230px;
margin-right: 4px;
overflow: hidden;
position: relative;
transition: all 400ms linear 0s;
width: 230px;
}
.menu li a {
color: #333;
display: block;
height: 100%;
position: relative;
text-align: left;
width: 100%;
}
.menu li:last-child{
margin-right: 0px;
}
.ca-icon{
font-family: 'WebSymbolsRegular', cursive;
font-size: 40px;
color: #eee;
line-height: 60px;
position: absolute;
width: 100%;
height: 60px;
left: 0px;
top: 30px;
text-align: center;
-webkit-transition: all 400ms linear;
-moz-transition: all 400ms linear;
-o-transition: all 400ms linear;
-ms-transition: all 400ms linear;
transition: all 400ms linear;
}
.main {
font-size: 24px;
height: 80px;
left: 50%;
margin-left: -85px;
opacity: 0.8;
position: absolute;
text-align: center;
top: 110px;
width: 170px;
}
.sub {
color: #000;
font-size: 23px;
height: 80px;
left: 50%;
margin-left: -85px;
opacity: 0;
position: absolute;
text-align: center;
top: 110px;
transition: all 400ms linear 0s;
width: 170px;
}
.menu li:hover{
background: #f7f7f7;
border-color: #fff;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
.menu li:hover .ca-icon{
color: #555;
font-size: 60px;
}
.menu li:hover .main{
display: none;
}
.menu li:hover .sub{
opacity: 0.8;
}
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.
Conclusion:-
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 .
0 Comment(s)