0

現在、仕事用のブリーフケース サイトを開発中です。Fred が frebsite.nl から作成した javascript プラグイン「mmenu」を使用しています。

つまりね。コンテンツを追加しようとすると、コンテンツ自体が常に Web の上部に表示されます。私はさまざまなオブジェクトで 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>

いくつかの Google Chrome 検査の後、HTML 構造が代わりに次のように変更されていることがわかりました。

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

ご覧のとおり、div class="mm-page" はナビゲーションの直後、ヘッダーの前から始まりますが、そのように構成していません。

それでは、私の質問に-なぜこのように動作するのですか?ビデオの後に、mmページのコンテンツを希望どおりに表示する方法はありますか?

ありがとう！

エリック

4

2 に答える 2

3

mmenu プラグインでは、すべての「コンテンツ」が 1 つの DIV にある必要があります。デフォルトでは、ページ DIV として「body > 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 に答える