Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

slideToggle e toggleClass

por Bruna Rodrigues
| 67.4k xp | 7 posts

Olá pessoal. Estou tentando adicionar um efeito de transição utilizando a função slideToggle, mas quando faço isso e retorno na resolução do desktop, os itens do menu não aparecem mais.

Seguem abaixo as estruturas HTML, CSS e JS

<header>
  <div class="inner">
    <div class="toggle">
      <div class="one"></div>
      <div class="two"></div>
    </div>
    <div class="logo">Logo</div>
  <nav class="menu">
    <ul>
      <li><a href="">Home</a></li>
      <li><a href="">Sobre</a></li>
      <li><a href="">Serviços</a></li>
      <li><a href="">Contato</a></li>
    </ul>
  </nav>
  </div>
</header>
body {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
}
header {
  background: #f7f7f7;
  width: 100%;
  box-shadow: 0 0 2px #999;
  padding: 20px 0;
}
.inner {
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
nav li {
  display: inline-block;
  margin: 0 5px;
}
nav li:first-child, nav li:last-child {
  margin: 0;
}
nav a {
  text-decoration: none;
}
.toggle {
  position: absolute;
  left: 30px;
  top: 3px;
  width: 25px;
  display: none;
  cursor: pointer;
}
.toggle div {
  height: 3px;
  background: #333;
  margin: 4px 0;
}
.two {
  width: 20px;
}


@media (max-width: 768px) {
  .toggle {
    display: block;
  }
  .inner {
    flex-direction: column;
  }
  .logo {
    font-size: 1.4em
  }
  nav ul {
    text-align: center;
    margin-top: 30px;
    display: none;
  }
  nav li {
    display: block;
    margin: 30px 0;
    font-size: 1.3em
  }
  .active {
    display: block;
  }
}
$(document).ready(function() {
  $('.toggle').click(function() {
    $('.menu ul').slideToggle().toggleClass('active');
  })
})
6 respostas
por Wanderson Macêdo
| 3967.1k xp | 8086 posts
Instrutor

Oi Bruna, tudo bem? Deixa eu ver se entendi bem: Na resolução menor ele funciona, mas quando você coloca em desktop normal, não funciona, é isso? Mas tipo, se você iniciar logo em desktop, funciona?

Eu particularmente quando preciso de um efeito assim no JS, faço um if para verificar se estou na resolução correta antes de fazer qualquer coisa com window.innerWidth

por Bruna Rodrigues
| 67.4k xp | 7 posts

Olá Wanderson! Quando eu inicio na resolução do desktop, funciona normal. Vou para a resolução menor, também está tudo normal. Clico no botão responsivo que criei pra abrir o menu, tudo normal também. Mas depois que eu faço o teste do menu responsivo (clicando no botão pra abrir e fechar o menu), na hora de retornar para a resolução do desktop, os itens não aparecem.

Se estiver meio complicado de entender, coloquei o código aqui https://codepen.io/brunaoneightwo/pen/JOmYdq

por Wanderson Macêdo
| 3967.1k xp | 8086 posts
Instrutor

Oi Bruna, foi uma excelente ideia criar um pen, mas aqui não aparece nada nesse toggle :/

será que esse já é o problema?

por Bruna Rodrigues
| 67.4k xp | 7 posts

Estranho, pra mim o toggle funciona normal, aparecem todos os itens do menu. O único problema mesmo é quando eu retorno pra resolução do desktop.

Mas como seria esse if que você faz pra verificar?

solução!
por Bruna Rodrigues
| 67.4k xp | 7 posts

Olá Wanderson! Consegui resolver o meu problema utilizando esse JS

$(document).ready(function() {
  $('.toggle').click(function() {
    $('.menu ul').slideToggle().toggleClass('active');
  })
  $(window).resize(function() {
    if($(window).width() > 768) {
      $('.menu ul').removeAttr('style');
    }
  })
})

Como eu ainda estou aprendendo a programar, aceito sugestões de melhorias nos códigos. Agradeço a sua atenção!

por Wanderson Macêdo
| 3967.1k xp | 8086 posts
Instrutor

Opa bruna, a ideia era essa mesmo, no resize da janela, verificar se a resolução é correta e aplicar a correção. Marca sua resposta como solucionadora?