Create Animated Navigation bar Menu Using CSS

Categories: CSS TutorialHTML TutorialWeb DesignsWeb Technology

Create Animated Navigation bar Menu Using CSS

animated navigation bar using css

Contents hide

2 More HTML and CSS Designs With Code and Tutorials

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>