Tutorial To Design Animated Navigation Menu Using CSS And HTML.
In this tutorial we will create a Full Animated Navigation Menu using complete CSS and HTML.To create a Full Animated Navigation Menu using CSS and HTML it takes only two steps:-
- Make a HTML file and define markup for Navigation Menu
- Make a CSS file and define styling for Navigation Menu
 |
| Tutorial To Design Animated Navigation Menu Using CSS And HTML. |
We make a HTML file and save it with a name menu.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="menu_style.css">
</head>
<body>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Contact</a>
</li>
<li>
<a href="#">Help</a>
</li>
<li>
<a href="#">Feedback</a>
</li>
</ul>
</body>
</html>
Step 2.Make a CSS file and define styling for Animated Navigation Menu
We make a CSS file and save it with name menu_style.css.
body
{
background-color:#E6E6E6;
}
ul
{
padding:0px;
width:995px;
background-color:#848484;
float:left;
margin-top:20px;
border-radius:5px;
box-shadow:0px 0px 10px 0px silver;
}
li
{
float:left;
width:100px;
height:35px;
padding:10px;
line-height:35px;
border-right:1px solid #A4A4A4;
}
li:last-child
{
border-right:0px;
}
a
{
display:block;
text-decoration:none;
color:white;
font-family: 'WebSymbolsRegular', cursive;
}
li:hover
{
width:200px;
text-align:center;
border-radius:5px;
background-color:#BDBDBD;
box-shadow:inset 0px 0px 50px 2px #848484;
-webkit-transform:scale(1,1.2);
-ms-transform:scale(1,1.2);
transform:scale(1,1.2);
-webkit-transition: all 200ms linear;
-ms-transition: all 200ms linear;
transition: all 200ms linear;
}
li:hover a
{
font-size:23px;
color:#424242;
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all 200ms linear;
-ms-transition: all 200ms linear;
transition: all 200ms linear;
}
In this step we use CSS3 properties to create animation like transform and transition
Thats all, this is how to create a Animated navigation Menu using CSS and HTML.You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.
Source :- http://talkerscode.com
Tutorial To Design Animated Navigation Menu Using CSS And HTML.
Reviewed by Newstechcafe
on
April 24, 2015
Rating:
Reviewed by Newstechcafe
on
April 24, 2015
Rating:
No comments:
Post a Comment