我有一个向左推的菜单，当我点击汉堡包图标时，推式菜单会滑入并在切换时将主要内容“推”到一边，但我可以向右滑动页面。看这个:
我想让主区域在切换推送菜单时不可滑动。这是我的代码:
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>我做错了什么？提前致谢..
最佳答案
这是侧边菜单的基本示例。
首先看一下html的结构。有两个 block :header 和page。
Header 没什么意思，它只包含汉堡包按钮(红色)。
页面包含两个 block :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: 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>关于css - 切换菜单时防止滑动页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38631108/