0

我有一个 jquery.mmenu，它位于桌面视图中页面的一半左右，我相信脚本将它定位为正文中的第一项。

我们只在移动设备上以响应式布局使用 mmenu，因此我们希望它不会影响我们的任何桌面样式。

有没有办法去掉定位，让我们的菜单在桌面视图中相对定位？

注意：我们位于强大的防火墙后面，因此我没有查看该站点的链接。如果确实需要，那么我可以花一些时间将页面移动到另一台服务器进行查看。

谢谢！

只是为了澄清原始帖子/问题并提供更多细节。

我们的网站上有两个 NAV 块。一个在顶部，一个在中间页面。在原始代码中，导航容器被放置在其他 div 容器中，以控制它们在布局中的位置。

mmenu 似乎从它们的原始位置抓取了两个导航容器，并在 mmenu js 执行期间对主体进行了前置操作。这会更改原始代码中的定位以使 mmenu 工作。

位置的变化显然会导致在桌面视图中查看时布局无法正确加载，因为过去位于页面中间的 div 容器中的菜单现在呈现在页面顶部，因为它的 mmenu 修改位置。

有没有办法只在小于 800px 的屏幕调整大小时初始化 mmenu，或者在桌面视图中卸载它并将导航容器放回原来的位置？

我尝试了各种方法来处理导航的重定位，但取得了微不足道的成功。

尝试了以下方法：

  • 添加了一些脚本来检查浏览器窗口的大小调整，并用 if 包装 mmenu 代码，以便仅在浏览器窗口为 800 像素或更少时运行它。这有点效果，因为一旦执行 mmenu js，导航位置就会改变，即使浏览器的大小调整到 800 像素以上，导航容器仍然保留在不正确的位置。

  • 我尝试了上面的方法，添加了一些代码来抓取应该放在页面中间的导航容器，并将其重新写入分辨率高于 800 像素的 div 容器中，但这适用于移动设备和桌面视图。从桌面到移动似乎不会触发 mmenu，因为我确实相信它的大部分更改都是在页面加载时完成的，因此调整大小不会再次触发脚本以根据 mmenu 的需要更改导航容器。

如果我将浏览器窗口缩小到移动大小并刷新页面，则 mmenu 加载正常。

我们试图实现的行为与媒体查询几乎相同，因此我们可以根据需要以不同的分辨率控制 mmenu 的执行。

modernizr、enqueue、yepnope 都试过了，但似乎都只触发一次脚本，而不是因为屏幕大小发生了变化，而且显然没有解决导航容器位置的变化。

显示正在发生的事情的示例代码：

原始站点结构（缩短以仅显示相关项目）：

    <body>
    <div id="wrapper">
    <div id="header">
    <div id="topnav">
    <nav id="mainnav"></nav>
    </div>
    </div>
    <div id="other"></div>
    <div id="secondnav">
    <nav id="midnav"></nav>
    </div>
    <div id="content"></div>
    <div id="footer"></div>
    </div>
    </body>

MMENU 修改结构（在 mmenu.js 执行后）：

    <body>
    <nav id="midnav"></nav>
    <nav id="mainnav"></nav>
    <div id="wrapper">
    <div id="header">
    <div id="topnav">
    </div>
    </div>
    <div id="other"></div>
    <div id="secondnav">
    </div>
    <div id="content"></div>
    <div id="footer"></div>
    </div>
    </body>

希望以上内容可以进一步澄清我们遇到的问题。

最终目标是仅在移动设备中使用 mmenu 及其功能/样式，并使用我们自己的 CSS 菜单和桌面中的子菜单保持正确的位置，如上面的示例结构所示。

提前感谢您对此的任何帮助，因为我们几乎陷入困境。

4

1 回答 1

0

jquery.mmenu 插件需要将 NAV 直接放在 BODY 中，这是没有办法的。对于响应式网站，您可能最好使用“克隆”选项。这样，您可以将克隆版本用于移动设备，将原始版本用于桌面。请注意，如果您这样做，克隆菜单中的所有 ID 都将以“mm-”开头。

于 2013-09-29T20:16:26.483 回答