All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

Animated Navigation Menu Using CSS And HTML

Last Updated : Jul 1, 2023

IN - CSS HTML | Written & Updated By - Dikshita

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.

Animated Navigation Menu Using CSS And HTML

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.

I hope this tutorial on navigation menu animation helps you and the steps and method mentioned above are easy to follow and implement.