From scratch jQuery + SASS push menu
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<h1>From scratch multi-level push menu</h1>
<nav class="fs-pushmenu">
<div class="fs-current fs-hidden"></div>
<a class="fs-previous" href="#" data-current-level="0">Back</a>
<ul class="fs-level" data-level="0">
<li class="fs-item" data-state="closed">
<a class="fs-link" href="#">Europe</a>
<ul class="fs-level" data-level="1">
<li class="fs-item">
<a class="fs-link" href="#">Angleterre</a>
</li>
<li class="fs-item">
<a class="fs-link" href="#">Allemagne</a>
</li>
<li class="fs-item" data-state="closed">
<a class="fs-link" href="#">France</a>
<ul class="fs-level" data-level="2">
<li class="fs-item">
<a class="fs-link" href="#">Ain</a>
</li>
<li class="fs-item" data-state="closed">
<a class="fs-link" href="#">Alsace</a>
<ul class="fs-level" data-level="3">
<li class="fs-item">
<a class="fs-link" href="#">Strasbourg</a>
</li>
<li class="fs-item">
<a class="fs-link" href="#">Colmar</a>
</li>
</ul>
</li>
<li class="fs-item">
<a class="fs-link" href="#">Normandie</a>
</li>
<li class="fs-item">
<a class="fs-link" href="#">Bretagne</a>
</li>
</ul>
</li>
...
SCSS
.fs-pushmenu{
.fs{
&-previous[data-current-level="0"]{
display: none;
}
&-item[data-state="closed"]{
> .fs-link{
display: block;
}
> .fs-level{
display: none;
}
}
&-item[data-state="open"]{
> .fs-link{
display: none;
}
> .fs-level{
display: block;
}
}
&-link{
display: block;
}
&-hidden{
display: none;
}
}
}
//
// reset
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body{
margin: 0 auto;
text-align: center;
}
ul{
list-style-type: none;
}
ul, li{
margin: 0;
padding: 0;
}
//
// skin
.fs-pushmenu{
width: 300px;
text-align: left;
display: inline-block;
.fs{
&-previous{
display: block;
&:before{
margin-right: 10px;
content: "<";
}
}
&-item[data-state="closed"]{
> .fs-link{
&:after{
margin-left: 10px;
}
}
}
&-item[data-state="closed"]{
> .fs-link{
&:after{
content: ">";
}
}
}
&-link,
&-previous,
&-current{
padding: 10px;
border: 1px solid #000;
}
}
}
JavaScript
$(document).ready(function(){
$('a.fs-link').on('click', function(){
// Get current nav level of clicked link
var getLinkNavLevel = $(this)
.closest('ul.fs-level')
.attr('data-level');
// Get clicked link sublevel state (open/closed)
var getSubLevelState = $(this)
.parent('li.fs-item')
.attr('data-state');
// Close children sublevels
var closeChildren = $(this)
.parent('li.fs-item')
.find('li.fs-item[data-state="open"]')
.each(function(){
$(this)
.attr('data-state', 'closed');
});
// Get current level
var getCurrentLevelValue = $(this)
.parent('li.fs-item')
.children('ul.fs-level')
.attr('data-level');
// Set clicked link sublevel state (open/closed)
function setSubLevelState(element,state){
element
.parent('li.fs-item')
.attr('data-state', state);
}
if (getSubLevelState == 'closed'){
setSubLevelState($(this),'open');
$(this)
.parent('li.fs-item')
.siblings()
.addClass('fs-hidden');
$('a.fs-previous')
.attr('data-current-level', + getCurrentLevelValue);
}
});
$('a.fs-previous').on('click', function(){
// Last opened
$('li.fs-item[data-state="open"]:last')
.attr('data-state', 'closed');
// Update data-current-level value
var updateCurrentLevelValue = $('li.fs-item[data-state="closed"]:first')
...