Mai Munah Mai Munah - 4 months ago 31
CSS Question

Prevent swipe page when menu toggled

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 :

normal view

when push menu active

swipe menu to the right

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

Answer

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>