引导菜单图标更改为 x 关闭

Question

我想，当单击菜单图标时，它会变成带有动画的 X 形状，当单击 X 形状时，它会变成菜单图标。 我网站中的菜单样式与 evernote.com 完全相同，但菜单图标必须更改为 X 。 我不知道我该如何写这个不断变化的形状。任何人都可以给我想法或指导我解决这个问题。 我是 bootstrap 和 js 的新手。 我上传了我的网站here

HTML

<div class="col-xs-6">
 <a class="bazar" href="">دانلود اپلیکیشن </a>
 <button type="button" class="navbar-toggle" > 
  <span class="icon-bar top-m"></span> 
  <span class="icon-bar mid-m"></span> 
  <span class="icon-bar bottom-m"></span> 
 </button>
<div class="menu"> 
  <span class="btnClose">×</span>
  <ul>
    <li><a href="index.html">صفحه اصلی</a></li>
    <li><a href="question.html">سوالات متداول</a></li>
    <li><a href="job.html">فرصت های شغلی</a></li>
    <li><a href="aboutus.html">درباره ما</a></li>
  </ul>
</div>

css

.icon-bar{

    transition: 0.6s ease;
    transition-timing-function: cubic-bezier(.75, 0, .29, 1.01);

}
.top-animate {
    background: #fff !important;
    top: 13px !important;
    -webkit-transform: rotate(45deg);
    /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}
.mid-animate {
    opacity: 0;
}
.bottom-animate {
    background: #fff !important;
    top: 13px !important;
    -webkit-transform: rotate(-225deg);
    /* Chrome, Safari, Opera */
    transform: rotate(-225deg);
}
.bazar-green, .bazar {
  color: #fff;
  display: block;
  font-size: 20px;
  position: absolute;
  right: 80px;
  top: 5px;
  line-height: 43px;
  background: url(image/bazarlogo.png) no-repeat left center;
  padding-left: 80px;
  z-index: 401;
}


.navbar-toggle {
    display: block;
    position: absolute;
    right: 0px;
    top: 0px;
}

.navbar-toggle{
float: right;
padding: 9px 10px;
margin-top: 8px;
margin-right: 15px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}

.navbar-toggle .icon-bar {
 background-color: #fff;
}
.navbar-toggle .icon-bar {
 display: block;
 width: 22px;
 height: 2px;
 border-radius: 1px;
}
.menu {
width: 300px;
position: absolute;
z-index: 400;
background: rgba(0,0,0,0.7);
padding: 10px 30px;
text-align: right;
color: #fff;
font-size: 17px;
transition: all 1s;
right: -316px;
}
.btnClose {
color: #fff;
font-size: 30px;
cursor: pointer;
z-index: 500;
}

js

$('.navbar-toggle').click(function() {
                        $('.top-m').addClass('top-animate');
            $('.mid-m').addClass('mid-animate');
            $('.bottom-m').addClass('bottom-animate');
            $('.menu').addClass('opened');
            var height = $( window ).height();
            $('.menu').css('height',height);


    });

    $('.btnClose').click(function() {
            $('.menu').removeClass('opened');
            $('.navbar-toggle').fadeIn();

    });

Answer 1

为 span 添加额外的类，如下所示

   <span class="icon-bar first"></span>
   <span class="icon-bar middle"></span> 
   <span class="icon-bar final"></span>

然后在 jQuery 中隐藏中心跨度并使用

将第一个跨度旋转到 45 度

transform: rotate(45deg);

并使用

将最终跨度旋转到 125 度

transform: rotate(125deg);

你必须正确调整顶部