[英]How can I remove the ability for the user to go to the sides when my responsive menu is open?
I work on a responsive menu using some JavaScript for functions, but I've a problem. 我使用一些JavaScript函数处理响应式菜单,但我遇到了问题。 So far, my menu is very functional, but I'd like that when it is open, the user doesn't have the opportunity to go on the sides.
到目前为止,我的菜单非常实用,但是当它打开时,我希望用户没有机会站在一边。 Here's the problem in video: http://screencast.com/t/yQkGV9XTJm
这是视频中的问题: http : //screencast.com/t/yQkGV9XTJm
Here's my JavaScript code: 这是我的JavaScript代码:
(function($)
{
$('#side-block-toggle-icon').click(function(e)
{
e.preventDefault();
$('body').toggleClass('side-block');
$('#expose-mask').toggle();
});
$('#expose-mask').click(function(e)
{
$('body').removeClass('side-block');
});
})(jQuery);
my HTML code: 我的HTML代码:
<!-- NAVIGATION -->
<div id="navigation">
<div class="wrapper">
<span id="side-block-toggle-icon" title="Navigation"></span>
<div id="side-block">
<ul>
<li>
<a href="../." class="home active">Home</a>
</li>
<li>
<a href="../shop/shop.php" class="shop ">Shop</a>
</li>
<li>
<a href="../community/" class="forums">Community</a>
</li>
<li>
<a href="#" class="support ">Support</a>
</li>
</ul>
</div>
</div>
</div>
<!-- HEADER -->
<div id="header">
<div class="wrapper">
<h1 id="logo">
<a href="../.">Logo</a>
</h1>
</div>
</div>
<!-- CONTAINER -->
<div class="wrapper">
<div id="container">
<div id="breadcrumb-top" class="breadcrumb">
<ul>
<li>
<a href="./.." class="home">Home</a>
</li>
</ul>
</div>
<h1 id="welcome-to" class="big-title">Web site for highly customized styles for the <a href="http://xenforo.com" target="_blank" style="border-bottom: 2px solid;">XenForo forum software</a>.</h1>
<h1 id="all-available-styles" class="big-title">All available styles</h1>
<p>Your privacy is important to us. To better protect your privacy we provide this notice explaining our online information practices and the choices you can make about the way your information is collected and used. To make this notice easy to find, we make it available in our footer and at every point where personally identifiable information may be requested.Log files are maintained and analysed of all requests for files on this website's web servers. Log files do not capture personal information but do capture the user's IP address, which is automatically recognised by our web servers.Your privacy is important to us. To better protect your privacy we provide this notice explaining our online information practices and the choices you can make about the way your information is collected and used. To make this notice easy to find, we make it available in our footer and at every point where personally identifiable information may be requested.Log files are maintained and analysed of all requests for files on this website's web servers. Log files do not capture personal information but do capture the user's IP address, which is automatically recognised by our web servers.Your privacy is important to us. To better protect your privacy we provide this notice explaining our online information practices and the choices you can make about the way your information is collected and used. To make this notice easy to find, we make it available in our footer and at every point where personally identifiable information may be requested.Log files are maintained and analysed of all requests for files on this website's web servers. Log files do not capture personal information but do capture the user's IP address, which is automatically recognised by our web servers.Your privacy is important to us. To better protect your privacy we provide this notice explaining our online information practices and the choices you can make about the way your information is collected and used. To make this notice easy to find, we make it available in our footer and at every point where personally identifiable information may be requested.Log files are maintained and analysed of all requests for files on this website's web servers. Log files do not capture personal information but do capture the user's IP address, which is automatically recognised by our web servers.Your privacy is important to us. To better protect your privacy we provide this notice explaining our online information practices and the choices you can make about the way your information is collected and used. To make this notice easy to find, we make it available in our footer and at every point where personally identifiable information may be requested.Log files are maintained and analysed of all requests for files on this website's web servers. Log files do not capture personal information but do capture the user's IP address, which is automatically recognised by our web servers.Your privacy is important to us. To better protect your privacy we provide this notice explaining our online information practices and the choices you can make about the way your information is collected and used. To make this notice easy to find, we make it available in our footer and at every point where personally identifiable information may be requested.Log files are maintained and analysed of all requests for files on this website's web servers. Log files do not capture personal information but do capture the user's IP address, which is automatically recognised by our web servers.Your privacy is important to us. To better protect your privacy we provide this notice explaining our online information practices and the choices you can make about the way your information is collected and used. To make this notice easy to find, we make it available in our footer and at every point where personally identifiable information may be requested.Log files are maintained and analysed of all requests for files on this website's web servers. Log files do not capture personal information but do capture the user's IP address, which is automatically recognised by our web servers.</p>
<div id="breadcrumb-bottom" class="breadcrumb">
<ul>
<li>
<a href="./.." class="home">Home</a>
</li>
</ul>
</div>
</div>
</div>
<div id="footer">
<div class="wrapper">
<ul>
<li>
<a id="help" class="overlay-trigger" href="help.php">Help</a>
</li>
</ul>
<span id="footer-copyright">
<a href="./..">Coded by Dylan.</a>
</span>
</div>
</div>
<div class="overlay-box">
<div class="overlay-box-container">
<span class="overlay-box-closer" title="Close the overlay"></span>
<h1 class="big-title">Help</h1>
<p>Your privacy is important to us. To better protect your privacy we provide this notice explaining our online information practices and the choices you can make about the way your information is collected and used. To make this notice easy to find, we make it available in our footer and at every point where personally identifiable information may be requested.Log files are maintained and analysed of all requests for files on this website's web servers. Log files do not capture personal information but do capture the user's IP address, which is automatically recognised by our web servers.</p>
</div>
</div>
<div id="expose-mask" style="display: none;"></div>
<script src="javascript/scripts.js"></script>
and my CSS code: 和我的CSS代码:
.overlay-box
{
background-color: #FFFFFF;
display: none;
position: fixed;
top: 35%;
right: 0;
left: 0;
z-index: 3;
width: 50%;
margin: 0 auto;
box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 7px;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 7px;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 7px;
transition: opacity 500 ease-in-out;
-webkit-transition: opacity 500 ease-in-out;
}
.overlay-box-container
{
margin: 20px;
}
.overlay-box-closer:before
{
content: "\f00d";
position: absolute;
top: -21px;
right: -15px;
cursor: pointer;
font-size: 40px;
}
.big-title
{
margin-bottom: 20px;
}
/* BASE */
h1, h2, h3, h4, h5, h6
{
font-weight: normal;
}
h1
{
font-size: 25px;
}
h2
{
font-size: 20px;
}
h3
{
font-size: 18px;
}
h4
{
font-size: 17px;
}
h5
{
font-size: 15px;
}
h6
{
font-size: 13px;
}
ul, p, h1, h2, h3, h4, h5, h6
{
margin: 0;
}
ul
{
list-style-type: none;
padding: 0;
}
/* CORE */
html
{
overflow-x: hidden;
}
body
{
background-color: #E6E9ED;
color: #000000;
font-family: Amaranth, ABeeZee, "Trebuchet MS", sans-serif;
font-size: 13px;
margin: 0;
padding-bottom: 20px;
transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
}
.wrapper
{
max-width: 975px;
margin: 0 auto;
padding: 0 20px 0 20px;
}
a
{
color: #4D7799;
text-decoration: none;
}
a:hover
{
color: #CD3816;
text-decoration: none;
}
#navigation a:before,
#navigation a:after,
#side-block-toggle-icon:before,
#side-block-toggle-icon:after,
#all-available-styles:before,
#all-available-styles:after,
#slideshow-pause-icon:before,
#slideshow-pause-icon:after,
#slideshow-play-icon:before,
#slideshow-play-icon:after,
#join-us-now:before,
#join-us-now:after,
#footer a:before,
#footer a:after,
.overlay-box-closer:before,
.overlay-box-closer:after
{
font-family: FontAwesome;
font-weight: normal;
}
/* NAVIGATION */
#navigation
{
background-color: #283a4a;
height: 60px;
}
#navigation li
{
float: left;
}
#navigation a
{
color: #FFFFFF;
font-size: 13px;
text-shadow: rgba(0, 0, 0, 1) 0 1px 0;
display: block;
padding: 0 20px;
line-height: 60px;
}
#navigation a:hover
{
background-color: #000000;
text-decoration: none;
}
#navigation a.active
{
background-color: #000000;
font-weight: bold;
}
/* Navigation icons */
#navigation a:before
{
float: left;
font-size: 18px;
margin-right: 5px;
}
#navigation a.home:before
{
content: "\f015";
}
#navigation a.shop:before
{
content: "\f07a";
}
#navigation a.forums:before
{
content: "\f086";
}
#navigation a.support:before
{
content: "\f1cd";
}
#side-block-toggle-icon
{
display: none;
text-align: left;
line-height: 60px;
margin-left: 20px;
}
#side-block-toggle-icon:before
{
content: "\f0c9";
font-size: 28px;
color: #FFFFFF;
text-shadow: rgba(0, 0, 0, 1) 0 1px 0;
cursor: pointer;
}
/* HEADER */
#header
{
background-color: #3d5e78;
height: 150px;
margin-bottom: -75px;
}
#logo
{
float: left;
}
#logo a
{
color: #FFFFFF;
text-shadow: rgba(0, 0, 0, 1) 0 1px 0;
line-height: 75px;
}
#logo a:hover
{
text-decoration: none;
}
/* CONTAINER */
#container
{
background-color: #FFFFFF;
box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 7px;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 7px;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 7px;
overflow: hidden;
padding: 20px;
}
/* Breadcrumb */
.breadcrumb
{
background-color: #F5F5F5;
height: 50px;
margin: -20px;
overflow: hidden;
}
.breadcrumb li
{
float: left;
}
.breadcrumb a
{
color: #000000;
text-shadow: #FFFFFF 0 1px 0;
margin-left: 20px;
line-height: 50px;
}
.breadcrumb a:hover
{
color: #CD3816;
}
.breadcrumb-separator
{
margin-left: 20px;
}
#breadcrumb-top
{
margin-bottom: 20px;
border-bottom: #CCCCCC 1px solid;
}
#breadcrumb-bottom
{
margin-top: 20px;
border-top: #CCCCCC 1px solid;
}
#welcome-to,
#all-available-styles
{
text-align: center;
}
#all-available-styles
{
margin-bottom: 25px;
}
#all-available-styles:before,
#all-available-styles:after
{
content: "\f122";
display: inline-block;
font-size: 28px;
position: relative;
top: 10px;
}
#all-available-styles:before
{
transform: rotate(250deg);
-webkit-transform: rotate(250deg);
-ms-transform: rotate(250deg);
-moz-transform: rotate(250deg);
margin-right: 5px;
}
#all-available-styles:after
{
margin-left: 5px;
transform: rotate(100deg) scaleX(-1);
-webkit-transform: rotate(100deg) scaleX(-1);
-ms-transform: rotate(100deg) scaleX(-1);
-moz-transform: rotate(100deg) scaleX(-1);
}
/* FOOTER */
#footer
{
text-align: center;
margin-top: 20px;
}
#footer ul
{
display: inline-block;
}
#footer li
{
float: left;
margin-bottom: 15px;
}
#footer li:not(:first-child):not(:last-child)
{
margin: 0 20px 0 20px;
}
#footer a
{
color: #000000;
text-shadow: #FFFFFF 0 1px 0;
}
#footer a:hover
{
color: #CD3816;
}
#footer-copyright
{
display: block;
color: #808080;
text-shadow: #FFFFFF 0 1px 0;
}
#footer-copyright a
{
color: #808080;
text-shadow: #FFFFFF 0 1px 0;
}
#footer-copyright a:hover
{
color: inherit;
}
/* Footer icons */
#footer a:before
{
font-size: 18px;
margin-right: 5px;
}
#footer a.home:before
{
content: "\f015";
}
#footer a.shop:before
{
content: "\f07a";
}
#footer a.forums:before
{
content: "\f086";
}
#footer a#help:before
{
content: "\f1cd";
}
#expose-mask
{
background-color: rgba(0, 0, 0, 0.6);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
}
/* RESPONSIVENESS */
@media screen and (max-width: 780px)
{
.wrapper
{
padding-left: 0;
padding-right: 0;
}
#navigation
{
position: inherit;
}
#navigation li, #navigation a:before
{
float: none;
line-height: 0;
}
#side-block-toggle-icon
{
display: inherit;
}
#side-block
{
background-color: #283A4A;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 250px;
transform: translateX(-250px);
-webkit-transform: translateX(-250px);
-ms-transform: translateX(-250px);
-moz-transform: translateX(-250px);
}
#side-block a
{
text-align: center;
}
.side-block
{
transform: translateX(250px);
-webkit-transform: translateX(250px);
-ms-transform: translateX(250px);
-moz-transform: translateX(250px);
}
#side-block-toggle-icon a
{
text-align: center;
}
#logo
{
float: none;
text-align: center;
}
#all-available-styles
{
font-size: 24.2px;
}
.slideshow-pause-and-play-icon
{
opacity: inherit;
}
}
You can have a live preview here: http://nextgenfocus.com/test1/ 您可以在这里进行实时预览: http : //nextgenfocus.com/test1/
I'd like have like this: http://foundation.zurb.com/ 我想要这样: http : //foundation.zurb.com/
I know that putting a overflow: hidden
to my html
, the problem is fixed, but I lose the scroll bar... Do you have a solution? 我知道放一个
overflow: hidden
到我的html
,问题是固定的,但我失去了滚动条...你有解决方案吗?
The problem is because your menu is in the wrapper. 问题是因为你的菜单在包装器中。 move your sidemenu out of the wrapper: See it here
将你的sidemenu移出包装器: 在这里看到它
<div id="side-block">
<ul>
<li>
<a href="../." class="home active">Home</a>
</li>
<li>
<a href="../shop/shop.php" class="shop ">Shop</a>
</li>
<li>
<a href="../community/" class="forums">Community</a>
</li>
<li>
<a href="#" class="support ">Support</a>
</li>
</ul>
</div>
<div class="wrapper">
<span id="side-block-toggle-icon" title="Navigation"></span>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.