Want To Be A Blogger  →  Start A Blog  →  Increase Traffic  →  Make Money Online  →  Recommended Things

Animated Navigation Menu Using CSS And HTML.

Thursday, Sep 28, 2017

Tags:- CSS HTML


In this tutorial we will create a Full Animated Navigation Menu using complete CSS and HTML. You may also like floating navigation menu using css.


See Demo
Animated Menu


To create a Full Animated Navigation Menu using CSS and HTML it takes only two steps:-

  1. Make a HTML file and define markup for Navigation Menu
  2. Make a CSS file and define styling for Navigation Menu


Step 1.Make a HTML file and define markup for Animated Navigation Menu

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.You may also like responsive navigation menu.


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.

Subscribe Our Newsletter And Get Tutorials And Offers Via Email

About Me


Hello, My Name is Mudit Jain. I am a Web Developer, Professional Blogger and Digital Marketer from India. I am the founder of TalkersCode. I started this blog in february 2015 to help web developers & bloggers by providing easy and best tutorials, articles and offers for web developers and bloggers.