gpt4 book ai didi

jquery - 网页没有为 mmenu 移动足够远

转载 作者:行者123 更新时间:2023-11-28 09:18:47 25 4
gpt4 key购买 nike

我设置了 mmenu 来克隆我当前的菜单并放置一个切换按钮,该按钮仅在屏幕小于特定宽度时出现。这一切都有效,mmenu 没有问题。我感觉更新了我的代码以添加网站的新元素,但现在 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> &nbsp; </li>
<li><a href="#"><img class="scollimg" src="images/banner.jpg" /></a> &nbsp; </li>
<li><a href="#"><img class="scollimg" src="images/banner.jpg" /></a> &nbsp; </li>
<li><a href="#"><img class="scollimg" src="images/banner.png" /></a> &nbsp; </li>
<li><a href="#"><img class="scollimg" src="images/banner.jpg" /></a> &nbsp; </li>
<li><a href="#"><img class="scollimg" src="images/banner.jpg" /></a> &nbsp; </li>
<li><a href="#"><img class="scollimg" src="images/banner.jpg" /></a> &nbsp; </li>
<li><a href="#"><img class="scollimg" src="images/banner.jpg" /></a> &nbsp; </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"> &nbsp; </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"> &nbsp; </div>
</div>
</div>
</body>
</html>

主.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();
});

});

这是我第一次使用stackoverflow,所以如果我把代码贴错了,抱歉。此外,只有导航部分用于 mmenu,底部的链接不使用 mmenu。

最佳答案

您必须添加自定义 css,以在 mm-open 类上设置页面容器的样式,该类在 mmenu 切换时添加到 html 标签,例如:

html.mm-opened #div-name {width:100%; margin:0; }

您还可以更进一步并使用@media screen,这样 css 宽度覆盖仅作用于桌面布局而不作用于移动布局,例如:

@media screen and (max-width: 1200px) { html.mm-opened  .parent-container{max-width:100%; margin:0;}}

1200px 是中心容器的宽度示例,但您可以将其更改为容器的确切大小。

让我知道它是否适合您。

关于jquery - 网页没有为 mmenu 移动足够远,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26186609/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com