如何更改粉饼汉堡图标以在单击时关闭图标（即，打开移动菜单）

Question

在基础菜单中，下拉菜单图标如下所示位于按钮中-

<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: '';
}

我如何做到这一点，以便当打开移动菜单时，图标更改为此-

反之亦然

Codepen link to topbar

Answer 1

您需要添加自定义代码来实现此目的。解决方案是添加一个事件侦听器，以侦听用户单击按钮。单击后，添加一个活动类并在样式表中根据需要设置该活动类的样式。

下面的代码应该有帮助。

在样式文件中添加以下代码：

//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;
    }
  }
}

在javascript文件中，添加以下代码：

//Adds active class to the menu icon

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

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

});