Question

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

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

有没有办法删除定位并允许我们的菜单在桌面视图中相对定位？

注意：我们背后是一个庞大的防火墙，所以我没有链接来查看该网站。如果肯定需要，那么我可以花一些时间将页面移动到另一台服务器进行查看。

谢谢！

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

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

mmenu似乎从原始位置抓取两个导航容器，并在mmenu js执行期间对身体做一个前置。这会改变原始代码中的位置以使mmenu工作。

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

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

我尝试了各种处理导航重新定位的方法，并取得了微弱的成功。

尝试以下方法：

添加了一些脚本来检查浏览器窗口的大小调整，并使用if包装mmenu代码，仅在浏览器窗口为800px或更低时运行它。这很有效，因为一旦mmenu js被执行，导航位置就会改变，即使浏览器的大小调整到800px以上，导航容器仍然保留在错误的位置。
我尝试了上面的代码，添加了一些代码来抓取应该位于页面中间的导航容器，并将其重新写入分区容量超过800px的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菜单，桌面上的子菜单保留正确的定位，如上面的示例结构所示。

提前感谢您对此的任何帮助，因为我们几乎被困住了。

Answer 1

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

为什么我的mmenu始终位于页面顶部？

1 个答案: