菜单切换时防止滑动页面

Question

我有一个左推菜单，当我点击汉堡包图标时，推送菜单将滑入并在切换时“推”主要内容，但我可以向右滑动页面。见：

我想在切换推送菜单时使主区域不可擦除。这是我的代码：

＆＃13;

＆＃13;

d = dict(zip(keys, f()))

＆＃13;

html {
        position: relative;
        min-height: 100%;
    }

    body {
        font-family: 'Titillium Web', sans-serif;
        background-color: #fbfbfb;
        overflow-x: hidden;
    }
    #sidebar {
        height: 100%;
        padding-right: 0;
        padding-top: 20px;
        max-width: 300px;
    }

    #sidebar .nav {
        width: 95%;
    }
    /* collapsed sidebar styles */

    @media screen and (max-width: 767px) {
        .row-offcanvas {
            position: relative;
            -webkit-transition: all 0.25s ease-out;
            -moz-transition: all 0.25s ease-out;
            transition: all 0.25s ease-out;
        }
        .row-offcanvas-right .sidebar-offcanvas {
            right: -41.6%;
        }
        .row-offcanvas-left .sidebar-offcanvas {
            left: -41.6%;
        }
        .row-offcanvas-right.active {
            right: 41.6%;
        }
        .row-offcanvas-left.active {
            left: 41.6%;
        }
        .sidebar-offcanvas {
            position: absolute;
            top: 0;
            width: 41.6%;
        }
    }
    /* navbar override */

    .navbar-toggle,
    .navbar-toggle:hover,
    .navbar-toggle:focus,
    .navbar-toggle:active {
        float: left;
        background-color: #fff !important;
        margin: 12px 0px 8px 15px;
    }

    .navbar-toggle .icon-bar {
        background-color: #ddd !important;
    }

    .navbar-toggle:hover .icon-bar,
    .navbar-toggle:focus .icon-bar,
    .navbar-toggle:active .icon-bar {
        background-color: #03A9F4 !important;
    }

    .navbar-default {
        background-color: #fff;
    }

    .navbar-brand {
        padding-top: 10px;
        /* padding-left: 28px; */
    }

    .navbar {
        min-height: 60px;
        margin-bottom: 0px;
        border-bottom: 1px solid #E2F1FF;
    }

    .navbar-dashboard .navbar-brand {
        padding-left: 28px;
    }

    .paket-navbar {
        font-size: 1.3em;
    }

    .paket-navbar a {
        color: #3E3E3E;
        line-height: 30px;
    }

    .paket-navbar a:hover {
        color: #03A9F4;
        background-color: transparent !important;
    }

    .paket-navbar-secondary {
        margin-top: 10px;
    }

    .paket-navbar-secondary > li > a {
        padding-left: 57px;
    }

    @media screen and (max-width: 767px) {
        .paket-navbar-secondary > li > a {
            padding-left: 47px;
        }
    }

    .paket-navbar-secondary a {
        color: #858585;
        line-height: 25px;
    }

    .paket-navbar-secondary a:hover {
        color: #03A9F4;
        background-color: transparent !important;
    }

    .paket-navbar>li.active>a {
        color: #03A9F4;
    }

    #sidebar > ul.nav.paket-navbar > li > a > i {
        margin-right: 20px;
    }
    @media screen and (max-width: 767px) {
        #sidebar > ul.nav.paket-navbar > li > a > i {
            margin-right: 10px;
        }
    }

＆＃13;

＆＃13;

＆＃13;

我做错了什么？提前谢谢..

Answer 1

以下是侧边菜单的基本示例。

首先看一下html的结构。有两个块：header和page。

Header并不有趣，它只包含汉堡包按钮（红色）。

Page包含两个块：menu和content。它有display: flex并隐藏了transform: translateX(-200px)的菜单。 Menu的固定宽度等于width: 200px。单击按钮后，您将课程opened添加到page并删除transform: translateX(-200px)。所以你现在可以看到一个菜单。但是page有overflow-x: hidden并且没有水平滚动。

＆＃13;

＆＃13;

$('.button').on('click', function() {
    $('.page').toggleClass('opened');
});

＆＃13;

* {
    box-sizing: border-box;
}
.screen {
    width: 320px;
    height: 480px;
    border: 1px solid;
  
    overflow-x: hidden;
    overflow-y: auto;
}
.page {
    display: flex;
    align-items: stretch;
  
    transition: transform ease .3s;
    transform: translateX(-200px);
}
.page.opened {
    transform: translateX(0);
}
.menu {
    flex: 0 0 auto;
    width: 200px;
    background: black;
    color: white;
}
.content {
    flex: 0 0 100%;
    width: 100%;
    padding: 20px;
}
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  
    padding: 10px 20px;
    background: gray;
}
.button {
    width: 30px;
    height: 30px;
    background: red;
    cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="screen">
  <header class="header">
    <div class="button"></div>
    <span>Header</span>
  </header>
  <div class="page">
    <div class="menu">
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
    <div class="content">
      <h1>Title</h1>
      <h2>Subtitle</h2>
      <p>Some text.</p>
      <p>Horace Greeley (1811–1872) was editor of the New-York Tribune, as well as the Democratic and Liberal Republican candidate in the 1872 U.S. presidential election. Born to a poor family in New Hampshire, Greeley in 1831 went to New York City to seek his fortune. He lived there the rest of his life, but also spent much time at his farm in Chappaqua. In 1841, he founded the Tribune, which became the highest-circulating newspaper in the country. He urged the settlement of the American West, popularizing the phrase "Go West, young man, and grow up with the country", though it is uncertain if he invented it. Greeley was briefly a Whig congressman from New York, and helped found the Republican Party in 1854. When the Civil War broke out, he mostly supported President Abraham Lincoln, and urged the end of slavery. Greeley ran in 1872 in an attempt to unseat President Ulysses Grant, whose administration he deemed corrupt, but lost in a landslide. Devastated at the defeat, he died three weeks after Election Day.</p>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;