Saksham Digital Technology - Coding Institute

Animated Navigation Bar

HTML CODE:-

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 <title></title>
</head>
<body>
<div class="navbar">
 <ul>
 <li class="list active">
 <a href="#">
 
 Home
 </a>
 </li>
 <li class="list">
 <a href="#">
 
 User
 </a>
 </li>
 <li class="list">
 <a href="#">
 
 Message
 </a>
 </li>
 <li class="list">
 <a href="#">
 
 Contact
 </a>
 </li>
 <li class="list">
 <a href="#">
 
 Setting
 </a>
 </li>
 <div class="indicate"></div>
 </ul>
</div>
</body>
</html>

CSS CODE:-

    body{
            padding: 0px;
            margin: 0px;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            background: black;
        }
        .navbar{
            width: 400px;
            height: 70px;
            background: white;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 10px;
        }
        .navbar ul{
            display: flex;
            width: 350px;
        }
        .navbar ul li{
            position: relative;
            list-style: none;
            width: 65px;
            height: 65px;
            z-index: 1;
        }
        .navbar ul li a{
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            width: 100%;
            text-align: center;
            font-weight: 500;
            text-decoration: none;
        }
        .navbar ul li a .icon{
            position: relative;
            display: block;
            line-height: 65px;
            text-align: center;
            font-size: 25px;
            transition: 0.5s;
            color: black;
        }
        .navbar ul li.active a .icon{
            transform: translateY(-35px);
            color:white;
        }
        .name{
            position: absolute;
            color:black;
            transition: 0.5s;
            opacity: 0;
            transform: translateY(20px);
        }
        .navbar ul li.active a .name{
            opacity: 1;
            transform: translateY(10px);
        }
        .indicate{
            position: absolute;
            top: -50%;
            width: 55px;
            height: 55px;
            background: #1f02c9;
            border-radius: 50%;
            border: 5px solid black;
            transition: 0.5s;
        }
        .indicate::before{
            content: "";
            position: absolute;
            top: 50%;
            left: -20px;
            width: 20px;
            height: 20px;
            background: transparent;
            border-top-right-radius: 20px;
            box-shadow: 0px -10px 0 0 black;
        }
        .indicate::after{
            content: "";
            position: absolute;
            top: 50%;
            right: -20px;
            width: 20px;
            height: 20px;
            background: transparent;
            border-top-left-radius: 20px;
            box-shadow: 0px -10px 0 0 black;
        }
        .navbar ul li:nth-child(1).active ~ .indicate{
            transform: translateX(calc(65px*0));
        }
        .navbar ul li:nth-child(2).active ~ .indicate{
            transform: translateX(calc(65px*1));
        }
        .navbar ul li:nth-child(3).active ~ .indicate{
            transform: translateX(calc(65px*2));
        }
        .navbar ul li:nth-child(4).active ~ .indicate{
            transform: translateX(calc(65px*3));
        }
        .navbar ul li:nth-child(5).active ~ .indicate{
            transform: translateX(calc(65px*4));
        }

JS CODE:-

    const list = document.querySelectorAll('.list');
   function activeLink(){
        list.forEach((item) =>
        item.classList.remove('active'));
        this.classList.add('active');
   }
   list.forEach((item) =>
   item.addEventListener('click',activeLink));