значок значка начальной загрузки изменить на x закрыть

Question

Я бы хотел, чтобы при щелчке по значку меню изменилась форма X с анимацией, и при нажатии на X-форму она изменится на значок меню. Стиль меню на моем сайте точно такой же, как evernote.com, но значок меню должен быть изменен на X. Я не знаю, как я могу написать эту изменяющуюся форму. Скажите, кто-нибудь даст мне идею или поможет мне с этой проблемой. Я новичок в бутстрапе и 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

Добавить дополнительные CLA сс, чтобы охватить как ниже

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

Затем в JQuery пролета скрыть центр и вращать первый пролет до 45 градусов с помощью

transform: rotate(45deg); 

и повернуть окончательный срок до 125deg использование

transform: rotate(125deg); 

и вы должны правильно отрегулировать верх