Learn How to create animated navigation bar menu using CSS. This tutorial can be followed by any beginner who has knowledge of Basic HTML and CSS. Video tutorial along with code is provided to you below.
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./index.css">
<title>By Reecry</title>
<style>
*{
margin: 0px;
padding: 0px;
}
body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
nav{
background-color: teal;
display: flex;
justify-content: center;
height: 100vh;
align-items: center;
}
nav > a{
color: white;
font-size: 1.5em;
text-decoration: none;
margin: 1em;
position: relative;
}
nav > a:before, nav > a:after{
content: "";
width: 100%;
height: 3px;
background-color: white;
position: absolute;
transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
opacity: 0;
}
nav > a:before{
top: 0px;
transform: translateY(-20px);
-webkit-transform: translateY(-20px);
-moz-transform: translateY(-20px);
-ms-transform: translateY(-20px);
-o-transform: translateY(-20px);
}
nav > a:after{
left: 0px;
bottom: 0px;
transform: translateY(20px);
-webkit-transform: translateY(20px);
-moz-transform: translateY(20px);
-ms-transform: translateY(20px);
-o-transform: translateY(20px);
}
nav > a:hover:before{
transform: translateY(0px);
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
opacity: 10;
}
nav > a:hover:after{
transform: translateY(0px);
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
opacity: 10;
}
</style>
</head>
<body>
<nav>
<a href="">Home</a>
<a href="">Contact Us</a>
<a href="">About Us</a>
</nav>
</body>
</html>
More HTML and CSS Designs With Code and Tutorials
- Responsive Landing Page Design Using HTML and CSS Only
- Responsive Image Gallery Design Using HTML and CSS Only
- Working Digital Clock Design Using HTML, CSS and JavaScript
- Beautiful Card Design Tutorials HTML and CSS Only
- Beautiful Animated Button Using CSS
- Card UI Design Using CSS
- Toggle Button Design Using CSS
- iPhone Animation Using CSS
- Scrolling effect Using CSS
