使用 Cidr 创建多级导航答案

【问题标题】：Usng Sidr to create multiple level navigation使用 Cidr 创建多级导航
【发布时间】：2015-04-18 03:56:01
【问题描述】：

我正在使用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'
});

【问题讨论】：

标签： responsive-design navigation sidr

【解决方案1】：

这应该在您的页脚中。希望这会有所帮助。

<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>

请注意jQuery(".sidr-class-sub-menu").hide();的位置。

对于 iPad 和 iPhone，您必须使用一个单独的 sn-p，它略有不同，它使用 .bind 和 touchstart 事件来使其工作。

<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>

【讨论】：