Как реализовать такое меню c помощью absolute?

$('.show-text-btn').click(function() {
  $(".show-text").slideToggle({});
});


$.fn.extend({


  threeBarToggle: function(options) {

    // Set the default options
    var defaults = {
      color: 'black',
      width: 30,
      height: 25,
      speed: 400,
      animate: true
    }
    var options = $.extend(defaults, options);

    return this.each(function() {

      $(this).empty().css({
        'width': options.width,
        'height': options.height,
        'background': 'transparent'
      });
      $(this).addClass('tb-menu-toggle');
      $(this).prepend('<i></i><i></i><i></i>').on('click', function(event) {
        event.preventDefault();
        $(this).toggleClass('tb-active-toggle');
        if (options.animate) {
          $(this).toggleClass('tb-animate-toggle');
        }
        $('.tb-mobile-menu').slideToggle(options.speed);
      });
      $(this).children().css('background', options.color);
    });
  },


  accordionMenu: function(options) {

    // Set the default options
    var defaults = {
      speed: 400
    }
    var options = $.extend(defaults, options);

    return this.each(function() {

      $(this).addClass('tb-mobile-menu');
      var menuItems = $(this).children('li');
      menuItems.find('.sub-menu').parent().addClass('tb-parent');
      $('.tb-parent ul').hide();
      $('.tb-parent > a').on('click', function(event) {
        event.stopPropagation();
        event.preventDefault();
        $(this).siblings().slideToggle(options.speed);
      });

    });
  }
});

$('#menu-toggle').threeBarToggle({
  color: 'rgba(65, 65, 65, 0.8)',
  width: 30,
  height: 25
});


$('#menu').accordionMenu();

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.tb-menu-toggle {
  border: 0;
  position: relative;
  background: transparent;
  cursor: pointer;
  margin-left: 13px;
  margin-top: 13px;
}

.tb-menu-toggle i {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20%;
  -webkit-transition: all .2s;
  -moz-transition: all .2s;
  -o-transition: all .2s;
  transition: all .2s;
}

.tb-menu-toggle i:nth-child(2) {
  top: 40%;
}

.tb-menu-toggle i:nth-child(3) {
  top: 80%;
}

.tb-menu-toggle.tb-active-toggle i {}

.tb-menu-toggle.tb-animate-toggle i:first-child,
.tb-menu-toggle.tb-animate-toggle i:nth-child(2) {
  top: 40%;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.tb-menu-toggle.tb-animate-toggle i:nth-child(3) {
  top: 40%;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#menu {
  display: none;
}

.top-menu {
  width: 100%;
  height: 70px;
  background: #FF6666;
  display: flex;
  justify-content: flex-end;
}

.menu {
  widht: 100%;
  height: 100%;
  background: #9999FF;
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="top-menu">
  <div class="burger">
    <h3 id="menu-toggle"></h3>
    <ul id="menu" class="menu">
      <li><a href="/">Home</a></li>
      <li><a href="#about">About Us</a></li>
      <li><a href="#services">Our Services</a></li>
      <li><a href="#clients">Our Clients</a></li>
      <li><a href="#contact">Contact Us</a></li>
    </ul>
  </div>
</div>