Includes HTML, SCSS, JS

Basic Burger Menu

<nav class="nav-links">
  <button class="menu-btn" type="button" aria-label="Menu" aria-controls="navigation" >
    <span class="menu-btn__block">
      <span class="menu-btn__inner"></span>
    </span>
  </button>
  <ul>
    <li><a href="#">Menu item #1</a></li>
    <li><a href="#">Menu item #2</a></li>
    <li><a href="#">Menu item #3</a></li>
    <li><a href="#">Menu item #4/a></li>
  </ul>
</nav>

nav.scss

// SCSS
body.nav-is-active {
  overflow: hidden;
}

.nav-links {
  --textColor: #242526;
  --background-color: white;
  --sizeSmall: 16px;
  --sizeMedium: 24px;
  
  ul {
    margin: 0;
    display: flex;
    li { 
      text-align: left;
      list-style: none;
      padding: 0 var(--sizeSmall);
    }
  }

  &.is-active {
    padding: var(--sizeMedium);
    box-sizing: border-box;
    width: 100%;
    position: fixed;
    top:0;
    margin:0;
    left:0;
    background: white;
    height: 100%;
    z-index: 1;
    display: grid;
    grid-template-rows: auto 1fr;
    ul {
      margin:-52px 0 0 0;
      padding:0;
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      align-items: flex-start;
      align-content:  center;
      height: 100%;
      li {
        width: 100%;
        padding: var(--sizeSmall) 0;
        text-align: center;
        list-style: none;
      }
    }
  
    a {
      font-size: em(32);
      padding: 8px;
    }
  }
}

.menu-btn {
  display: none;
  margin: 0;
  padding:0;
  overflow: visible;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  border: 0;
  background-color: transparent;
  color: inherit;
  font-size: 0;
  text-transform: none;
  cursor: pointer;
  
  .menu-btn__inner {
    transition-duration: 0.075s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    &::before {
      transition: top 0.075s 0.12s ease, opacity 0.075s ease;
    }
    &::after {
      transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
  }

  &.is-active {
    display: inline-block;
    justify-self: end;

    .menu-btn__inner {
      transform: rotate(45deg);
      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      transition-delay: 0.12s;
      &::before {
        top: 0;
        transition: top 0.075s ease, opacity 0.075s 0.12s ease;
        opacity: 0;
      }
      &::after {
        bottom: 0;
        transform: rotate(-90deg);
        transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
      }
    }
  }
}

.menu-btn__block {
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
}

.menu-btn__inner {
  display: block;
  top: 50%;
  transform: translateY(-50%);

  &,
  &::before,
  &::after {
    position: absolute;
    width: 24px;
    height: 2px;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease;
    background-color: var(--textColor);
  }

  &::before,
  &::after {
    content: "";
    display: block;
  }

  &::before {
    top: (3px + 3px) * -1;
  }

  &::after {
    bottom: (3px + 3px) * -1;
  }
}

/* -------------------------------------------- */

@media (max-width: 700px) {
  .menu-btn {
    display: block;
  }
  .nav-links ul {
    display: none;
  }
}

navscript.js

const burger = document.querySelector(".menu-btn");
const navLinks = document.querySelector(".nav-links");
const bodyScroll = document.body;

burger.addEventListener("click", () => {
  burger.classList.toggle('is-active');
  navLinks.classList.toggle("is-active");
  bodyScroll.classList.toggle("nav-is-active");
});