jQuery.mmenu 导航的类似功能（替代）

Posted 2023-05-08

【中文标题】jQuery.mmenu 导航的类似功能（替代）

【英文标题】：jQuery.mmenu simmilar functionality of the navigation (alternative)

【发布时间】：2014-07-15 18:51:42

【问题描述】：

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

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

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

【参考方案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="[e-mail]">
            <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="[e-mail]" data-parent="[e-mail]" 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="[e-mail]">
                    <i class="fa fa-angle-right"></i>
                </span>
            
        </li>
    

希望对你有帮助！ :)

【讨论】：

这进入了 github：github.com/Bjornnyborg/bjorne_menu - 以防万一你有兴趣:)

【参考方案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/

【讨论】：

感谢您的回答。我不需要 ofcanvas 功能，因为我不使用它，所以我需要链接的工作方式。左右嵌套元素并获得返回按钮。

请注意，此插件对 Bootstrap 的依赖是有限的。稍微摆弄一下，您应该可以让它独立运行。