How to make a burger menu open from right to left?

Navigation
7

I have a hamburguer menu that opens from left to right, however, I would like it to open up from the right to the left, how do I do this?

Following is my code below: 

/*
* 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>
    
asked by anonymous 13.12.2016 / 12:37

3 answers

4

I believe that by adding the position in right:0 and translate to% with% your problem will be solved, as also suggested by @BrounoRomualdo, put 100% in position . 

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>

Code sample in JSFiddle

    
13.12.2016 / 13:35
1

With just a few changes to your css already do it:

Just put a right:0 (for the menu to the right) and then the position:fixed (not to appear the side scroll bar): 

  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;
  }
Ready! follow the complete code to take a look. 

  /*
   * 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>
    
13.12.2016 / 13:36
0

Add one right: 60px; %% on the dial nav for the menu does not stay on top of the button that opens the menu because the menu stay on top of the button, it is impossible to click again to close the menu. And after that take the negative of the following lines that is in the nav selector 

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

Ready, problem solved!

    
14.12.2016 / 01:20
Centralized Menu Clone functions deeply