4

我目前正在寻找在我们的 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 错误。需要在其中，因为某些菜单项将来自数据库。

干杯西蒙

4

2 回答 2

5

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

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

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

你会希望你的代码 aspx 页面看起来像这样：

<body>
 <div>
  <form id="form1" runat="server">
   ...
   <nav> ...mobile menu... </nav>
  </form>
 </div>
<body>
于 2013-10-24T04:24:08.167 回答
0

空的 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。

于 2016-04-08T13:31:37.170 回答