Question

我正在为我的工作开发一个公文包网站。我正在使用Fred从frebsite.nl创建的javascript-plugin“mmenu”。

这就是事情。当我尝试开始添加我的内容时，内容本身始终显示在网络的顶部。我一直在尝试各种各样的技巧，如位置：相对和绝对不同的对象，但似乎没有任何效果。

以下是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>

经过一些Google Chrome检查后，我发现HTML结构改为：

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

正如你所看到的，div class =“mm-page”直接在nav之后和标题之前开始，即使我没有像那样构造它。

所以现在我的问题 - 为什么它的行为是这样的，有没有办法按照我的意愿制作mm页面内容，即在视频之后？

谢谢！

埃里克

Answer 1

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

在您的情况下，您不希望插件使用“body＆gt; div”来选择页面，您需要“#wrapper”。通过使用配置对象告诉插件，如下所示：

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

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

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

Answer 2

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

除此之外，这个错误可能是由于设置margin-top＆gt; 0表示任何子div。

mmenu内容问题

2 个答案: