Cross my hamburger – CSS animation examples

This animation is employed everywhere the net, turning 3 lines into a cross or shut icon. till fairly recently, the bulk of implementations are achieved victimization markup language components, however really SVG is far additional suited to the current reasonably animation – there’s not a requirement to bloat the code of your button with multiple spans.

Due to the animatable nature and SVG and its passable DOM, the code to accomplish the animation or transition changes little or no – the technique is that the same.

We begin by making four components be it spans within a div or ways within associate SVG. If we’re victimization spans, we’d like to use CSS to position them within the div; if we’re victimization SVG, this is often already taken care of. we wish to position lines a pair of and three within the center – one on prime of another – whereas spacing lines one and four equally higher than and below, ensuring to center the rework origin.

We’re about to trust transitioning 2 properties: opacity and rotation. initial of all, we wish to fade away lines one and four, that we will target victimization the: nth-child selector.

.menu-icon.is-active {element-type}:nth-child(1),
.menu-icon.is-active {element-type}:nth-child(4) {
  opacity: 0; }

The only issue left to try and do is target the 2 middle lines and rotate them forty-five degrees in opposite directions.

.menu-icon.is-active {element-type}:nth-child(2) {
  transform: rotate(45deg); }
.menu-icon.is-active {element-type}:nth-child(3) {
  transform: rotate(-45deg); }

Java Script Code :

function updateMenuButton() {
  $('.js-menu-button').find('.menu-icon').toggleClass('is-active');
}

$(document).ready(function() {

  $('.js-menu-button').click(function(e){

    e.preventDefault();
    updateMenuButton();

  });

});

Demo | Download

Leave a Reply