How to change the icon of the mobile menu icon to indicate toggle closing?

Navigation
2

I'm creating a responsive menu from scratch using html, css and jQuery. I was able to create it and it is working the opening and closing of toggle after click function on an image (the menu icon). The idea is now to make clicking on the menu icon, it changes to an 'x', ie would have to change the src, I think, indicating that there should be closed. Follow the current code: 

<script>
    $(document).ready(function() {
        $('.icone-oppen-close').click(function() {
            $('.itens-menu-mob').animate({
                width: 'toggle'
            }, 300);
            $('.itens-menu-mob').css('display', 'block', fast);
        });

    });
</script>

<html>

<div class="menu-geral-mobile menu-mobile">
    <div class="centralizar-menu-mob">
        <div class="brand-topo-mob"><img src="img/logo-apple.png" /></div>
        <div class="icone-oppen-close"><span class="glyphicon glyphicon-menu-hamburger"></span></div>
    </div>
</div>
<div class="itens-menu-mob">
    <ul>
        <li><a href=""> Home</a></li>
        <li><a href=""> Serviços</a></li>
        <li><a href=""> Portifólio</a></li>
        <li><a href=""> Contato</a></li>
        <li><a href=""> Home</a></li>
        <li><a href=""> Serviços</a></li>
        <li><a href=""> Portifólio</a></li>
        <li><a href=""> Contato</a></li>
    </ul>
</div>

</html>

How can I do this quickly?

    
asked by anonymous 13.09.2017 / 15:41

1 answer

2

If you want to change the image you can do this: 

$(".brand-topo-mob img").attr("src","img/logo-fechar.png");

But how about doing an animation like this below? 

//JavaScript
$('.btnMenu').click(function(){
  $(this).toggleClass('change');
});
/* CSS */
.btnMenu {
  position: absolute;
  top: 20px;
  right: 5px;
  z-index: 9999;
  cursor: pointer;
  float: right;
}

.bar1{
  margin-top: 0 !important;
}

.bar3{
  margin-bottom: 0 !important;
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 5px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-8px, 7px) ;
  transform: rotate(-45deg) translate(-8px, 7px) ;
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-7px, -7px) ;
  transform: rotate(45deg) translate(-7px, -7px);
}
<!-- HTML -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><divclass="btnMenu">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>
    
13.09.2017 / 15:59
Icons do not appear - Awesome Font I need to list the quantity of an 'X' product that each customer bought