<!-- Increment the  data-level="N" for CATEGORY and SUB-NAV-RETURN elements -->

<section id="mobile-navigation-wrapper" class="hidden-md hidden-lg">
	<button id="open-navigation"><img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png" alt="" /></button>
	<div id="mobile-navigation" class="mobile-only">
		<button id="close-navigation">Close Navigation</button>
		<h2>FILTERS</h2>
		<div id="mobile-navigation-scroll-wrapper">
			<ul class="categories nav">
				<li><a href="#" class="category" data-level="1" aria-expanded="false">Menu Item 1 <span class="icon">&#10093;</span></a>
					<ul class="sub-categories">
						<li><a href="#" class="sub-nav-return" data-level="1"><span class="icon">&#10092;</span> Menu Item 1</a></li>
						<li><a href="#">Menu Item 1.1</a></li>
						<li><a href="#">Menu Item 1.2</a></li>
						<li><a href="#">Menu Item 1.3</a></li>
					</ul>
				</li>
				<li><a href="#" class="category" data-level="1" aria-expanded="false">Menu Item 2 <span class="icon">&#10093;</span></a>
					<ul class="sub-categories">
						<li><a href="#" class="sub-nav-return" data-level="1"><span class="icon">&#10092;</span> Menu Item 2</a></li>
						<li><a href="#">Menu Item 2.1</a></li>
						<li><a href="#">Menu Item 2.2</a></li>
						<li><a href="#">Menu Item 2.3</a></li>
					</ul>
				</li>
				<li><a href="#" class="category" data-level="1" aria-expanded="false">Menu Item 3 <span class="icon">&#10093;</span></a>
					<ul class="sub-categories">
						<li><a href="#" class="sub-nav-return" data-level="1"><span class="icon">&#10092;</span> Menu Item 3</a></li>
						<li><a href="#">Menu Item 3.1</a></li>
						<li><a href="#">Menu Item 3.2</a></li>
						<li><a href="#">Menu Item 3.4</a></li>
						<li>
							<a href="#" class="category" data-level="2" aria-expanded="false">Menu Item 3.4 <span class="icon">&#10093;</span></a>
							<ul class="sub-categories">
								<li><a href="#" class="sub-nav-return" data-level="2"><span class="icon">&#10092;</span> Menu Item 3.4</a></li>
								<li><a href="#">Menu Item 3.4.1</a></li>
								<li><a href="#">Menu Item 3.4.2</a></li>
								<li><a href="#">Menu Item 3.4.3</a></li>
								<li>
									<a href="#" class="category" data-level="3" aria-expanded="false">Menu Item 3.4.3 <span class="icon">&#10093;</span></a>
									<ul class="sub-categories">
										<li><a href="#" class="sub-nav-return" data-level="3"><span class="icon">&#10092;</span> Menu Item 3.4.3</a></li>
										<li><a href="#">Menu Item 3.4.3.1</a></li>
										<li><a href="#">Menu Item 3.4.3.2</a></li>
										<li><a href="#">Menu Item 3.4.3.3</a></li>
										<li><a href="#">Menu Item 3.4.3.4</a></li>
									</ul>
								</li>
							</ul>
						</li>
					</ul>
				</li>
				<li><a href="#">Menu Item 4</a></li>
			</ul>
		</div>
	</div>
</section>
*{
  box-sizing: border-box;
}

#open-navigation {
	background-color: #1e7266;
	border: 0 none;
	color: #ffffff;
	display: block;
	margin: 0 auto;
	padding: 10px 50px;
	
	img {
		filter: invert(100%);
		height: 24px;
		width: 24px;
	}
}

#mobile-navigation {
  background-color: #ffffff;
  bottom: 0;
  height: 100vh;
	left: -9999999px;
	letter-spacing: 2px;
  overflow-y: auto;
  position: fixed;
  right: 0;
	text-align: center;
  top: 0;
  width: 100%;
  z-index: 100;
	
  animation: showMenu .5s;
	
	&.filters-active {
		left: 0;
	}
  
	#close-navigation {
		background-color: transparent;
		border: 0 none;
		color: white;
		cursor: pointer;
		float: right;
		height: 24px;
		right: 10px;
		position: relative;
		text-indent: -999999px;
		top: 10px;
		width: 24px;
		z-index: 1;

		&::after,
		&::before {
			content: " ";
			display: block;
			left: 0;
			position: absolute;
			width: 100%;
		}
		&::before {
			border-top: 1px solid #ffffff;
			top: 50%;
			transform: rotate(45deg);
		}
		&::after {
			border-bottom: 1px solid #ffffff;
			top: 50%;
			transform: rotate(-45deg);
		}
	}
	
  h2 {
    background-color: #3e464b;
    color: #ffffff;
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 2px;
    line-height: 24px;
    margin: 0;
    padding: 10px 0;
    text-align: center;
    width: 100%;
  }
  
  &.not-active {
    display: none;
  }
  #mobile-navigation-scroll-wrapper {
    overflow-y: auto;
		position: relative;
		width: 100%;
  }
	
  ul.categories.nav {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    
    &.active {
      left: -100%;
      transition: all 1s;
    }
    
    li {
      background-color: #fff;
      border-bottom: solid 2px #e2f4fd;
      
      a {
				color: #3e464b;
        display: block;
        padding: 15px;
				position: relative;
				text-decoration: none;
				
				.icon {
					display: inline-block;
					color: red;
					margin-left: 20px;
				}

				&.sub-nav-return {
					background-color: #e2f4fd;
					font-size: 12px;
					padding: 8px 0;
					
					.icon {
						margin-right: 20px;
					}
				}
      }
      
      ul.sub-categories {
        display: none;
        padding: 0;
        position: absolute;
        right: -100%;
        top: 0;
        width: 100%;
        z-index: 1;
        
        li {
          list-style: none;
          margin: 0;
          padding: 0;
					
					p {
						text-transform: none;
					}
        }
      }
    }
		a.iamalive + ul.sub-categories {
			display: block;
		}
  }
}

.categories.nav {
	text-transform: uppercase;
}

/* Standard syntax */ 
@keyframes showMenu {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
View Compiled
$("#open-navigation").on("click", function() {
	$("#mobile-navigation").addClass("filters-active");
	$(this).addClass("filters-activated");
	var navTop = $("#mobile-navigation h2").outerHeight();
	$("#mobile-navigation-scroll-wrapper").css({ "height": $(window).height() - navTop });
});

$("#close-navigation").on("click", function() {
	$("#mobile-navigation").removeClass("filters-active");
	$(".iamalive").removeClass("iamalive");
	$("ul.nav.categories").css("left", "");
	$("#mobile-navigation-scroll-wrapper").removeAttr("style");
	$("#open-navigation").removeClass("filters-activated");
});

$("a.category").on("click",function(e){
  e.preventDefault();
  $(this).addClass("iamalive");
	$(this).attr("aria-expanded","true")
  $("ul.nav.categories").animate({
    left: "-" + $(this).data("level") * 100 + "%"
  },350, "linear");
});

$("a.sub-nav-return").on("click",function(e){
  e.preventDefault();
	var parentHider = $(this).closest(".sub-categories").prev(".category.iamalive");
  $("ul.nav.categories").animate({
    left: "-" + ($(this).data("level") - 1) * 100 + "%"
  },350, "linear");
	setTimeout(function(){
		$(parentHider).removeClass("iamalive").attr("aria-expanded","false");
		parentHider = null;
	},500);
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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