mmenu內容問題

我目前正在爲我的工作開發一個公文包網站。我使用由frebsite.nl創建的Fred插件「mmenu」。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>

後一些谷歌的Chrome瀏覽器，檢查我看到HTML結構被改變成這個：

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

正如你可以看到div class =「mm-page」在nav和header之前直接開始，即使我沒有構造它那個。

所以，現在到我的問題 - 爲什麼它的行爲是這樣的，有沒有辦法使mm頁面內容顯示，我願意，即在視頻後？

謝謝！

埃裏克

來源

2013-10-29 user2359873

你可以提供一個JSFiddle提取有問題的代碼嗎？ –

我會嘗試它（以前從未使用過）。這裏是我的網站，如果有人想從那裏檢查它 - http://ericceric.se/portfolio/ – user2359873

mmenu插件需要所有「內容」在一個DIV。默認情況下，它選擇「body> div」作爲頁面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-31 15:12:27 Fred

非常感謝你，弗雷德！我認爲我一直在深入研究選項文檔。這顯然會扭轉局面！ – user2359873

你的頭是您的包裝導致的問題之外。

除此之外，該錯誤可能是由於任何子div設置margin-top> 0造成的。

來源

2016-07-16 22:01:33

回答

相關問題