0
我有一個左推菜單，當我點擊漢堡圖標時，推菜單將滑入並在切換時「推」主要內容，但我可以將頁面向右滑動。看到這一點：切換菜單時防止滑動頁面
我要讓主區域unswipeable當推菜單翻轉。這裏是我的代碼：
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>我做了什麼錯？在此先感謝..
你可以結合你的CSS和HTML。現在沒有用。 – 3rdthemagical
我不知道如何清楚。如果您不介意，請查看此網站：https：//paket.id並將其設置爲移動視圖@ 3rdthemagical – may
overflow-x：hidden'？ –