DEV Community

Robson Muniz
Robson Muniz

Posted on

🍔Animated Menu Toggle Button | Html CSS & Javascript

Create An Animated Menu Toggle Button | Html CSS & Javascript, step-by-step from scratch.



Source Code:

A Simple Markup:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animated Menu Toggle Button</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="toggle">
    <span></span>
    <span></span>
    <span></span>
</div>

<script src="app.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Then a Couple of Lines of CSS:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #e9ecef;
}

.toggle{
    position: relative;
    width: 70px;
    height: 70px;
    background: #fff;
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    overflow: hidden;
}

.toggle span{
    position: absolute;
    width: 40px;
    height: 4px;
    background: #4263eb;
    border-radius: 4px;
    transition: 0.5s;
}

.toggle span:nth-child(1){
    transform: translateY(-15px);
    width: 25px;
    left: 15px;
}

.toggle.active span:nth-child(1){
    width: 40px;
    transform: translateY(0px) rotate(45deg);
    transition-delay: 0.125s;
}

.toggle span:nth-child(2){
    transform: translateY(15px);
    width: 15px;
    left: 15px;
}

.toggle.active span:nth-child(2){
    width: 40px;
    transform: translateY(0px) rotate(315deg);
    transition-delay: 0.25s;

}

.toggle.active span:nth-child(3){
    transform: translateX(60px);
}
Enter fullscreen mode Exit fullscreen mode

Follow us on YT
https://bit.ly/3oBQbc0

Top comments (4)

Collapse
 
andrewbaisden profile image
Andrew Baisden

Thats a cool Animated Menu and not too much code thanks for sharing.

Collapse
 
robsonmuniz16 profile image
Robson Muniz

Hey Dev, I'm you liked it.
Happy Coding my friend!

Collapse
 
tddare profile image
Damilare Taiwo

I practiced this like 2 times, thank you for sharing. 🙌🏼

Collapse
 
robsonmuniz16 profile image
Robson Muniz

Hey Dev, I'm glad you liked it!