菜单切换时防止滑动页面 [英] Prevent swipe page when menu toggled

查看：27
本文介绍了菜单切换时防止滑动页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个左推菜单，当我点击汉堡图标时，推菜单会滑入并在切换时将主要内容推"到一边，但我可以向右滑动页面.看到这个:

我想让主区域在切换推送菜单时不可滑动.这是我的代码:

html {位置:相对；最小高度:100%；}身体 {字体系列:'Titillium Web'，无衬线；背景颜色:#fbfbfb；溢出-x:隐藏；}#侧边栏{高度:100%；填充右:0;填充顶部:20px；最大宽度:300px；}#sidebar .nav {宽度:95%；}/* 折叠侧边栏样式 */@media 屏幕和(最大宽度:767px){.row-offcanvas {位置:相对；-webkit-transition:所有 0.25 秒缓出；-moz-transition:所有 0.25 秒缓出；过渡:所有 0.25 秒缓出；}.row-offcanvas-right .sidebar-offcanvas {右:-41.6%；}.row-offcanvas-left .sidebar-offcanvas {左:-41.6%；}.row-offcanvas-right.active {正确:41.6%；}.row-offcanvas-left.active {左:41.6%；}.sidebar-offcanvas {位置:绝对；顶部:0；宽度:41.6%；}}/* 导航栏覆盖 */.navbar-toggle,.navbar-toggle:hover,.navbar-toggle:focus,.navbar-toggle:active {向左飘浮;背景色:#fff !important;边距:12px 0px 8px 15px；}.navbar-toggle .icon-bar {背景颜色:#ddd ！重要；}.navbar-toggle:hover .icon-bar,.navbar-toggle:focus .icon-bar,.navbar-toggle:active .icon-bar {背景颜色:#03A9F4 ！重要；}.navbar-default {背景色:#fff;}.navbar-brand {填充顶部:10px；/* padding-left: 28px;*/}.导航栏{最小高度:60px；底边距:0px；边框底部:1px 实心 #E2F1FF；}.navbar-dashboard .navbar-brand {左边距:28px；}.paket-导航栏{字体大小:1.3em；}.paket-navbar a {颜色:#3E3E3E；行高:30px；}.paket-navbar a:hover {颜色:#03A9F4；背景颜色:透明！重要；}.paket-navbar-secondary {边距顶部:10px；}.paket-navbar-secondary >立>一种 {左边距:57px；}@media 屏幕和(最大宽度:767px){.paket-navbar-secondary >立>一种 {左边距:47px；}}.paket-navbar-secondary a {颜色:#858585；行高:25px；}.paket-navbar-secondary a:hover {颜色:#03A9F4；背景颜色:透明！重要；}.paket-navbar>li.active>a {颜色:#03A9F4；}#侧边栏 >ul.nav.paket-navbar >立>＞一世 {右边距:20px；}@media 屏幕和(最大宽度:767px){#侧边栏 >ul.nav.paket-navbar >立>＞一世 {右边距:10px；}}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><身体><div class="page-container"><!-- 顶部导航栏--><div class="navbar navbar-default navbar-static-top" role="navigation"><div class="container-fluid"><div class="navbar-header navbar-dashboard"><button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".sidebar-nav"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><a class="navbar-brand" href="<?php echo base_url('home') ;?>"><img src="<?php echo base_url('asset/img/paketid-logo-240.png')?>"alt="数据包 ID" height="40" width="120"></a><p class="nav-username pull-right navbar-text visible-xs"><?php echo ($this->session->username ? $this->session->username : strtok($this->session->user_email,'@'));?></p>

<p class="nav-username pull-right navbar-text hidden-xs"><?php echo ($this->session->username ? $this->session->username : strtok($this->session->user_email,'@'));?></p>

<div class="container-fluid"><div class="row row-offcanvas row-offcanvas-left"><!-- 侧边栏--><div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation"><ul class="nav paket-navbar"><li <?php if ($_controller=="dashboard")echo "class='active'"?>><a href="<?php echo base_url('dashboard')?>"><i class="fi flaticon-home"></i>仪表板</a></li><li <?php if ($_controller=="book")echo "class='active'"?><a href="<?php echo base_url('book')?>"><i class="fi flaticon-copy"></i>书<li <?php if ($_controller=="settings")echo "class='active'"?>><a href="<?php echo base_url('settings')?>"><i class="fi flaticon-setting"></i>设置</a></li><li><a href="<?php echo base_url('login/logout')?>"onclick="return signOut();"><i class="fi flaticon-caret-left"></i>退出

我做错了什么?提前致谢..

解决方案

这里是侧边菜单的基本示例.

首先看html的结构.有两个块:header 和 page.

Header 没什么意思，它只包含汉堡按钮(红色).

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

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

* {box-sizing: 边框框；}.屏幕 {宽度:320px；高度:480px；边框:1px 实心；溢出-x:隐藏；溢出-y:自动；}.页 {显示:弹性；对齐项目:拉伸；转换:转换轻松 0.3 秒；变换:translateX(-200px);}.page.opened {变换:translateX(0);}.菜单 {弹性:0 0 自动；宽度:200px；背景:黑色；白颜色;}.内容 {弹性:0 0 100%；宽度:100%；填充:20px；}.header {显示:弹性；对齐内容:间隔；对齐项目:居中；填充:10px 20px；背景:灰色；}.按钮 {宽度:30px；高度:30px；背景:红色；光标:指针；}

<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>标题</span></标题><div class="page"><div class="菜单"><ul><li>项目 1</li><li>项目 2</li><li>项目 3</li>

<div class="内容"><h1>标题</h1><h2>副标题</h2><p>一些文字.</p><p>Horace Greeley (1811–1872) 是纽约论坛报的编辑，也是 1872 年美国总统大选的民主党和自由共和党候选人.格里利出生于新罕布什尔州的一个贫困家庭，1831 年前往纽约寻求财富.他在那里度过了余生，但也在他位于查帕夸的农场度过了很长时间.1841 年，他创办了《论坛报》，成为该国发行量最高的报纸.他敦促在美国西部定居，普及了去西部，年轻人，与国家一起成长"这句话，尽管不确定是否是他发明的.格里利曾短暂担任过来自纽约的辉格党国会议员，并于 1854 年帮助创立了共和党.内战爆发时，他主要支持亚伯拉罕·林肯总统，并呼吁结束奴隶制.格里利于 1872 年竞选总统，试图推翻尤利西斯·格兰特总统，他认为他的政府腐败，但以压倒性优势失败.他对失败感到沮丧，在选举日三周后去世.</p>

I have a push-left menu, when I clicked the hamburger icon, push menu will slide in and "push" the main content aside when toggled, but I can swipe the page to the right. See this :

I want to make the main area unswipeable when push menu is toggled. Here is my code :

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;
        }
    }

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
    <div class="page-container">
        <!-- top navbar -->
        <div class="navbar navbar-default navbar-static-top" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header navbar-dashboard">
                    <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".sidebar-nav">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="<?php echo base_url('home') ;?>"><img src="<?php echo base_url('asset/img/paketid-logo-240.png')?>" alt="Paket ID" height="40" width="120"></a>
                    <p class="nav-username pull-right navbar-text visible-xs"><?php echo ($this->session->username ? $this->session->username : strtok($this->session->user_email,'@')); ?></p>
                </div>
                <p class="nav-username pull-right navbar-text hidden-xs">
                <?php echo ($this->session->username ? $this->session->username : strtok($this->session->user_email,'@')); ?>
                </p>
            </div>
        </div>
        <div class="container-fluid">
            <div class="row row-offcanvas row-offcanvas-left">
                <!-- sidebar -->
                <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
                    <ul class="nav paket-navbar">
                        <li <?php if ($_controller=="dashboard")echo "class='active'"?>><a href="<?php echo base_url('dashboard')?>"><i class="fi flaticon-home"></i> Dashboard</a></li>
                        <li <?php if ($_controller=="book")echo "class='active'"?>><a href="<?php echo base_url('book')?>"><i class="fi flaticon-copy"></i> Book</a></li>
                        <li <?php if ($_controller=="settings")echo "class='active'"?>><a href="<?php echo base_url('settings')?>"><i class="fi flaticon-setting"></i> Settings</a></li>
                        <li><a href="<?php echo base_url('login/logout')?>" onclick="return signOut();"><i class="fi flaticon-caret-left"></i> Sign out</a></li>
                    </ul>
                </div>

What did I do wrong? Thanks in advance..

解决方案

Here is a basic example of side menu.

At first look at structure of html. There are two blocks: header and page.

Header isn't interesting, it just contain hamburger button (red).

Pagecontains two blocks: menu and content. It has display: flex and hides menu by transform: translateX(-200px). Menu has fixed width that equals width: 200px. When you click button, you add class opened to page and remove transform: translateX(-200px). So you can see now a menu. But page has overflow-x: hidden and there is no horizontal scroll.

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

* {
    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;
}

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

这篇关于菜单切换时防止滑动页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆