Creating an Animated Side Navbar using HTML and CSS

Last Updated : 30 Jul, 2024

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.

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.

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

* {     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%; }

Output:

How to create animated banner links using HTML and CSS?

akshaybotre203

Improve

Article Tags :

Creating an Animated Side Navbar using HTML and CSS

Similar Reads