Usng Sidr to create multiple level navigation - responsive-design

Question

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">Level 1 Example
<ul class="subnav-l2">
<li class="close">Close Menu</li>
<li>Level 2 Example</li>
<li>Level 2 Example</li>
<li>Level 2 Example</li>
<li class="left-menu-l3">Level 3 Example
<ul class="subnav-l3">
<li>Link Example</li>
<li>Link Example 2</li>
<li>Link Example 3</li>
<li>Link Example 4</li>
</ul>
</li>
<li>Official Report</li>
</ul>
</li>
<li>Level 1 Example
</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'
});

Answer 1

This should be in your footer. Hope this helps.
<script src="http://yoursite.domain.../jquery.sidr.min.js"></script>
<script>
jQuery('#responsive-menu-button').sidr({
name: 'sidr-main',
source: '.menu-main-nav-container'
});
jQuery( window ).load(function() {
if(jQuery("#sidr-main").length !== 0) {
jQuery(".sidr-class-sub-menu").hide();
jQuery( "li.sidr-class-menu-item ul.sidr-class-sub-menu" ).each(function() {
jQuery( this ).after("<div class='lnk-plus'>+</div>");
});
jQuery( ".lnk-plus" ).toggle(function() {
var id1= jQuery( this ).parent().attr("id");
jQuery("#" + id1 + " ul.sidr-class-sub-menu").show();
jQuery("#" + id1 + " .sidr-class-menu-item-has-children ul").hide();
jQuery( this ).html("-");
}, function() {
var id1= jQuery( this ).parent().attr("id");
jQuery("#" + id1 + " ul.sidr-class-sub-menu").hide();
jQuery( this ).html("+");
});
}
});
</script>
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.
<script>
jQuery(document).ready(function($){
var deviceAgent = navigator.userAgent.toLowerCase();
var agentID = deviceAgent.match(/(ipad|iphone)/);
if (agentID) {
jQuery('#responsive-menu-button').sidr({
name: 'sidr-main',
source: '.menu-main-nav-container'
});
if(jQuery("#sidr-main").length !== 0) {
jQuery(window).bind('touchstart click', function(){
//return false
});
jQuery( ".lnk-plus" ).toggle(function() {
var id1= jQuery( this ).parent().attr("id");
jQuery("#" + id1 + " ul.sidr-class-sub-menu").show("slow");
jQuery("#" + id1 + " .sidr-class-menu-item-has-children ul").hide("slow");
jQuery( this ).html("-");
}, function() {
var id1= jQuery( this ).parent().attr("id");
jQuery("#" + id1 + " ul.sidr-class-sub-menu").hide("slow");
jQuery( this ).html("+");
});
}
}
});
</script>