9 Dots Menu using HTML CSS JS 😱

 

# To create a 9 Dots Menu using HTML CSS JS 😱 Select Menu using JavaScript, you can use a combination of HTML, CSS, and JavaScript to create a 9 Dots Menu using HTML CSS JS 😱 Select Menu and apply a tilt effect to it. Here's an example:

1. First, create a container element in HTML for the 9 Dots Menu:

                
<div class="frem">
    <p>Apps</p>
    <span style="--i:0;--x:-1;--y:0"><img src="./Calendar.svg" alt=""></span>
    <span style="--i:1;--x:1;--y:0"><img src="./Camera.svg" alt=""></span>
    <span style="--i:2;--x:0;--y:-1"><img src="./Chat.svg" alt=""></span>
    <span style="--i:3;--x:0;--y:1"><img src="./Folder.svg" alt=""></span>
    <span style="--i:4;--x:1;--y:1"><img src="./Locations.svg" alt=""></span>
    <span style="--i:5;--x:-1;--y:-1"><img src="./Magnifier.svg" alt=""></span>
    <span style="--i:6;--x:0;--y:0"><img src="./Messages.svg" alt=""></span>
    <span style="--i:7;--x:-1;--y:1"><img src="./Notifications.svg" alt=""></span>
    <span style="--i:8;--x:1;--y:-1"><img src="./Settings.svg" alt=""></span>
</div>
            

2. Next, add some CSS to create a 9 Dots Menu and position the container in the center:

                
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #10131c;
}
.frem{
    position: relative;
    width: 70px;
    height: 70px;
    background-color: #212532;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
    transition-delay: 0.8s;
}
.frem.active{
    width: 200px;
    height: 200px;
    transition-delay: 0s;
}
.frem p{
    position: absolute;
    top: -45px;
    color: white;
    font-family: system-ui;
    font-size: 26px;
    opacity: 0;
    transition: opacity 0.5s;
}
.frem.active p{
    opacity: 1;
}

.frem span{
    position: absolute;
    width: 7px;
    height: 7px;
    background: white;
    border-radius: 50%;
    transition: transform 0.5s, width 0.5s, height 0.5s, background 0.5s;
    transform: translate(calc(12px * var(--x)), calc(12px * var(--y)));
    transition-delay: calc(0.1s * var(--i));
}
.frem.active span{
    width: 45px;
    height: 45px;
    background: #333849;
    transform: translate(calc(60px * var(--x)), calc(60px * var(--y)));
    
}

.frem img{
    width: 0px;
    transition: width 0.5s;
}
.frem.active img{
    width: 44px;
}
            

3. Use JavaScript to create a 9 Dots Menu Animation element inside the container:

                
let frem = document.querySelector('.frem');
frem.onclick = function () {
    frem.classList.toggle('active')
} 
            

# 9 Dots Menu in JavaScript HTML and CSS For Full Code 👇

 

Download Full Code

 

* Hello buddy, I hope you are doing great and creating awesome projects. Today I have brought a useful project for you. In this project, you will learn to create `9 Dots Menu using HTML CSS JS 😱` using HTML CSS, and JavaScript. Yeah, HTML also provides us a select menu with the dropdown feature, but we will you will learn to make it more beautiful and fascinating.