如何更改基础汉堡包图标以在单击时关闭图标（即：移动菜单打开）

Question

In foundation menu , the drop-down menu icon is in the button as follows-

<button class="menu-icon dark" type="button" data-toggle=""></button>

.menu-icon.dark::after {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    background: #0a0a0a;
    -webkit-box-shadow: 0 7px 0 #0a0a0a, 0 14px 0 #0a0a0a;
    box-shadow: 0 7px 0 #0a0a0a, 0 14px 0 #0a0a0a;
    content: '';
}

How can i make it so that when the mobile menu is open the icon changes to this-

And vice verse

Codepen link to topbar

Answer 1

You'll need to add custom code to achieve this. The solution is that you add an event listener that listens for the user to click on the button. Once clicked, add an active class and style the active class as needed in the stylesheet.

The below code should help.

Add the following code in your style file:

//SCSS for Active class

.menu-icon.dark{
   &:after{
     transition: all 0.3s ease;
  }
     &:before{
     transition: all 0.3s ease;
  }
}
.menu-icon.dark.active{
  transition: all 0.3s ease;

  &:after{
    transition: all 0.3s ease;
    background: #0a0a0a;
    box-shadow: none;
    transform: rotate(45deg);
    top: 12px;
    &:hover{
      opacity: 0.9;
    }

  }
   &:before{
     transition: all 0.3s ease;
    position: absolute;
    top: 12px;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    background: #0a0a0a;
    box-shadow: none;
    transform: rotate(-44deg);
    content: "";
    &:hover{
      opacity: 0.9;
    }
  }
}

In the javascript file, add the following code:

//Adds active class to the menu icon

$('.menu-icon').on('click', function(){

  $(this).toggleClass("active");

});