7

Tenho um menu hamburguer que abre da esquerda para a direta entretanto, gostaria que ela abrisse ao contrário, da direita para a esquerda, como faço isso?

Seguinte abaixo o meu código:

/*
* Open the drawer when the menu ison is clicked.
*/
var menu = document.querySelector('#menu');
var main = document.querySelector('main');
var drawer = document.querySelector('#drawer');

menu.addEventListener('click', function(e) {
  drawer.classList.toggle('open');
  e.stopPropagation();
});
main.addEventListener('click', function() {
  drawer.classList.remove('open');
});
html, body {
  height: 100%;
  width: 100%;
  margin: 0px;
}
a#menu svg {
  width: 40px;
  fill: #000;
}
nav, main {
  padding: 1em;
  box-sizing: border-box;
}
main {
  width: 100%;
  height: 100%;
}

#drawer {
  background-color: rgba(219, 219, 224, 0.27);
}

#menu {
  float: right
}


/*
* Off-canvas layout styles.
*/

/* Since we're mobile-first, by default, the drawer is hidden. */
nav {
  width: 250px;
  height: 100%;
  position: absolute;
  /* This trasform moves the drawer off canvas. */
  -webkit-transform: translate(-450px, 0);
  transform: translate(-450px, 0);
  /* Optionally, we animate the drawer. */
  transition: transform 0.3s ease;
}
nav.open {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}
<body>
    <nav id="drawer" class="dark_blue">
     
	
	<ul>
	<a href="http://www.ufrgs.br/termisul/">Home</a>
	<a href="http://www.ufrgs.br/termisul/termisul/">Termisul</a>
	<a href="http://www.ufrgs.br/termisul/equipe-termisul/">Equipe</a>
	<a href="http://www.ufrgs.br/termisul/contato/">Contato</a>
	</ul>
	 
	 
    </nav>

    <main class="light_blue">
      <a id="menu">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path d="M2 6h20v3H2zm0 5h20v3H2zm0 5h20v3H2z"/>
        </svg>
      </a>
    </main>
</body>

3 Respostas 3

4

Acredito que adicionando a posição em right:0 e o translate em 100% seu problema será resolvido, como sugerido também pelo @BrunoRomualdo, coloque a position em fixed.

var menu = document.querySelector('#menu');
var main = document.querySelector('main');
var drawer = document.querySelector('#drawer');

menu.addEventListener('click', function(e) {
  drawer.classList.toggle('open');
  e.stopPropagation();
});
main.addEventListener('click', function() {
  drawer.classList.remove('open');
});
html, body {
  height: 100%;
  width: 100%;
  margin: 0px;
}
a#menu svg {
  width: 40px;
  fill: #000;
}
nav, main {
  padding: 1em;
  box-sizing: border-box;
}
main {
  width: 100%;
  height: 100%;
}

#drawer {
  background-color: rgba(219, 219, 224, 0.27);
}

#menu {
  float: right
}

nav {
  width: 250px;
  height: 100%;
  position: fixed; /* Evitar que apareça a barra de rolagem */
  right: 0; /* Adionando para manter o elemento a direita */
  -webkit-transform: translate(100%, 0);
  transform: translate(100%, 0);
  transition: transform 0.3s ease;
}

nav.open {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}
<body>
    <nav id="drawer" class="dark_blue">
     
	
	<ul>
	<a href="http://www.ufrgs.br/termisul/">Home</a>
	<a href="http://www.ufrgs.br/termisul/termisul/">Termisul</a>
	<a href="http://www.ufrgs.br/termisul/equipe-termisul/">Equipe</a>
	<a href="http://www.ufrgs.br/termisul/contato/">Contato</a>
	</ul>
	 
	 
    </nav>

    <main class="light_blue">
      <a id="menu">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path d="M2 6h20v3H2zm0 5h20v3H2zm0 5h20v3H2z"/>
        </svg>
      </a>
    </main>
</body>

Exemplo do código no JSFiddle

2
  • 1
    Acredito que seja melhor utilizar o próprio editor que o SO disponibiliza, não sendo necessário abrir outra página para visualizar o código funcionando. 13/12/2016 às 13:05
  • @FelipePaetzold Obrigado pela sugestão, resposta alterada. 13/12/2016 às 13:12
1

Com apenas umas alterações no seu css já da pra fazer isso:

Basta colocar um right:0 (para o menu ficar a direita) e depois o position:fixed (para não aparecer a barra de rolagem lateral):

  nav {
    width: 250px;
    height: 100%;
    right:0;
    position: fixed;
    -webkit-transform: translate(450px, 0); // Tire o tranlsate negativo aqui pois sera o contrario
    transform: translate(450px, 0); // Aqui tambem
    transition: transform 0.3s ease;
  }

Pronto! segue o código completo pra você dar uma olhada.

  /*
   * Open the drawer when the menu ison is clicked.
   */
  var menu = document.querySelector('#menu');
  var main = document.querySelector('main');
  var drawer = document.querySelector('#drawer');

  menu.addEventListener('click', function(e) {
    drawer.classList.toggle('open');
    e.stopPropagation();
  });
  main.addEventListener('click', function() {
    drawer.classList.remove('open');
  });
html, body {
    height: 100%;
    width: 100%;
    margin: 0px;
  }
  a#menu svg {
    width: 40px;
    fill: #000;
  }
  nav, main {
    padding: 1em;
    box-sizing: border-box;
  }
  main {
    width: 100%;
    height: 100%;
  }

  #drawer {
     background-color: rgba(219, 219, 224, 0.27);
  }

  #menu {
    float: right;
  }

  nav {
    width: 250px;
    height: 100%;
    right:0;
    position: fixed;
    -webkit-transform: translate(450px, 0);
    transform: translate(450px, 0);
    transition: transform 0.3s ease;
  }
  nav.open {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
<body>
<nav id="drawer" class="dark_blue">


<ul>
<a href="http://www.ufrgs.br/termisul/">Home</a>
<a href="http://www.ufrgs.br/termisul/termisul/">Termisul</a>
<a href="http://www.ufrgs.br/termisul/equipe-termisul/">Equipe</a>
<a href="http://www.ufrgs.br/termisul/contato/">Contato</a>
</ul>


</nav>

<main class="light_blue">
  <a id="menu">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path d="M2 6h20v3H2zm0 5h20v3H2zm0 5h20v3H2z"/>
    </svg>
  </a>
</main>

5
  • Apertei um botao errado e zuei toda a resposta sem querer mas já arrumei. 13/12/2016 às 12:46
  • Acredito que seja melhor utilizar o próprio editor que o SO disponibiliza, não sendo necessário abrir outra página para visualizar o código funcionando. 13/12/2016 às 12:50
  • Obrigado @Felipe havia me esquecido dele já adicionei no exemplo. 13/12/2016 às 12:57
  • @BrunoRomualdo essa alteração de width 0 para 250 além de não ser necessária é algo horrível de se fazer. A alteração de width gera grandes quantidades de recalculo e paint além de ser executada pela cpu. Apenas a utilização do translate já é o suficiente e é o mais correto uma vez que ele não gera grandes quantidades de paint e é executado pela gpu.
    – MarioAleo
    14/12/2016 às 11:41
  • 1
    Obrigado @MarioAleo já editei a resposta. 19/12/2016 às 13:31
0

Adicione um right: 60px; no seletor nav para o menu não ficar em cima do botão que abre o menu, pois se o menu ficar em cima do botão, fica impossível clicar novamente para fechar o menu. E após isso tire o negativo das seguintes linhas que se encontra no seletor nav

-webkit-transform:translate(450px, 0);
transform: translate(450px, 0);

Pronto, problema resolvido!

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 .