Expand Navigation Menu Using HTML CSS

<div class="toggle"></div>
  <div class="overlay"></div>
  <div class="menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About us</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact us</a></li>
      
    </ul>
  </div>

body { margin:0; padding:0; font-family: sans-serif; background: url(https://images.pexels.com/photos/7362/startup-photos.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940) no-repeat; background-size: cover; }
    .toggle { position:fixed; top:20px; cursor: pointer; right:20px; width:40px; height:40px; border-radius:40px; background:#000; z-index:99;}
    .toggle:before { content:'+'; position:absolute; top:0; left:0; font-size:38px; color:#fff; width:100%; height:100%; line-height:40px; text-align:center;
      border-radius:40px; background:#000; transition:0.5s; font-weight:500;  }
    .toggle.active:before { transform:rotate(405deg); background:#03a9f4;}
    .overlay { position:fixed; z-index:1; top:20px; right:20px; width:40px; height:40px; border-radius:40px; background:#000000d9; transition:transform 0.3s; }
    .overlay.active { transform: scale(100, 100);}
    .menu { width: 100%; height: 100%; overflow: auto; z-index: 1; visibility: hidden; }
    .menu.active { visibility: visible; transition-delay: .5s;}
    .menu ul { position: absolute; top:30%; left: 50%; transform: translate(-50%); margin: 0; padding: 0; z-index: 9; }
    .menu ul li { list-style: none; margin: 15px 0px;}
    .menu ul li a { position: relative; font-size: 2.8em; color: #fff; display: block; font-weight: bold; text-decoration: none;}
    .menu ul li a:before { content: ''; position: absolute; width: 	100%; height: 15px; left:-5px; bottom: 5px; background: #03a9f4; z-index: -1;
    transform: scaleX(0); transform-origin: left; transition: transform 0.5s; }
    .menu ul li a:hover:before { transform:scaleX(1);}

$(document).ready(function(){
      $('.toggle').click(function(){
        $('.toggle').toggleClass('active');
        $('.overlay').toggleClass('active');
        $('.menu').toggleClass('active');
      });
    });