Question

目前正在寻找将移动菜单系统 mmenu （http://mmenu.frebsite.nl/）纳入我们的Asp.Net网站。

在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标签（form id =“MainForm”runat =“server”）中，我会得到一个jquery错误。需要进入，因为一些菜单项将来自数据库。

干杯西蒙

Answer 1

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

无论出于何种原因，它都会将<form>标记的ASP.Net包裹起来，例如<body>标记，但前提是它只是<body>的第一个子标记。在这种情况下，它会在关闭<div>标记后立即插入<form>。

如果您使用空<form>包装ASP.Net <div>标记，mmenu将能够正确定位它<div class="mmenu-page">并且所有内容都神奇地起作用。

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

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

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

mmenu菜单系统无法在.Net表单标签内工作

2 个答案: