0

我目前正在为我的工作开发一个公文包站点。我正在使用 Frebsite.nl 的 Fred 创建的 javascript 插件“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>

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

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

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

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

谢谢！

埃里克

4

2 回答 2

3

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/

于 2013-10-31T15:12:27.067 回答
0

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

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

于 2016-07-16T22:01:33.380 回答