Ммену проблемы с контентом
В настоящее время я разрабатываю портфель для моей работы. Я использую плагин javascript "mmenu", созданный Фредом из frebsite.nl.
Вот вещь Когда я пытаюсь начать добавлять свой контент, сам контент всегда появляется в верхней части сети. Я пробовал всевозможные трюки, такие как положение: относительное и абсолютное на разных объектах, но, похоже, ничего не работает.
Вот как выглядит 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-страницы отображаться так, как я хотел бы, то есть после видео?
Спасибо!
Эрик
2 ответа
Плагину 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/
Ваш заголовок находится за пределами вашей оболочки, что вызывает проблему.
В дополнение к этому эта ошибка может быть вызвана установкой margin-top > 0 для любого из дочерних элементов div.