菜单内容问题答案

【问题标题】：mmenu problems with content菜单内容问题
【发布时间】：2013-10-29 17:51:32
【问题描述】：

我目前正在为我的工作开发一个公文包站点。我正在使用 Frebsite.nl 的 Fred 创建的 javascript 插件“mmenu”。

事情就是这样。当我尝试开始添加我的内容时，内容本身总是出现在网络的顶部。我一直在尝试各种技巧，例如 position: relative 和 absolute 在不同的对象上，但似乎没有任何效果。

这是 html 结构的外观：

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Eric Peterssons Portfolio</title>
    <meta name="description" content="">
    <meta name="viewport" content="initial-scale=1 user-scalable=no">

    <!-- FAVICON -->
    <link href="img/favicon.ico" rel='shortcut icon' type='image/x-icon' /> 

    <!-- GOOGLEAPIS -->
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>

    <!-- CSS FILES -->
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link type="text/css" rel="stylesheet" media="all" href="css/mmenu.css" />
    <link type="text/css" rel="stylesheet" media="all" href="css/mmenu-positioning.css" />

    <!-- JS FILES -->
    <script type="text/javascript" language="javascript" src="js/jquery.mmenu.js"></script>

    <script type="text/javascript">
       $(function() {
        $('#mmenu').mmenu({
            zposition: "front",
        });
      });
      </script>

</head>

<body>
 <!-- NAVIGATION -->
    <div id="header">
        <div id="innerHeader">
            <div id="circleHead">
                <div id="frame">
                    <a href="index.html">
                        <img src="img/head.jpg" />
                    </a>
                </div>
            </div>
            <div id="logotypeHolder">
                <a href="index.html">
                    <img src="img/logotype-col.png" />
                </a>
            </div>
                <nav id="websiteMenu">
                    <ul>
                        <li class="Selected">
                            <a class="active" href="index.html">Hem</a>
                        </li>
                        <li>
                            <a href="portfolio.html">Portfolio</a>
                        </li>
                        <li>
                            <a href="om.html">Om</a>
                        </li>
                        <li>
                            <a href="kontakt.html">Kontakt</a>
                        </li>
                    </ul>
                </nav>
                <nav id="mmenu">    
                    <ul>
                        <li class="title">
                            Meny
                        </li>
                        <li class="Selected">
                            <a class="active" href="index.html">Hem</a>
                        </li>
                        <li>
                            <a href="portfolio.html">Portfolio</a>
                        </li>
                        <li>
                            <a href="om.html">Om</a>
                        </li>
                        <li>
                            <a href="kontakt.html">Kontakt</a>
                        </li>
                    </ul>
                </nav>
            <div id="menuHolder">  
                <a class="button" href="#mmenu">
                    <img src="img/menu.png" />
                </a>
            </div>
        </div>
    </div>
    <!-- VIDEO -->
    <video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0"> 
            <source src="video/wave.mp4" type="video/mp4">
            <source src="video/wave.webm" type="video/webm">
    </video>
    <div id="wrapper">
        wdqwfwe
    </div>
</body>

经过一些谷歌浏览器检查后，我发现 HTML 结构改为：

http://i.imgur.com/AxZDgMG.png

正如您所见，div class="mm-page" 直接在导航之后和标题之前开始，即使我没有这样构造它。

现在我的问题是 - 为什么它会这样，有没有办法让 mm-page 内容按我的意愿显示，即在视频之后？

谢谢！

埃里克

【问题讨论】：

你能提供一个 JSFiddle 提取有问题的代码吗？
我会试试的（以前没用过）。如果有人想从那里检查它，这是我目前的网站 - ericceric.se/portfolio

标签： html structure mmenu

【解决方案1】：

mmenu 插件需要所有“内容”都在一个 DIV 中。默认情况下，它选择“body > div”作为 page-DIV。如果这找到了多个元素，插件会将所有元素包装在一个新的 DIV 中。

在您的情况下，您不希望插件使用“body > div”来选择页面，您需要“#wrapper”。使用配置对象告诉插件这个，像这样：

$('#menu').mmenu({
    // the options
}, {
    // the configuration
    pageSelector: "#wrapper"
});

文档：http://mmenu.frebsite.nl/documentation/options/

教程：http://mmenu.frebsite.nl/tutorial/

【讨论】：

非常感谢，弗雷德！而且我认为我一直在深入研究选项文档。这显然扭转了局面！

【解决方案2】：

您的标头位于导致问题的包装器之外。

此外，此错误可能是由于为任何子 div 设置 margin-top > 0 造成的。

【讨论】：