博客

用

CSS

实现三条横线，且点击变成叉号

一、实现效果

二、对应代码


HTML


<div class="banner_menu" id="openMenu">
   <s></s>
   <s></s>
   <s></s>
</div>


CSS


1、用

CSS

实现三条横线

/* banner三条横线——菜单 start */
.banner_menu {
  height: (25rem / @fontSize1)*2;
  position: absolute;
  right: 0;
  top: 37%;
  width: 1.03rem;
  -webkit-tap-highlight-color: rgba(0,0,0,.04);
  cursor: pointer;
  s {
    background-color: #fff;
    position: absolute;
    width: 1.03rem;
    height: (3rem / @fontSize1)*2;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .5s ease 0s;
    transition: all .5s ease 0s;
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    &:first-child {
      top: 0;
    }
    &:nth-child(2) {
      top: (14rem / @fontSize1);
    }
    &:nth-child(3) {
      top: (28rem / @fontSize1);
    }
  }
}
/* banner三条横线——菜单 end */

2、用

CSS

实现 三条横线变成叉号

/* banner三条横线——菜单 变成叉号 start */
.changeFigure s:first-child {
  transform: rotate(45deg) translate(1px) !important;
  top: -5px;
}
.changeFigure s:nth-child(2) {
  -webkit-transform: translateX(0.13333333rem) scaleX(1.5);
  transform: translateX(0.13333333rem) scaleX(1.5);
  opacity: 0;
}
.changeFigure s:nth-child(3) {
  -webkit-transform: rotate(-45deg) translate(0)!important;
  transform: rotate(-45deg) translate(0)!important;
}
/* banner三条横线——菜单 变成叉号 end */

3、

jQuery

实现切换效果


JS


$('#openMenu').on('click',function () {
    $(this).toggleClass('changeFigure');
  })