<!-- 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">❭</span></a>
<ul class="sub-categories">
<li><a href="#" class="sub-nav-return" data-level="1"><span class="icon">❬</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">❭</span></a>
<ul class="sub-categories">
<li><a href="#" class="sub-nav-return" data-level="1"><span class="icon">❬</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">❭</span></a>
<ul class="sub-categories">
<li><a href="#" class="sub-nav-return" data-level="1"><span class="icon">❬</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">❭</span></a>
<ul class="sub-categories">
<li><a href="#" class="sub-nav-return" data-level="2"><span class="icon">❬</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">❭</span></a>
<ul class="sub-categories">
<li><a href="#" class="sub-nav-return" data-level="3"><span class="icon">❬</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;}
}$("#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);
});
External CSS
This Pen doesn't use any external CSS resources.