bootstrap menu icon change to x close

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();

    });

have you heard about sprite images? you can use sprite images to change image-icon. its very easy here you just have to change the background-position: of the image.. Have a look on this. https://css-tricks.com/css-sprites-with-inline-images/ — Shridhar, Mar 07 '15 at 12:58
@shridhar never here about it. but I did not use image. as you see I used `span` and giving height and width to them. — mkafiyan, Mar 07 '15 at 13:01
@shridhar I read this issue but I really mixed up with codes. (http://stackoverflow.com/questions/28247310/bootstrap-mobile-menu-icon-change-to-x-close) — mkafiyan, Mar 07 '15 at 13:06
instead of showing that X icon you want to replace menu icon with X shape.. am i right? — Shridhar, Mar 07 '15 at 13:08
@shridhar yes but I want to replace with animation like spin — mkafiyan, Mar 07 '15 at 13:12
@shridhar I want to menu icon become like this http://www.adoratorio.com/ — mkafiyan, Mar 07 '15 at 13:28
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/72470/discussion-between-mimi-and-shridhar). — mkafiyan, Mar 07 '15 at 14:04

score 0 · Answer 1 · edited Feb 06 '16 at 21:27

0

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

edited Feb 06 '16 at 21:27

marc_s

732,580
175
1,330
1,459

answered Mar 07 '15 at 13:59

Shridhar

339
2
15

I update my code. in html I added 3 class and in css as u said i transform them. but I think my js has some problem. – mkafiyan Mar 07 '15 at 14:10
I add them to jsfiddle.net but its not very clear. I dont know why menu icon invisible http://jsfiddle.net/MgcDU/10204/ – mkafiyan Mar 07 '15 at 14:36
I also upload site another time you can see the menu action more clear here http://carpediem.ir/asrnovin/payamap/ – mkafiyan Mar 07 '15 at 14:39

bootstrap menu icon change to x close

1 Answers1