<nav class="menu-mobile">
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="">Sobre</a></li>
    <li><a href="">Notícias</a></li>
    <li><a href="">Serviços</a></li>
    <li><a href="">Projetos</a></li>  
    <li><a href="">Contato</a></li>
  </ul>
</nav>

<span class="btn-menu">
  <span></span>
  <span></span>
  <span></span>
</span>
* {
  margin:0; 
  padding: 0;
  box-sizing: border-box;
  font-family: 'Arial';
}

.menu-mobile {
  width:270px;
  height:100%;
  background-color: #c00;
  position: fixed;
  overflow: hidden;
  overflox-y: auto;
  transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s; 
  -moz-transition-duration: 0.3s;
}

.menu-mobile ul li {
  font-size: 17px;
  display: block;
  border-bottom: 1px solid rgba(0,0,0,.1)
}

.menu-mobile ul li a {
  display: block;
  padding: 12px;
  text-decoration: none;
  color: #fff;
}

.menu-mobile ul li a:hover {
  background-color: rgba(0,0,0,.1);
}

.btn-menu {
  width: 45px;
  height: 40px; 
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 10px;
  background-color: #333;
  cursor: pointer;
  transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s; 
  -moz-transition-duration: 0.3s;
}

.btn-menu span {
  height: 3px;
  display: block;
  margin-bottom: 5px;
  background-color: #fff;
}

.menu-mobile {transform: translateX(-270px);}
.btn-menu {transform: translateX(0);}

.btn-menu-active .menu-mobile {
  transform: translateX(0);
}

.btn-menu-active .btn-menu {
  transform: translateX(280px);
  left: 0px;
}

$('.btn-menu').on('click touchstart', function () {
  $('html').toggleClass('btn-menu-active');
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js