1

Estou tentando fazer um Side Navigation, então em pesquisa na internet, achei um tutorialzinho no site: How TO - Side Navigation

Porém, no meu exemplo queria que um unico botão abrisse, e fechasse, então fiz as seguintes modificações:

function closeNav()
{    
    if (document.getElementById("mySidenav").style.width < 250)
    {
        document.getElementById("mySidenav").style.width = "250px";
    }
    else
    {
        document.getElementById("mySidenav").style.width = "40px";
    }  
}

Mas, ele so funciona uma vez, ou seja, ele abre e fecha depois não funciona mais.

3
  • Onde é que tem Java aí?
    – Jéf Bueno
    Commented 1/12/2016 às 11:55
  • Você pode fazer um exemplo no JSFiddle?
    – BrTkCa
    Commented 1/12/2016 às 11:56
  • 1
    Nunca faça a side-nav aparecer e desaparecer através da alteração do width, use o css translateX do transform. Quando você faz a alteração da width você gera vários Paints custosos que são feitos pela CPU, se você usar translateX você terá Paints extremamente leves executados pela GPU.
    – MarioAleo
    Commented 1/12/2016 às 12:13

1 Resposta 1

5

O valor que .style.width retorna é uma string. Tens de usar um conversor de tipo para teres um numero e usar o operador <.

Podias fazer isso assim:

function closeNav() {
    var sideNav = document.getElementById("mySidenav");
    if (parseInt(sideNav.style.width) < 250) {
        sideNav.style.width = "250px";
    } else {
        sideNav.style.width = "40px";
    }
}
2
  • Amigo, funcionou perfeitamente, porém, para funcionar a primeira vez, tenho que clicar duas vezes. sabe o porque? Commented 1/12/2016 às 12:25
  • @ThomasErichPimentel provavelmente porque esse elemento #mySidenav não tem um estilo definido de inicio. Somente no CSS não vai ser lido pelo .style.width. Testa colocar style="width: ..." no HTML. Se tiver percebido mal faz um jsFiddle para ser mais claro.
    – Sergio
    Commented 1/12/2016 às 13:34

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 .