<div class="menu-row">
  <div class="menu-info">
    <h1>Multi level slide menu</h1>
    <p>Dynamic multi level slide menu for desktop and mobile. Resize your browser.</p>
  </div>
  <div class="menu-box">
    <a href="#" class="logo">
      <img src="https://camo.githubusercontent.com/370291c50b74eeab6fe66ccc9e6ca410fc117ed9/687474703a2f2f7069676d656e742e6769746875622e696f2f66616b652d6c6f676f732f6c6f676f732f766563746f722f636f6c6f722f7468652d7765622d776f726b732e737667" alt="">
    </a>
    <div id="mainmenu">
      <ul class="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a>
          <ul class="submenu">
            <li><a href="#">Web Design</a>
              <ul class="submenu">
                <li><a href="#">Photoshop</a></li>
                <li><a href="#">Illustrator</a></li>
              </ul>
            </li>
            <li><a href="#">Web Development</a></li>
            <li><a href="#">SEO</a></li>
          </ul>
        </li>
        <li><a href="#">Product</a>
          <ul class="submenu">
            <li><a href="#">Product 1</a></li>
            <li><a href="#">Product 2</a></li>
            <li><a href="#">Product 3</a></li>
          </ul>
        </li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</div>

$font : 'Open Sans', sans-serif;
$color1: #333;
$color2: #ff5252;
$color3: #d3d3d3;
$color4: #2e58d0;
$color5: #ffe400;
$color-white: #ffffff;
$transition: 350ms all;
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.menu-row {
  max-width: 1000px;
  padding: 25px;
  margin: 0 auto;
  font-family: $font;
  .menu-info {
    margin-bottom: 30px;
    font-size: 16px;
    h1 {
      margin: 0 0 20px;
      font-size: 30px;
    }
  }
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  li {
    font-size: 18px;
    a {
      text-decoration: none;
      color: $color-white;
      padding: 10px;
      display: inline-block;
      transition: $transition;
      &:hover {
        color: $color5;
      }
    }
  }
}
.menu-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background: $color4;
  position: relative;
  .logo {
    max-width: 140px;
    img {
      width: 100%;
    }
  }
}
.menu {
  display: flex;
  flex-wrap: wrap;
}
.menu li {
  margin-right: 25px;
}

// Responsive media Queries for mobile menu
@media only screen and (min-width: 1024px){
  .menu {
    display: flex !important;
    .megamenu {
      > a {
        //position: relative;
        &:after {
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          top: 100%;
          height: 28px;
          display: none;
        }
        &:hover:after {
          display: block;
        }
      }
    }
    li {
      .submenu {
        transition: $transition;
      }
      &:hover {
        > .submenu {
          transform: translateY(0);
          opacity: 1;
          visibility: visible;
        }
      }
      &.megamenu {
        > a {
          padding-right: 20px;
          position: relative;
          &:before {
            content: "";
            position: absolute;
            right: 0;
            top: 17px;
            height: 5px;
            width: 5px;
            border-right: 2px solid $color-white;
            border-bottom: 2px solid $color-white;
            transform: rotate(45deg);
          }
        }
      }
      .submenu {
        position: absolute;
        top: 100%;
        transform: translateY(50px);
        opacity: 0;
        visibility: hidden;
        background: $color1;
        li {
          margin-right: 0;
          font-size: 16px;
          position: relative;
          a {
            color: $color-white;
            padding: 10px 20px;
            background: $color1;
            display: block;
            &:before {
              right: 15px;
              transform: rotate(-45deg);
            }
            &:hover {
              background: $color2;
            }
          }
        }
        .submenu {
          position: absolute;
          left: 100%;
          top: 0;
        }
      }
    }
  }
}
@media only screen and (max-width: 1023px){
  #menu_trigger {
    height: 22px;
    width: 30px;
    display: inline-block;
    .menulines {
      margin-top: 9px;
      position: relative;
      display: block;
      &, &:before, &:after {
        content: "";
        height: 2px;
        width: 30px;
        border-radius: 5px;
        background: $color-white;
      }
      &:before, &:after {
        position: absolute;
        left: 0;
      }
      &:before {
        top: -9px;
      }
      &:after {
        top: 9px;
      }
    }
  }
  .mobile-menu {
    display: block;
    position: fixed;
    left: 0;
    right:0;
    top: 0;
    bottom: 0;
    background: $color1;
    overflow: hidden;
    transform: translateX(100%);
    transition: 0.35s all ease;
    &.shown{
       transform: translateX(0);
    }
    ul {
      transition: $transition;
      display: block;
    }
    li {
      margin: 0;
      border-bottom: 1px solid lighten( $color1, 5% );
      font-size: 16px;
      a {
        color: $color-white;
        display: block;
        position: relative;
        padding: 15px 20px;
        &:hover {
          color: $color2;
        }
        .navtrigger {
          position: absolute;
          right: 0;
          top: 0;
          bottom: 0;
          width: 30px;
          background: lighten( $color1, 4% );
          border: 1px solid lighten( $color1, 5% );
          &:before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            height: 8px;
            width: 8px;
            border-right: 2px solid $color-white;
            border-bottom: 2px solid $color-white;
            transform: translate(-50%, -50%) rotate(-45deg);
          }
        }
      }
      .submenu {
        position: absolute;
        top: 0;
        left: 100%;
        width: 100%;
        background: $color1;
        height: 100%;
        transition: $transition;
        z-index: 1;
        li {
          font-size: 14px;
        }
        .backmenu-row {
          position: relative;
          padding: 20px;
          padding-left: 50px;
          background: $color1;
          font-size: 16px;
          .back-trigger {
            padding: 0;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 30px;
            display: block;
            background: lighten( $color1, 4% );
            border: 1px solid lighten( $color1, 5% );
            &:before {
              content: "";
              position: absolute;
              top: 50%;
              left: 50%;
              height: 8px;
              width: 8px;
              border-right: 2px solid $color-white;
              border-bottom: 2px solid $color-white;
              transform: translate(-50%, -50%) rotate(135deg);
            }
          }
          em {
            font-style: normal;
            color: $color-white;
          }
        }
      }
      &.sub-open {
        > .submenu {
          left: 0;
        }
      }
    }
  }
}

$(document).ready(function(){
  // Add class on parent which 'li' children has submenu
  $('ul.submenu').parents('li').addClass('megamenu');
  
  //Menu ICon Append prepend for responsive
  $(window).on('resize', function(){
    if ($(window).width() < 1024) {
      if(!$('#menu_trigger').length){
        $('#mainmenu').prepend('<a href="#" id="menu_trigger" class="menulines-button"><span class="menulines"></span></a>');
      }
      if(!$('.navtrigger').length){
        $('.megamenu > a').append('<span class="navtrigger"></span>')
      }
      if(!$('.mobile-menu').length){
        $('.menu').wrap('<div class="mobile-menu"></div>')
      }
      if(!$('.submenu > .backmenu-row').length){
        $('.submenu').each(function(){
          var subvalue = $(this).prev('a').text();
          //$(this).prepend('<a href="#" class="back-trigger">'+subvalue+'</a>');
          $(this).prepend('<div class="backmenu-row"><a href="#" class="back-trigger"></a><em>'+subvalue+'</em></div>');
        });
      }
    } else {
      $("#menu_trigger").remove();
      $('.navtrigger').remove();
      $('.menu').unwrap('.mobile-menu');
      $('.back-trigger').remove();
      $('.back-trigger').remove();
    }
  }).resize();
  
  
  // Mobile menu on click open
  $(document).on('click',"#menu_trigger", function(){
    if($('.megamenu').hasClass("sub-open")){
      $('.megamenu ').removeClass('sub-open');
      $('.mobile-menu').toggleClass('shown');
      $(this).toggleClass('menuopen');
    } else {
      $(this).toggleClass('menuopen');
      $(this).next('.mobile-menu').toggleClass('shown');
    }
    return false;
  });
  
  // While open submenu add class
  $(document).on('click', '.navtrigger', function(){
    $(this).parents('li').addClass('sub-open');
    return false;
  })
  
  // Back to menu in mobile
  $(document).on('click', '.back-trigger', function(){
    $(this).closest('li').removeClass('sub-open');
    return false;
  })
  
  
})