Skip to content

Instantly share code, notes, and snippets.

@JWardee JWardee/index.html
Created Jun 9, 2015

Embed
What would you like to do?
Multi level mobile menu
<nav id="mobile_menu">
<div class="level _show" id="1">
<a href="#11">Link 1 <i class="ion-ios-arrow-right -icon"></i></a>
<a href="/about">Link 2</a>
<a href="/about">Link 3</a>
<a href="/about">Link 4</a>
<a href="/about">Link 5</a>
</div>
<div class="level" id="11">
<a href="#1"><i class="-back -icon ion-ios-arrow-thin-left"></i> Back</a>
<a href="/about">Link 1</a>
<a href="/about">Link 2</a>
<a href="/about">Link 3</a>
<a href="/about">Link 4</a>
</div>
</nav>
$(function() {
$('#mobile_menu .level > a').on('click', function() {
var id = $(this).attr('href');
if (id.charAt(0) == '#') {
$('#mobile_menu .level._show').removeClass('_show');
$(id).addClass('_show');
return false;
}
});
});
#mobile_menu {
.level {
@include cross-browser(transition, all .5s);
position: relative;
left: 100%;
right: -100%;
&._show {
right: 0;
left: 0;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.