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

Question

I would like,when clicking on the menu icon change to an X shape with animation and when clicking on X shape it change to menu icon. menu style in my site is exactly like evernote.com but menu icon must change to X . I don't know how can I write this changing shape.can any one give me idea or guide me with this problem. I'm new in bootstrap and js . I uploaded my site 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

Add extra class to span as below

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

Then in jQuery hide center span and rotate first span to 45deg using

transform: rotate(45deg);

and rotate final span to 125deg using

transform: rotate(125deg);

and you have to adjust top properly