Animated Menu Button using SVG

Animated Menu Button using SVG and JavaScript

In this article, we'll be creating an animated menu button using SVG and JavaScript. We'll be creating the button from scratch, using only basic HTML, CSS, and SVG markup.

Once we've created the button, we'll be using JavaScript to animate it. This will give the button a subtle but pleasing animation that is perfect for use in web and mobile applications. If you're interested in learning more about SVG and JavaScript, then this tutorial is for you!

By the end of this article, you'll be able to create an animated menu toggle button using HTML, CSS, SVG and JavaScript!

Watch the Tutorial on Youtube

https://youtu.be/SWOdtBaGaI4

Live Preview.!

HTML Code

<nav>
    <div class="logo">WebTuttorials</div>
    <div class="menu">
        <svg viewBox="0 0 30 30"> <!-- open class will be add using javascript-->
            <g>
                <circle cx="15" cy="15" r="13" />
                <path class="line1" />
                <path class="line2" />
                <path class="line3" />
            </g>
        </svg>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</nav>

CSS Code

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}
nav{
    width: 100%;
    max-width: 1200px;
    height: 70px;
    margin: 0 auto;

    background-color: #fff;
    border-bottom: 1px solid #eee;
    position: relative;

    display: flex;
    justify-content: space-between;
    align-items: center;
}
nav .logo{
    color: crimson;
    font-size: 24px;
    font-weight: 600;
    padding: 0 10px;
}
nav svg{
    width: 50px;
    height: 50px;
    cursor: pointer;
}
nav svg circle{
    fill: none;
    stroke: none;
    stroke-width: 2px;
}
nav svg path{
    stroke-width: 2px;
    stroke-linecap: round;
}
nav svg path.line1{
    stroke: crimson;
    d: path('M10,20 V10');
}
nav svg path.line2{
    stroke: gray;
    d: path('M15,25 V5');
}
nav svg path.line3{
    stroke: crimson;
    d: path('M20,20 V10');
}
nav ul{
    width: 100%;
    padding: 20px;
    background-color: inherit;
    box-shadow: 0 1px 1px rgba(0,0,0,0.2);

    position: absolute;
    top: 70px;
    left: 0;

    list-style: none;

    display: none;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
}
nav ul li a{
    color: lightgray;
    font-size: 18px;
    text-decoration: none;
}
nav ul li a:hover{
    color: darkgrey;
}
/*	Keyframes Animations*/
@keyframes line1 {
    0%{
        stroke-dasharray: 10,10;
        stroke-dashoffset: 0;
    }
    50%{
        stroke-dasharray: 10,10;
        stroke-dashoffset: 10;
    }
    100%{
        d: path('M10,20 L10,20 L20, 10');
        stroke-dasharray: 10,10;
        stroke-dashoffset: -2;
    }
}
svg.open path.line1{
    animation: line1 0.2s linear 0.2s forwards;
}

@keyframes line2 {
    0%{
        stroke-dasharray: 25,25;
        stroke-dashoffset: 5;
    }
    100%{
        stroke-dasharray: 25,25;
        stroke-dashoffset: 25;
    }
}
svg.open path.line2{
    animation: line2 0.2s linear forwards;
}

@keyframes line3 {
    0%{
        stroke-dasharray: 10,10;
        stroke-dashoffset: 0;
    }
    50%{
        stroke-dasharray: 10,10;
        stroke-dashoffset: -10;
    }
    100%{
        d: path('M20,20 L10,10 L10, 10');
        stroke-dasharray: 10,10;
        stroke-dashoffset: -2;
    }
}
svg.open path.line3{
    animation: line3 0.2s linear 0.2s forwards;
}

@keyframes circle {
    0%{
        stroke-dasharray: 2,40;
        stroke-dashoffset: 22;
    }
    100%{
        stroke: crimson;
        stroke-dasharray: 0,0;
        stroke-dashoffset: 22;
    }
}
svg.open circle{
    animation: circle 0.5s linear 0.2s forwards;
}

JavaScript Code

const menuButton = document.querySelector('.menu svg');
menuButton.addEventListener('click', function(){
    if(this.classList.contains('open')){
        this.classList.remove('open')
        document.querySelector('.menu ul').style.display = 'none';
    }
    else{
        this.classList.add('open')
        document.querySelector('.menu ul').style.display = 'flex';
    }
})

Responsive Navigation Bar Using Javascript

Fullscreen Animated Navigation Menu

Animated Login Form in HTML CSS with Validations

Registration Form in HTML and CSS

Draggable Slider in JavaScript

Animated Menu Button using SVG