當我的響應式菜單打開時，如何刪除用戶轉到側面的功能？

Question

我使用一些JavaScript函數處理響應式菜單，但我遇到了問題。 到目前為止，我的菜單非常實用，但是當它打開時，我希望用戶沒有機會站在一邊。 這是視頻中的問題： http ： //screencast.com/t/yQkGV9XTJm

這是我的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);

我的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>

和我的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;
    }
}

您可以在這里進行實時預覽： http ： //nextgenfocus.com/test1/

我想要這樣： http ： //foundation.zurb.com/

我知道放一個overflow: hidden到我的html ，問題是固定的，但我失去了滾動條...你有解決方案嗎？

Answer 1

問題是因為你的菜單在包裝器中。 將你的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>