mmenu 菜单系统在 .Net 表单标签中不起作用答案

【问题标题】：mmenu menu system not working within .Net form tagmmenu 菜单系统在 .Net 表单标签中不起作用
【发布时间】：2013-10-23 07:52:50
【问题描述】：

我目前正在寻求在我们的 Asp.Net 站点中实施移动菜单系统 mmenu (http://mmenu.frebsite.nl/)。

在 HTML 页面和母版页上效果很好，只要它在表单标签之外。当我将它放在表单标签中时，它不再起作用。

这里是菜单的 HTML：

<nav id="menu">
    <ul>
        <li><a href="page.html">The page</a></li>
        <li><a href="mainmenu.html">The mainmenu</a></li>
        <li><a href="submenus.html">Submenus</a></li>
        <li><a href="labels.html">Labels</a></li>
        <li><a href="counters.html">Counters</a></li
        <li><a href="selected.html">Selected item</a></li>
        <li><a href="openmenu.html">Open the menu</a></li>
        <li><a href="closemenu.html">Close the menu</a></li>
    </ul>
</nav>

运行良好：

<script type="text/javascript">
    $(function () {
        $('nav#menu').mmenu({
            zposition: "next",
            position: "top"
        });
    });
</script>

但是，如果我将它放在表单标签中（form id="MainForm" runat="server"），我会收到 jquery 错误。需要在其中，因为某些菜单项将来自数据库。

干杯西蒙

【问题讨论】：

错误是什么？您是否考虑到 asp.net 更改元素 ids 时标记为 runat="server" 的事实？

标签： c# jquery asp.net mmenu

【解决方案1】：

Mmenu 在初始化时做了两件事。首先，它用<div class="mmenu-page"> 容器包装<body> 的innerHTML，然后将菜单中的<nav> 剪掉，并将它们在<body> 和DOM 中的新页面容器之间移动。

无论出于何种原因，它都会将 ASP.Net 包装 <form> 标记视为 <body> 标记，但前提是它作为 <body> 的第一个子项出现。在这种情况下，它会在结束 <form> 标记之后立即插入它的包装 <div>。

如果你用一个空的<div> 包装你的 ASP.Net <form> 标记，mmenu 将能够正确地定位它的<div class="mmenu-page"> 并且一切都会神奇地工作。

您会希望您的代码 aspx 页面如下所示：

<body>
 <div>
  <form id="form1" runat="server">
   ...
   <nav> ...mobile menu... </nav>
  </form>
 </div>
<body>

【讨论】：

【解决方案2】：

空的 div 包装体对我不起作用。我在 GitHub 上发现了一篇效果很好的帖子：

$('#search-copy').mmenu({
  // options
}, {
  // config
  offCanvas: {
      menuWrapperSelector: "#aspnetForm",
      pageNodetype: "form",
      pageSelector: "body > form"
  }
});

这是原帖：

https://github.com/FrDH/jQuery.mmenu/issues/426

您可能需要使用您的选择器。我最终使用了 pageSelector 的 ID 和 menuWrapperSelector 的通用选择器。

使用mmenu，我发现有很多隐藏的配置和选项设置。有些在 mmenu 文档中，有些在 OffCanvas 文档中。似乎配置/选项设置几乎可以满足您的任何需求，而无需编写大量自定义 CSS。

【讨论】：