Magic Navigation Bar using HTML CSS and Javascript

The channel is building 2 series: animation series with proejct and animation series for newbies

See more code HTML CSS javascript with Lun Dev.

Hướng dẩn chi tiết:

Truy cập youtube Lùn Dev để xem nhiều hơn

Code HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"/>
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="menu">
        <ul>
            <li class="item active">
                <i class="fa-solid fa-house-user"></i> Dashboard
            </li>
            <li class="item">
                <i class="fa-solid fa-shirt"></i> Products <i class="fa-solid fa-chevron-down"></i>
                <ul>
                    <li>Add product</li>
                    <li>List product</li>
                </ul>
            </li>

<li class="item">
                <i class="fa-solid fa-user"></i> Users <i class="fa-solid fa-chevron-down"></i>
                <ul>
                    <li>Add user</li>
                    <li>List user</li>
                    <li>block user</li>
                </ul>
            </li>
            <li class="item"><i class="fa-solid fa-gear"></i> Setting</li>

Code CSS

:root {
    --top-begin: 0px;
    --top-end: 0px;
    --height-begin: 40px;
    --height-end: 40px;
  }
  body{
    font-family: system-ui;
    height: 100vh;
    background-image:radial-gradient(ellipse at left, #2D193B, #090A20);
}
.menu{
    background-color: rgb(42, 36, 77, 0.2);
    width:280px;
    padding:20px;
    border-radius: 20px;
    margin:70px;
}
ul{
    list-style: none;
    padding:0;
    margin:0;
    position: relative;
}
ul li{
    padding:10px;
    margin-bottom: 30px;
    position: relative;
    color:#757474;
    cursor: pointer;
    transition: 0.5s;
    transition-delay: 1s;
}

ul li i{
    width:30px;
    font-size: 15px;
    position: relative;
    z-index: 1;
    text-align: center;
    margin-right:30px;
}
ul li::before{
    position: absolute;
    top:0;
    left:5px;
    width:40px;
    height:100%;
    content: '';
    background-color: #312B57;
    border-radius: 30px;
    transition: 1s;
}
li i:nth-child(2){
    position: absolute;
    right:0;
    top:15px;
    transition: 0.5s;
    opacity: 0.5;
}

ul li li{
    margin-bottom: unset;
    margin-top: 10px;
    padding-left:50px;
    opacity: 0;
    animation: shochild 1s ease 1 forwards;
    position: relative;
    z-index: 1;
}
@keyframes shochild{
    from{
        opacity: 0;
        transform: translate(0,-20px);
    }to{
        opacity: 1;
    }
}

li li:nth-last-child(1){
    margin-bottom: 0;
    padding-bottom: 0;
}
ul li li::before{
    position: absolute;
    left:13px;
    top:50%;
    width:5px;
    height:5px;
    content:'';
    background-color: #DD789A;
    z-index: 1;
    transition: 1s;
}

ul li li:nth-child(1),
ul li li:nth-child(1)::before{
    transition-delay: 1.2s;
}
ul li li:nth-child(2),
ul li li:nth-child(2)::before{
    transition-delay: 1.4s;
}
ul li li:nth-child(3),
ul li li:nth-child(3)::before{
    transition-delay: 1.6s;
}
ul li li:nth-child(2){
    animation-delay: 0.2s;
 }
 ul li li:nth-child(3){
    animation-delay: 0.4s;
 }

ul ul{
    position: relative;
    display: none;
    transition: 1s;
}

.showMenuChild{    
    transform: rotate(180deg);
}

.showMenuChild ~ ul{
    display: block;
}
#action{
    background-color: red;
    position: absolute;
    width:40px;
    height:var(--height-end);
    border-radius: 30px;
    background-image: linear-gradient(to bottom, #C45AB3, #DD789A);
    top:var(--top-end);
    left:5px;
    transition: 1s;
}
.active li::before{
    background-color: #eee;
}
.runanimation{
    animation: animationaction 1s ease-in 1;
}
.active, .active li{
    color:#fff;
}

@keyframes animationaction{
    0%{
        height: var(--height-begin);
        top: var(--top-begin);
    }
    30%{
        height: var(--height-begin);
        width:10px;
        height:10px;
        transform: translate(15px);
       
    }
    50%{
        filter: none;
        height:10px;
    }
    70%{
        width:10px;
        transform: translate(15px);
        filter: blur(3px);
    }100%{
    }
}

Code Javascript

let items = document.querySelectorAll('.item');
let action = document.getElementById('action');
let icondowns = document.querySelectorAll('.fa-chevron-down');

items.forEach(item => {
    item.addEventListener('click', function(e){
        if( this.classList.contains('active') || e.target.classList.contains('fa-chevron-down')){
            return;
        }
        items.forEach(remove_active => {
            remove_active.classList.remove('active');
        });
        console.log(e.target);
        this.classList.add('active');
        document.documentElement.style.setProperty('--height-begin', action.offsetHeight + 'px');
        document.documentElement.style.setProperty('--top-begin', action.offsetTop + 'px');
        document.documentElement.style.setProperty('--height-end', this.offsetHeight + 'px');
        document.documentElement.style.setProperty('--top-end', this.offsetTop + 'px');
        action.classList.remove('runanimation');
        void action.offsetWidth;
        action.classList.add('runanimation');
    },false)
})
icondowns.forEach(icon =>{
    icon.addEventListener('click', function(){
        this.classList.toggle('showMenuChild');
        items.forEach(item => {
            if(item.classList.contains('active')){
                document.documentElement.style.setProperty('--height-end', item.offsetHeight + 'px');
                document.documentElement.style.setProperty('--top-end', item.offsetTop + 'px');
                return;
            }
        });
    })
})

Hướng dẩn chi tiết:

Code HTML

Code CSS

Code Javascript

Thank You

Contact Form