I am looking to implement a feature where clicking on the sidebar menu will reveal 2 submenus. Here is what I have implemented:
$(document).ready(function () {
$("[data-toggle]").click(function () {
var toggle_el = $(this).data("toggle");
$(toggle_el).toggleClass("open-sidebar");
});
$('.parent').click(function () {
$('.submenu').toggle('visible');
});
});
body, html {
height: 100%;
margin: 0;
overflow:hidden;
font-family: helvetica;
font-weight: 100;
}
.container {
position: relative;
height: 100%;
width: 100%;
right: 0;
-webkit-transition: right 0.4s ease-in-out;
-moz-transition: right 0.4s ease-in-out;
-ms-transition: right 0.4s ease-in-out;
-o-transition: right 0.4s ease-in-out;
transition: right 0.4s ease-in-out;
}
.container.open-sidebar {
right: 240px;
}
#sidebar {
position: absolute;
right: -240px;
background: #DF314D;
width: 240px;
height: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
border-radius: 4px;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
...
... (code continues)
...