creocodigo
Menu Icon Navigation Animation

Menu Icon Navigation Animation

Shikhar Baniya's photo
Shikhar Baniya
·

2 min read

Hello Coders! Welcome to another JavaScript Blog. In this, we're going to see how to create a Menu Icon Navigation Animation which is used in may dashboard application or Admin Panels.

Here's a preview -

screen-capture.gif

That being said, let us get started.

Step - 1: Like always, create 3 files - index.html, style.css and script.js.

Step - 2: Copy the below HTML code and paste it into your code editor.

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Menu Icon Navigation</title>

<link rel="stylesheet" href="./style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>
<body>

<div class="wrapper">
        <div class="icon nav-icon-1">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>

</body>
</html>

Step - 3: Below is the CSS code for styling.

CSS

body {
    padding: 0;
    margin: 0;
    background: #f6f7fc;
    text-align: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 100vh;
}
.wrapper {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -20%);
}
.wrapper .icon {
    margin: 20px;
}
.nav-icon-1 {
    width: 30px;
    height: 30px;
    position: relative;
    transition: .1s ease-in-out;
    margin: 10px 10px;
    cursor: pointer;
    display: inline-block;
}
.nav-icon-1 span {
    width: 5px;
    height: 5px;
    background-color: #b74096;
    display: block;
    border-radius: 50%;
    position: absolute;
}
.nav-icon-1:hover span {
    transform: scale(1.2);
    transition: 350ms cubic-bezier(.8, .5, .2, 1.4);
}
.nav-icon-1 span:nth-child(1) {
    left: 0; top: 0;
}
.nav-icon-1 span:nth-child(2) {
    left: 12px; top: 0;
}
.nav-icon-1 span:nth-child(3) {
    right: 0; top: 0;
}
.nav-icon-1 span:nth-child(4) {
    left: 0; top: 12px;
}
.nav-icon-1 span:nth-child(5) {
    position: absolute;
    left: 12px; top: 12px;
}
.nav-icon-1 span:nth-child(6) {
    right: 0px; top: 12px;
}
.nav-icon-1 span:nth-child(7) {
    left: 0px; bottom: 0px;
}
.nav-icon-1 span:nth-child(8) {
    position: absolute;
    left: 12px; bottom: 0px;
}
.nav-icon-1 span:nth-child(9) {
    right: 0px; bottom: 0px;
}
.nav-icon-1.open {
    transform: rotate(180deg);
    cursor: pointer;
    transition: .2s cubic-bezier(.8, .5, .2, 1.4);
}
.nav-icon-1.open span {
    border-radius: 50%;
    transition-delay: 200ms;
    transition: .5s cubic-bezier(.8, .5, .2, 1.4);
}
.nav-icon-1.open span:nth-child(2) {
    left: 6px;
    top: 6px;
}
.nav-icon-1.open span:nth-child(4) {
    left: 6px;
    top: 18px;
}
.nav-icon-1.open span:nth-child(6) {
    right: 6px;
    top: 6px;
}
.nav-icon-1.open span:nth-child(8) {
    left: 18px;
    bottom: 6px;
}

Step - 4: Below is the JavaScript code.

JS

const icons = document.querySelectorAll('.icon');
        icons.forEach(icon => {
            icon.addEventListener('click', (event) => {
                icon.classList.toggle("open");
            });
        });

And that's it. You're done.

Let me know in the comments if you have any doubt related to this.

Follow @creocodigo for more projects and web related content.

If you find this useful, below are some other posts that I am sure you'll love.

JavaScriptHTML5CSSmentoranimation