css - Prevent swipe page when menu toggled -
i have push-left menu, when clicked hamburger icon, push menu slide in , “push” main content aside when toggled, can swipe page right. see :
i want make main area unswipeable when push menu toggled. here 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 , (max-width: 767px) { .row-offcanvas { position: relative; -webkit-transition: 0.25s ease-out; -moz-transition: 0.25s ease-out; transition: 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 { 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 > { padding-left: 57px; } @media screen , (max-width: 767px) { .paket-navbar-secondary > li > { padding-left: 47px; } } .paket-navbar-secondary { 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 > > { margin-right: 20px; } @media screen , (max-width: 767px) { #sidebar > ul.nav.paket-navbar > li > > { 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 wrong? in advance..
here basic example of side menu.
at first @ structure of html. there 2 blocks: header , page.
header isn't interesting, contain hamburger button (red).
pagecontains 2 blocks: menu , content. has display: flex , hides menu transform: translatex(-200px). menu has fixed width equals width: 200px. when click button, add class opened page , remove transform: translatex(-200px). can see menu. page has overflow-x: hidden , there 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) editor of new-york tribune, democratic , liberal republican candidate in 1872 u.s. presidential election. born poor family in new hampshire, greeley in 1831 went new york city seek fortune. lived there rest of life, spent time @ farm in chappaqua. in 1841, founded tribune, became highest-circulating newspaper in country. urged settlement of american west, popularizing phrase "go west, young man, , grow country", though uncertain if invented it. greeley briefly whig congressman new york, , helped found republican party in 1854. when civil war broke out, supported president abraham lincoln, , urged end of slavery. greeley ran in 1872 in attempt unseat president ulysses grant, administration deemed corrupt, lost in landslide. devastated @ defeat, died 3 weeks after election day.</p> </div> </div> </div>
Comments
Post a Comment