Create Animated Navigation bar Menu Using CSS

Share This Post

Share on facebook
Share on linkedin
Share on twitter
Share on email

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

Subscribe To Our Newsletter

Get updates and learn from the best

More To Explore