Currently, I am in the process of developing a menu that seems to have some flaws. One issue is that it appears a bit choppy, but the more concerning problem is the half-second delay after clicking an item before it animates.
The concept behind this menu is that inactive menus are positioned off-screen to the right (right: -200px). When you click on any item, all "active" items will shift 20px to the left and activate the target menu.
Overall, the functionality is quite simple, but I am struggling to pinpoint the cause of the delay and choppiness.
$('.rmenu').on('click', '.item', function() {
var targetid = $(this).data('target-id');
var targetelement = $('#' + targetid);
console.log('Clicked ' + targetid);
if ($(this).data('target-type') === 'menu' && !targetelement.hasClass('active')) { //if target is a submenu and it's not already active
$('.active').animate({
'right': '+=20px'
}); //move all "active" menus to the left a bit (stack behind)
targetelement.addClass('active').animate({
'right': '0px'
}); //make new submenu active
}
});
$('.rmenu').on('click', '.back', function() {
var parentid = $(this).parent().data('parent-id');
$(this).parent().parent().removeClass('active').css('right', '-200px');
$('.active').animate({
'right': '-=20px'
});
})body {
background-color: darkgray;
overflow: hidden;
}
#menu {
position: absolute;
bottom: 0;
right: 0;
width: 300px;
}
.rmenu {
position: absolute;
right: -200px;
bottom: 0;
width: 200px;
transition: .2s;
border: 1px solid gray;
}
.rmenu.active {
right: 0;
}
.rmenu div {
background-color: white;
border-bottom: 1px solid gray;
}
.rmenu div:last-child {
border: none;
}
.rmenu .title {
text-align: center;
padding: 5px;
color: gray;
}
.rmenu .item {
padding: 3px;
cursor: pointer;
}
.rmenu .back {
padding-right: 5px;
cursor: pointer;
}
.rmenu .submenu-indicator {
float: right;
padding-right: 5px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
<!--main menu-->
<div id="home" class="rmenu active">
<div class="title">
<span>Home</span>
</div>
<div data-target-id="items" data-target-type="menu" class="item">
<span class="label">Items</span><span class="submenu-indicator">></span>
</div>
<div class="item">
<span class="label">Social</span>
</div>
<div class="item">
<span class="label">Settings</span>
</div>
</div>
<!--items menu-->
<div id="items" class="rmenu" data-parent-id="home">
<div class="title">
<span class="back"><</span><span>Items</span>
</div>
<div class="item" data-target-id="tables" data-target-type="menu">
<span class="label">Tables</span><span class="submenu-indicator">></span>
</div>
<div class="item">
<span class="label">Lamps</span>
</div>
<div class="item">
<span class="label">Chairs</span>
</div>
</div>
<!--tables menu-->
<div id="tables" class="rmenu" data-parent-id="items">
<div class="title">
<span class="back"><</span><span>Tables</span>
</div>
<div class="item">
<span class="label">1</span>
</div>
<div class="item">
<span class="label">2</span>
</div>
<div class="item">
<span class="label">3</span>
</div>
<div class="item">
<span class="label">4</span>
</div>
<div class="item">
<span class="label">5</span>
</div>
<div class="item">
<span class="label">6</span>
</div>
</div>
</div>