How to change the image of the mobile menu icon to indicate toggle closure?

Asked

Viewed 978 times

2

I’m creating a responsive menu from scratch using html, css and jQuery. I was able to create it and it is working toggle opening and closing after function click on an image (the menu icon). The idea now is to make sure that when clicking on the menu icon, it changes to an 'x', that is 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?

jquery html css mobile

1 answer

2

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

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

But how about doing an animation this way 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>
<div class="btnMenu">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

  • 1

    It worked, thanks. I have another question. The menu is working correctly, in mobile appears the toogle open and close icon and it performs the function. The problem I noticed is that when I leave the menu open and increase the width of the window using the mouse, it does not get 'display None' again. What I tried to do is to indicate that above 700px the 'toggle menu class' display will be None. But this is not due to jquery declaration, probably. I can declare in javascript even then?

  • 1

    Accept the answer then friend. https://i.stack.Imgur.com/uqJeW.png

  • 1

    You will have to monitor screen change by function $(window).resize() if the width($(window).width() > 700) changes the display for none.

  • @maiquel, accept the answers to the questions you asked in Stackoverflow as this image indicates: https://i.stack.Imgur.com/uqJeW.png

Browser other questions tagged jquery html css mobile

You are not signed in. Login or sign up in order to post.