Веб-страница не смещается достаточно далеко для mmenu
Я настроил mmenu, чтобы клонировать мое текущее меню и установить переключатель, который появляется только тогда, когда экран меньше определенной ширины. Это все работает, и меню работает без проблем. У меня есть смысл обновить мой код, чтобы добавить новые элементы для сайта, и теперь меню не работает полностью.
Меню по-прежнему выходит с переключателем, и все в порядке, но главная страница не слишком скользит. У меня также есть проблема, которая приводит к разрыву между меню и моей страницей (с тенью на стороне страницы). Я использую Skeleton CSS Boilerplate для макета сайта. Хотя Chrome Inspector не указывает на наличие полей, являющихся проблемой (чтобы контент был в центре), я думаю, что это вызывает проблему, но я не уверен, как ее решить.
Основным изменением, прежде чем я заметил это, был код для исправления меню (или переключения при использовании mmenu) наверх при прокрутке вниз. Это первоначально вызвало и проблема, когда меню будет отображаться только в верхней части. Я решил эту проблему, уточнив свой CSS. Есть ли у кого-нибудь какие-либо мысли или опыт по поводу такого рода проблем (контент не перемещается полностью к меню).
Index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<meta name="viewport" content="width=device-width initial-scale=1.0 user-scalable=0 minimum-scale=1.0 maximum-scale=1.0" />
<title>Title</title>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<link rel="stylesheet" href="css/skeleton.css" type="text/css" />
<link rel="stylesheet" href="css/jquery.mmenu.css" type="text/css" />
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/jquery.mmenu.min.js" type="text/javascript"></script>
<script src="js/jquery.simplyscroll.min.js" type="text/javascript"></script>
<script src="js/SiteJava.js" type="text/javascript"></script>
</head>
<body>
<div class="container" id="page">
<div id="banner" class="sixteen columns" align="center">
<img class="scale-with-grid" src="images/banner.gif" alt="Banner Place Holder">
</div>
<div id="Navigation" class="sixteen columns">
<a href="#mainnav" id="mobilenav" >Menu</a>
<nav id="mainnav">
<ul>
<li>
<a href="index.html">Home</a></li>
<li>
<a href="#">Events</a>
<ul>
<li><a href="search-states-map.php">Schedule</a></li>
<li><a href="what_people_are_saying.html">Comments</a></li>
<li><a href="why_come.html" target="_self">Why Come?</a></li>
<li><a href="prepare.html" target="_self">How to prepare </a></li>
<li><a href="faq2.html">FAQS</a></li>
<li><a href="thankyou.html">Benefactors</a></li>
</ul>
</li>
<li>
<a href="#">Camps</a>
<ul>
<li><a href="camps.html">General Info</a></li>
<li><a href="schedule.php">Schedule</a></li>
<li><a href="whattobring.html">What to bring</a></li>
<li><a href="mail_camp.html">Register/Mail</a></li>
<li><a href="faqs.html">FAQS</a></li>
</ul>
</li>
<li>
<a href="#">Register Now</a>
<ul>
<li><a href="search-states-map.php">Online</a></li>
<li><a href="mail.html">By Mail</a></li>
</ul>
</li>
<li>
<a href="#">About Us</a>
<ul>
<li><a href="mission.html">Mission</a></li>
<li><a href="Instructors.html">Instructors</a></li>
</ul>
</li>
<li>
<a href="#"> Links</a>
<ul>
<li><a href="http://site1.com" target="_blank">Link 1</a></li>
<li><a href="http://store..com" target="_blank">Our Store</a></li>
<li><a href="smf/index.php">Forum</a></li>
<li><a href="join.html">Join</a></li>
<li><a href="industry_friends.html">Industry</a></li>
<li><a href="links.html">Other Links</a></li>
</ul>
</li>
<li>
<a href="latest_news.html">Latest News</a>
</li>
<li>
<a href="contact_us.html">Email Us</a>
</li>
</ul>
</nav>
</div>
<div class="sixteen columns bgc">
<div class="content">
<p>Content goes here. </p>
</div>
</div>
<div class="sixteen columns simges">
<ul id="scroller">
<li><a href="#"><img class="scollimg" src="images/facebook.jpg" /></a> </li>
<li><a href="#"><img class="scollimg" src="images/banner.jpg" /></a> </li>
<li><a href="#"><img class="scollimg" src="images/banner.jpg" /></a> </li>
<li><a href="#"><img class="scollimg" src="images/banner.png" /></a> </li>
<li><a href="#"><img class="scollimg" src="images/banner.jpg" /></a> </li>
<li><a href="#"><img class="scollimg" src="images/banner.jpg" /></a> </li>
<li><a href="#"><img class="scollimg" src="images/banner.jpg" /></a> </li>
<li><a href="#"><img class="scollimg" src="images/banner.jpg" /></a> </li>
<li><a href="#"><img class="scollimg" src="images/banner.jpg" /></a> </li>
</ul>
</div>
<div class="sixteen columns footer">
<div class="four columns alpha"> </div>
<div class="three columns footc">
<img class="scale-with-grid" src="images/Locations.jpg" />
</div>
<div class="three columns footc">
<img class="scale-with-grid" src="images/forum.jpg" /> <br /> <br />
<img class="scale-with-grid" src="images/aar.jpg" />
</div>
<div class="two columns footc">
<h3>About Us</h3>
<a href="mission.html">Mission</a> <br />
<a href="instructors.html">Instructors</a> <br />
<a href="latest_news.html">Latest News</a> <br />
<a href="contact_us.html">Email Us</a> <br />
</div>
<div class="four columns omega"> </div>
</div>
</div>
</body>
</html>
Main.css
html {
margin: 0;
padding: 0;
}
Body{
margin: 0;
padding: 0;
}
img, img.scale-with-grid {
outline: 0;
max-width: 100%;
height: auto;
}
.drop-shadow {
-webkit-box-shadow: 0 5px 5px 0 rgba(0,0,0,0.2);
-moz-box-shadow: 0 5px 5px 0 rgba(0,0,0,0.2);
box-shadow: 0 5px 5px 0 rgba(0,0,0,0.2);
}
.footer {
background-color: black;
color: white;
margin: 10px 0px 10px 0px;
border-radius: 0px 0px 30px 30px;
}
.footc {
text-align: center;
vertical-align: middle;
}
/* Container DIV - automatically generated */
.simply-scroll-container {
position: relative;
}
/* Clip DIV - automatically generated */
.simply-scroll-clip {
position: relative;
overflow: hidden;
}
/* UL/OL/DIV - the element that simplyScroll is inited on
Class name automatically added to element */
.simply-scroll-list {
overflow: hidden;
margin: 0;
padding: 0;
list-style: none;
}
.simply-scroll-list li {
padding: 0;
margin: 0;
list-style: none;
}
.simply-scroll-list li img {
border: none;
display: block;
}
/* Custom class modifications - adds to / overrides above
.simply-scroll is default base class */
/* Container DIV */
.simply-scroll {
width: 100%;
height: 75px;
}
/* Clip DIV */
.simply-scroll .simply-scroll-clip {
width: 100%;
height: 75px;
}
/* Explicitly set height/width of each list item */
.simply-scroll .simply-scroll-list li {
float: left; /* Horizontal scroll only */
width: 150px;
height: 100%;
}
.scollimg {
width: auto;
height: 75px;
}
@media (min-width: 960px) {
body {
width: 100%;
height: 100%;
background-image: url(../images/bg.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
#mm-mainnav {
display: none !important;
}
#mobilenav {
display: none !important;
}
#small-ql {
display: none !important;
}
/*
.container {
border: 0px;
margin-top: 15px;
margin-bottom: 15px;
}
*/
.container .Nav-Fix-Top {
border: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
.bgc {
background-color: gray;
border-radius: 30px 30px 0px 0px;
}
.simges {
background-color: white;
margin-top: 10px;
}
.content {
width: 920px;
margin-left: 10px;
margin-right: 10px;
}
.Nav-Fix-Top {
position: fixed;
background-color: gray;
margin: 0 10px 0 10px;
z-index: 100;
}
nav{
text-align:left;
/* height here works in FF, not IE6 */
/*height:20px;*/
padding-bottom: 15px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
margin-bottom: 22px;
margin-right: auto;
margin-left: auto;
}
nav li {
float:left;
background:url("../images/button.jpg")
repeat-x right top;
width:104.4px;
margin:0;
padding:0;
}
nav a {
color: red;
display:block;
background:url("../images/buttonbackground.jpg")
repeat-x left top;
height:22px;
text-align:center;
padding-top: 4px;
}
nav a:hover {
display:block;
background:url("../images/buttonbackground.jpg")
repeat-x left top;
width:104.4px;
height:22px;
text-align:center;
padding-top: 4px;
}
nav ul{
margin:0px;
padding:0px;
}
nav ul li{
display:inline;
float:left;
list-style:none;
position:relative;
}
nav li a{
text-decoration:none;
}
nav li a:hover{
text-decoration:underline;
}
nav li ul {
margin:0px;
padding:0px;
display:none;
position:absolute;
left:0px; top:20px;
}
nav li ul:hover {
}
nav li:hover ul {
display:block;
width:160px;
}
nav li li {
list-style:none;
list-style-position:inside;
display:list-item;
width: 170px;
}
nav li li a {
text-align:left;
text-decoration:none;
padding-left: 6px;
width: 117px;
}
nav li li a:hover {
text-decoration:underline;
text-align:left;
width: 117px;
}
}
@media (max-width: 959px) {
#mainnav {
display: none !important;
}
body {
background-color: gray;
}
#big-ql {
display: none !important;
}
/*
.mm-menu.mm-left {
width: 70px !important;
}
.mm-list a.mm-subopen {
width: 70px;
}
*/
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
.Nav-Fix-Top {
position: fixed;
background-color: gray;
margin: 0;
width: 768px;
z-index: 100;
}
nav.Nav-Fix-Top {
height: 100%;
}
}
@media only screen and (max-width: 767px) {
.Nav-Fix-Top {
position: fixed;
background-color: gray;
margin: 0;
width: 300px;
z-index: 100;
}
nav.Nav-Fix-Top {
height: 100%;
}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.Nav-Fix-Top {
position: fixed;
background-color: gray;
margin: 0;
width: 420px;
z-index: 100;
}
nav.Nav-Fix-Top {
height: 100%;
}
}
SiteJava.js (пользовательская Java)
$(document).ready(function() {
$("#mainnav").mmenu({
// options
}, {
// configuration
clone: true
});
//$("#mm-mainnav").mmenu().on("opening.mm",function() {
// $(".container").css("margin","0");
//});
//$("#mm-mainnav").mmenu().on("closing.mm",function() {
// $(".container").css("margin","");
//});
//$('.container img').addClass('scale-with-grid');
$(window).resize(function() {
//var win = $(this);
if ($(this).width() >= 958) {
$("#mm-mainnav").trigger("close.mm");
}
});
$(window).bind('scroll',function() {
if ($(window).scrollTop() > $("#banner").height()) {
$("#Navigation").addClass("Nav-Fix-Top");
$("#Navigation").removeClass("sixteen columns");
//$("#mainnav").css("height","100%");
$("#mainnav").css("padding-bottom","0");
//$("#Navigation").addClass("drop-shadow");
//$("body").css("margin-top","70px");
}else{
$("#Navigation").removeClass("Nav-Fix-Top");
$("#Navigation").addClass("sixteen columns");
//$("#mainnav").css("height","");
$("#mainnav").css("padding-bottom","");
//$("#Navigation").removeClass("drop-shadow");
//$("body").css("margin-top","0");
}
});
$(function() { //on DOM ready
$("#scroller").simplyScroll();
});
});
Это мой первый раз, когда я использую stackru, поэтому, если я разместил код неправильно, извините. Кроме того, только часть nav используется для mmenu, ссылки внизу не используют mmenu.
1 ответ
Вам нужно будет добавить пользовательский CSS, чтобы установить стиль контейнера вашей страницы для класса mm-open, который добавляется к тегу html при переключении меню, например:
html.mm-opened #div-name {width:100%; margin:0; }
Вы также можете пойти дальше и использовать экран @media, так что переопределение ширины css действует только на макеты рабочего стола, а не на мобильные, например:
@media screen and (max-width: 1200px) { html.mm-opened .parent-container{max-width:100%; margin:0;}}
1200px - пример ширины вашего центрального контейнера, но вы можете изменить его на точный размер вашего контейнера.
Дайте мне знать, если это сработает для вас.