Question

我相信你们中的一些人发现这个插件很好用。我的问题是这个插件做了一些DOM操作并隐藏了导航，你只能在抽屉触发器上显示。

你知道如何在页面上使用这个插件而不用脚本对我的页面进行任何DOM更改吗？

另外，你知道这个插件的替代品吗？ http://mmenu.frebsite.nl/

Answer 1

我制作了一个与mmenu具有相似功能的自定义菜单，但没有大量的代码，类和选项。

您可以在此处查看示例：http://jsfiddle.net/bjornnyborg/zjLrahpo/3/

我已将它用于Umbraco安装，并使用以下代码实现：

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
<nav>
    <div class="menu-header">
        <div id="currentMenu" class="text-center">@CurrentPage.Name</div>
        <div id="back" data-target="menu-@CurrentPage.Parent.Id">
            <i class="fa fa-arrow-left"></i>
        </div>
    </div>
    @menuLoop(CurrentPage.Site())                           
</nav>
@helper menuLoop(dynamic item){
    var  menuClass = "";
    if(item.Id == CurrentPage.Site().Id){
        menuClass = "root-menu";
    }
    <div class="menu @menuClass @(item.IsEqual(CurrentPage) ? "active" : null)" id="menu-@item.Id" data-parent="menu-@item.Parent.Id" data-name="@item.Name">
        <ul>
            @menuListLoop(item)
        </ul>
    </div>
    foreach(var page in item.Children().Where("Visible")){
        @menuLoop(page)
    }
}
@helper menuListLoop(dynamic item){
    foreach(var page in item.Children()){
        <li>
            <a href="@page.Url">@page.Name</a>
            @if(page.Children().Where("Visible").Any()){
                <span class="next" data-target="menu-@page.Id">
                    <i class="fa fa-angle-right"></i>
                </span>
            }
        </li>
    }
}

我希望它有所帮助！：）

Answer 2

我怀疑你是否可以阻止插件进行DOM更改，因为它可能是如何设计工作的（除非你开始修改插件文件，但这首先取消了使用它的目的）。

我一直在使用Jasny Bootstrap组件中包含的类似插件 http://jasny.github.io/bootstrap/javascript/#offcanvas

由于我的项目已经在使用Bootstrap，因此HTML结构已经准备好了，实现起来相当轻松。

实施例： http://jasny.github.io/bootstrap/examples/navmenu-push/

我使用的是它的一个修改版本，它充当桌面上的标准导航栏，然后在移动设备上切换到画布上 http://jasny.github.io/bootstrap/examples/navbar-offcanvas/

jQuery.mmenu simmilar导航功能（替代）

2 个答案: