2

Estou criando um menu responsivo do zero usando html, css e jQuery. Consegui criá-lo e está funcionando a abertura e fechamento de toggle após função de clique em uma imagem (o ícone de menu). A ideia agora é fazer com que ao clicar no ícone do menu, ele mude para um 'x', ou seja teria que trocar o src, eu acho, indicando que ali deve ser fechado. Segue o código atual:

<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>

Como posso fazer isso rapidamente?

1 Resposta 1

2

Se quiser trocar a imagem pode fazer dessa forma:

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

Mas que tal fazer uma animação dessa forma abaixo?

//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>

4
  • 1
    Deu certo, obrigado. Tenho outra dúvida. O menu está funcionando corretamente, no mobile aparece o icone de abrir e fechar toogle e o mesmo realiza a função. O problema que notei é que, quando eu deixo o menu aberto e aumento a largura da janela usando o mouse, ele não fica com 'display none' novamente. O que tentei fazer é indicar que acima de 700px o display da 'classe do menu toggle' será none. Mas isso não ocorre devido a declaração do jquery, provavelmente. Tenho como declarar no javascript mesmo então?
    – maiquel
    Commented 13/09/2017 às 14:33
  • 1
    Aceita a resposta então amigo. i.sstatic.net/uqJeW.png Commented 13/09/2017 às 14:37
  • 1
    Terá que monitorar a mudança da tela pela função $(window).resize() se a largura($(window).width() > 700) muda o display para none. Commented 13/09/2017 às 14:46
  • @maiquel, aceite as respostas das perguntas que você fez no StackOverflow como essa imagem indica: i.sstatic.net/uqJeW.png Commented 13/09/2017 às 14:58

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .