Creating an Animated Side Navbar using HTML and CSS

Last Updated : 09 May, 2023

In this article, we will learn about creating an Animation side Navbar using HTML and CSS, Almost every website contains a side navigation bar. By using a side navigation bar, users can easily navigate to the other pages of the website and if the navigation bar is animated it looks attractive and catches the attention of the viewer. In this article, we are going to see the basic code for the creation of a side navigation bar. The code contains HTML code and CSS.

Approach: The approach is to use the nth-child property to animate the hover effect.

HTML Code: In this section, we are going to create a basic structure of a side navigation bar that contains text, images, icons, etc. by using an unordered list.

Example: Here is the demonstration of the above-explained approach.

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width,initial-scale=1.0">
    <title>side navigation bar</title>
    <script src=
"https://kit.fontawesome.com/bba3432f3f.js"
               crossorigin="anonymous"></script>
    <link rel="stylesheet" href="style.css">
</head>
 
<body>
    <div class="header">
        <div class="side-nav">
            <a href="#" class="logo">
                <img src="logo.png" class="logo-img">
            </a>
            <ul class="nav-links">
                <li><a href="#">
                        <i class="fa-solid fa-house-user"></i>
                        <p>Dashboard</p>
                    </a>
                </li>
                <li><a href="#">
                        <i class="fa-solid fa-comment-dots"></i>
                        <p>Message</p>
                    </a>
                </li>
                <li><a href="#">
                        <i class="fa-solid fa-user"></i>
                        <p>users</p>
                    </a>
                </li>
                <li><a href="#">
                        <i class="fa-solid fa-box-open"></i>
                        <p>Rewards</p>
                    </a>
                </li>
                <li><a href="#">
                        <i class="fa-solid fa-chart-pie"></i>
                        <p>Report</p>
                    </a>
                </li>
                <li><a href="#">
                        <i class="fa-solid fa-screwdriver-wrench"></i>
                        <p>Setting</p>
                    </a>
                </li>
                <div class="active"></div>
            </ul>
        </div>
    </div>
</body>
</html>

CSS Code: In this section, we are giving basic styles to the text, icons, and images that we use in HTML code, and we are using the nth-child property to move our hover effect in short and animate the hover effect.

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}
 
.header {
    width: 100%;
    height: 100vh;
    background: #ccffff;
}
 
.side-nav {
    width: 250px;
    height: 100%;
    background: #00ff00;
    position: fixed;
    top: 0;
    left: 0;
    padding: 20px 30px;
}
 
.logo {
    display: block;
    margin-bottom: 130px;
}
 
.logo-img {
    width: 170px;
    margin-top: 20px;
}
 
.nav-links {
    list-style: none;
    position: relative;
}
 
.nav-links li {
    padding: 10px 0;
}
 
.nav-links li a {
    color: #000000;
    text-decoration: none;
    padding: 10px 14px;
    display: flex;
    align-items: center;
}
 
.nav-links li a i {
    font-size: 22px;
    margin-right: 20px;
}
 
.active {
    background: #000000;
    width: 100%;
    height: 47px;
    position: absolute;
    left: 0;
    top: 2.6%;
    z-index: -1;
    border-radius: 6px;
    box-shadow: 0 5px 10px rgba(255, 255, 255, 0.4);
    display: none;
    transition: top 0.5s;
}
 
.nav-links li:hover a {
    color: #fff;
    transition: 0.3s;
}
 
.nav-links li:hover~.active {
    display: block;
}
 
.nav-links li:nth-child(1):hover~.active {
    top: 2.6%;
}
 
.nav-links li:nth-child(2):hover~.active {
    top: 19.2%;
}
 
.nav-links li:nth-child(3):hover~.active {
    top: 35.8%;
}
 
.nav-links li:nth-child(4):hover~.active {
    top: 52.4%;
}
 
.nav-links li:nth-child(5):hover~.active {
    top: 69%;
}
 
.nav-links li:nth-child(6):hover~.active {
    top: 85.6%;
}