0

CSS:

.nav {
    width: 15%;
    height: 800px;
    background-color: #421;
    margin-top: 55px;
    float: left;
}
.nav-min {
    width: 5% !important;
    background-color: #ccc !important;
}

JS:

<script src="http://code.jquery.com/jquery-2.2.3.min.js"></script>    
<script type="text/javascript">
    $('#btn').click(function() {
            $('.nav').toggleClass('nav-min');
        });
</script>

HTML:

<nav class="nav">
    <button class="btn btn-menu" id="btn">Menu</button>     
</nav>

Aqui tem testes que fiz e funcionaram http://jsfiddle.net/ukpm1uey/3/

porém não rodou no localhost, alguém sabe o que pode ser?, já verifiquei se esta salvando, mas mesmo assim não funciona de maneira alguma

4
  • No jsFiddle ele está funcionando! Qual é o seu objetivo ou que está tentando fazer para dizer que ele não está a funcionar?
    – Chun
    4/05/2016 às 2:30
  • Matheus, ainda esta muito difícil de entender qual e o seu problema, você poderia editar a sua pergunta adicionando mais informações? Quando tiver um tempo da uma lida aqui -> pt.stackoverflow.com/help/mcve 4/05/2016 às 2:38
  • Então, eu queria fazer um menu que diminui ao clicar no botão, mas no meu código não esta funcionando :/, eu que montei o código do jsFiddle porém ele não funciona no meu código sendo que ele está praticamente limpo 4/05/2016 às 3:26
  • tem certeza que vc colocou um tag link com o css inicial lá ? no jsfiddle, é só por na janela, mas no localhost precisa de um tag incluindo o css 4/05/2016 às 3:42

1 Resposta 1

4

No localhost deve ter colocado na mesma ordem que fez a pergunta. Isso quer dizer.:

<script type="text/javascript">
   $('#btn').click(function() {
        $('.nav').toggleClass('nav-min');
   });
</script>

Está primeiro do que.:

<nav class="nav">
   <button class="btn btn-menu" id="btn">Menu</button>     
</nav>

Por isso não está a funcionar.
2 maneiras de ultrapassar

  1. Colocar o script no fim da pasta
  2. Alterar para.:

    <script type="text/javascript">
      $(document).ready(function(){
         $('#btn').click(function() {
            $('.nav').toggleClass('nav-min');
         });
      });
    </script>
    
1
  • Muito obrigado a todos que ajudaram, deu certo :P 4/05/2016 às 13:42

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 .