我正在使用Sidr创建一个多级(嵌套)菜单。我的目标是实现一个响应式菜单,例如:http ://www.currys.co.uk
我的 2 级导航运行良好,但无法让任何进一步的级别正常工作。
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'
});