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

Asked

Viewed 1,368 times

7

I have a menu hamburguer which opens from left to right however, I would like it to open backwards, from right to left, as I do this?

Next down my code:

/*
* 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>

javascript html css css3

3 answers

4

I believe adding the position in right:0 and the translate in 100% your problem will be solved, as suggested also by @Brunoromualdo, put the position in 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>

Example of code in Jsfiddle

  • 1

    I believe that it is better to use the editor that the OS provides itself, not being necessary to open another page to view the code working.

  • @Felipepaetzold Thank you for the suggestion, amended answer.

1

With just a few changes in your css you can do this:

Just put a right:0 (for the menu to be on the right) and then the position:fixed (the side scrollbar is not displayed):

  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 full code for you 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>

  • I pressed a wrong boot and I messed up the whole answer, but I’m done.

  • I believe that it is better to use the editor that the OS provides itself, not being necessary to open another page to view the code working.

  • Thanks @Felipe I had forgotten him already added in the example.

  • @Brunoromualdo this change from width 0 to 250 besides not being necessary is something horrible to do. The width change generates large amounts of recalculation and Paint in addition to being executed by the cpu. Just using Translate is enough and is the most correct since it does not generate large amounts of Paint and is run by gpu.

  • 1

    Thanks @Marioaleo already edited the reply.

0

Add a right: 60px; on the selector nav for the menu not to be on top of the button that opens the menu, because if the menu is 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 on the dial nav

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

Okay, problem solved!

Browser other questions tagged javascript html css css3

You are not signed in. Login or sign up in order to post.