I'm using Sidr to create a multilevel (nested) menu. I'm aiming to achieve a responsive menu like: http://www.currys.co.uk
I've got the 2nd level navigation working well, but haven't been able to get any further levels working.
HTML:
<nav class="nav">
<ul class="menu">
<li class="left-menu"><a href="/link1">Level 1 Example</a>
<ul class="subnav-l2">
<li class="close"><a href="#" onclick="$.sidr('close', 'sidr-left');return false;">Close Menu</a></li>
<li><a href="#">Level 2 Example</a></li>
<li><a href="#">Level 2 Example</a></li>
<li><a href="#">Level 2 Example</a></li>
<li class="left-menu-l3"><a href="#">Level 3 Example</a>
<ul class="subnav-l3">
<li><a href="#">Link Example</a></li>
<li><a href="#">Link Example 2</a></li>
<li><a href="#">Link Example 3</a></li>
<li><a href="#">Link Example 4</a></li>
</ul>
</li>
<li><a href="#">Official Report</a></li>
</ul>
</li>
<li><a href="#">Level 1 Example</a>
</ul>
</nav>
JS:
$('.left-menu').sidr({
name: 'sidr-left',
side: 'left', // By default
source: '.subnav-l2'
});
$('.left-menu-l3').sidr({
name: 'sidr-left2',
side: 'left', // By default
source: '.subnav-l3'
});
This should be in your footer. Hope this helps.
Please notice where
jQuery(".sidr-class-sub-menu").hide();
is situated.For iPad and iPhone, you have to use a separate snippet which is slightly different, it uses
.bind
and touchstart event to make it work.