Animated Navigation Menubar using HTML and CSS

Animated Navigation Menu using HTML and CSS

In this Article, we will learn about how to create Animated Navigation Menubar using HTML and CSS with source code. Now, Creating Animated Navigation Menubar using HTML and CSS becomes more simple with the given tutorial, which provides a simple step-by-step process to design Animated Navigation Menubar. using HTML and CSS. So, let's go and read the information carefully.

Steps to create Animated Navigation Menubar using html and css

Here are the Steps to create Animated Navigation Menu as given below :-

1) Creating File on VS CODE :

Open VS Code, Create a new folder for the project and add the HTML and CSS files.

2) Adding HTML code in File :

Add the .html file in the project folder and give it the name as - index.html.

3) Copy and Paste HTML code :

copy the following code and Paste it in index.html file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Navigation Menu</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <nav>
            <ul>
                <li>Home</li>
                <li>Services</li>
                <li>Products</li>
                <li>Clients</li>
                <li>Contact</li>
            </ul>
        </nav>
    </div>
</body>
</html>

4) Adding CSS code in File :

Add the .css file in the project folder and give it the name as - style.css.

5) Copy and Paste CSS code :

copy the following code and paste it in style.css file.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
.container{
    background: #55BAB9;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
nav{
    background: #fff;
    border-radius: 50px;
    padding: 10px;
    box-shadow: 0 25px 20px -20px rgba(0, 0, 0, 0.4);
}
nav ul li{
    list-style: none;
    display: inline-block;
    padding: 13px 35px;
    margin: 10px;
    font-size: 18px;
    font-weight: 500;
    color: #777;
    cursor: pointer;
    position: relative;
    z-index: 2;
    transition: color 0.5s;
}
nav ul li:after{
    content: '';
    background-color: #19978F;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    opacity: 0;
    transition: top 0.5s, opacity 0.5s;
}
nav ul li:hover{
    color: #fff;
}
nav ul li:hover::after{
    top: 50%;
    opacity: 1;
}

6) Check the Output :

After Adding HTML & CSS, check the output of the project.

Here is the screenshot of the output of project.

Animated Navigation Menu in html & css source code

Hope this tutorial will help you to create Animated Navigation Menu using HTML & CSS with source code. if you have any confusion then you can contact with us on our coding community.

Also, checkout our website for more information and join our telegram community to connect with us and other coders.