当侧边栏打开时 body 将向左推

Question

我正在尝试构建一种效果，以便当我单击一个按钮时，边栏将打开并将页面 body 推到左侧。我的按钮可以使用，但 body 不会按下 left.Here 是我的完整代码。我尝试为 body 提供更多 class 但没有用。

  $(document).ready(function(){
   $('#sidebar-btn').click(function(){
    $('#sidebar').toggleClass('visible');
    $('.body-menu').toggleClass('.body-menu-left');
   });
  })

body{
 margin:0px;
 padding:0px;
 font-family: "Helvetica Neue", Helvetica, Arial;
}

#sidebar{
 background:black;
 width: 370px;
 height:100%;
 display: block;
 position: fixed;
 left:-370px;
 top:0px;
 transition: left 0.3s linear;
}
#sidebar.visible{
 left:0px;
 transition: left 0.3s linear;
}
ul{
 margin:0px;
 padding: 0px;
 padding-top: 65px;
}
ul li{
 list-style: none;
 padding-top: 10px;
}
ul li a{
 background:black;
 border-bottom:1px solid #111;
 display: block;
 width: 280px;
 padding: 10px;
 text-decoration: none;
}
#font1{
  color:gray;
  font-weight: bold;
  text-decoration: none
}
#font2{
 color:white;
 font-weight: bold;
 text-decoration: none
}
#sidebar-btn{
 display: inline-block;
 vertical-align: middle;
 width:20px;
 height: 15px;
 cursor: pointer;
 margin:20px;
 position: absolute;
 top: 0px;
 right:-60px;
}
#sidebar-btn span{
 height:1px;
 background:white;
 margin-bottom: 5px;
 display: block;
}
#sidebar-btn span:nth-child(2){
 width:75%;
}
#sidebar-btn span:nth-child(3){
 width:50%;
}
#title-menu{
 color: white;
 letter-spacing: 15px; 
 padding-left: 25px;
}
#title-menu > h2{
 padding-left: 20px;
}
/*hover*/
.hvr-underline-from-left {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;

}
.hvr-underline-from-left:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 0;
  background-color: white !important; 
  height: 2px !important;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-underline-from-left:hover:before, .hvr-underline-from-left:focus:before, .hvr-underline-from-left:active:before {
  right:60;
  background-color: white;
}

/*Fliphvr*/
/* Set-up */


/* Container box to set the sides relative to */
.cube {
 width: 30%;
 padding-left: 20px;
 height: 50px;
 -webkit-transition: -webkit-transform .10s;
 transition: transform .10s; /* Animate the transform properties */
 -webkit-transform-style: preserve-3d;
 transform-style: preserve-3d; /* <-NB */
}

/* The two faces of the cube */
.flippety,.flop {
 background: black; 
 height: 50px;
}

/* Position the faces */
.flippety {
 -webkit-transform: translateZ(50px);
 transform: translateZ(50px);
}

.flop {
 -webkit-transform: rotateX(-90deg) translateZ(-50px);
 transform: rotateX(-90deg) translateZ(-50px);
}

/* Rotate the cube */
.cube:hover {
 -webkit-transform: rotateX(89deg);
 transform: rotateX(89deg); /* Text bleed at 90º */
}

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>Sidebar</title>
 <link rel="stylesheet" href="style.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
 <link rel="stylesheet" href="css/hover.css">
 <link rel="stylesheet" href="css/hover-min.css">
 <link rel="stylesheet" href="css/bootstrap.min.css">
 <link rel="stylesheet" href="css/bootstrap-theme.min.css">
</head>
<body background="https://i.ytimg.com/vi/3bvnoqsvY-M/maxresdefault.jpg">
 <div>
 <div id="sidebar">
  <div id="title-menu"><h2>CRIMINAL</h2></div>
  <ul>
   <li><div class="cube">
   <div class="flippety">
   <a href="#" id="font1">HOME</a>
   </div>
   <div class="flop">
   <a href="#" class="hvr-underline-from-left" id="font2">HOME</a>
   </div>
   </div>
   </li>
   <li><div class="cube">
   <div class="flippety">
   <a href="#" id="font1">THE STORY</a>
   </div>
   <div class="flop">
   <a href="#" class="hvr-underline-from-left" id="font2">THE STORY</a>
   </div>
   </div>
   </li><li><div class="cube">
   <div class="flippety">
   <a href="#" id="font1">CAST & FILM MAKERS</a>
   </div>
   <div class="flop">
   <a href="#" class="hvr-underline-from-left" id="font2">CAST & FILM MAKERS</a>
   </div>
   </div>
   </li><li><div class="cube">
   <div class="flippety">
   <a href="#" id="font1">GALLERY</a>
   </div>
   <div class="flop">
   <a href="#" class="hvr-underline-from-left" id="font2">GALLERY</a>
   </div>
   </div>
   </li><li><div class="cube">
   <div class="flippety">
   <a href="#" id="font1">VIDEOS</a>
   </div>
   <div class="flop">
   <a href="#" class="hvr-underline-from-left" id="font2">VIDEOS</a>
   </div>
   </div>
   </li><li><div class="cube">
   <div class="flippety">
   <a href="#" id="font1">ARE YOU A PSYCHOPATH?</a>
   </div>
   <div class="flop">
   <a href="#" class="hvr-underline-from-left" id="font2">ARE YOU A PSYCHOPATH?</a>
   </div>
   </div>
   </li>
  </ul>
 <div id="sidebar-btn">
  <span></span>
  <span></span>
  <span></span>
 </div>
 </div>
 
</body>
</html>

Answer 1

不完全确定您要查找的内容，但在下面的代码片段中，如果您单击 'Menu' 的位置，侧边栏将向左移动。这些链接显然会指向您指定的任何地方

我在 https://jsfiddle.net/RachGal/sokq4956/1/

有一个 fiddle（不久前）

$("#menu-toggle").click(function (e) {
    e.preventDefault();
    $("#wrapper").toggleClass("active");
});

#wrapper {
    padding-left: 70px;
    transition: all .4s ease 0s;
    height: 100%
}

#sidebar-wrapper {
    margin-left: -150px;
    left: 70px;
    width: 150px;
    background: #222;
    position: fixed;
    height: 100%;
    z-index: 10000;
    transition: all .4s ease 0s;
}

.sidebar-nav {
    display: block;
    float: left;
    width: 150px;
    list-style: none;
    margin: 0;
    padding: 0;
}
#page-content-wrapper {
    padding-left: 0;
    margin-left: 0;
    width: 100%;
    height: auto;
}
#wrapper.active {
    padding-left: 150px;
}
#wrapper.active #sidebar-wrapper {
    left: 150px;
}

#page-content-wrapper {
  width: 100%;
}

#sidebar_menu li a, .sidebar-nav li a {
    color: #999;
    display: block;
    float: left;
    text-decoration: none;
    width: 150px;
    background: #252525;
    border-top: 1px solid #373737;
    border-bottom: 1px solid #1A1A1A;
    -webkit-transition: background .5s;
    -moz-transition: background .5s;
    -o-transition: background .5s;
    -ms-transition: background .5s;
    transition: background .5s;
}
.sidebar_name {
    padding-top: 25px;
    color: #fff;
    opacity: .7;
}

.sidebar-nav li {
  line-height: 40px;
  text-indent: 20px;
}

.sidebar-nav li a {
  color: #999999;
  display: block;
  text-decoration: none;
}

.sidebar-nav li a:hover {
  color: #fff;
  background: rgba(255,255,255,0.2);
  text-decoration: none;
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
  text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
  height: 65px;
  line-height: 60px;
  font-size: 18px;
}

.sidebar-nav > .sidebar-brand a {
  color: #999999;
}

.sidebar-nav > .sidebar-brand a:hover {
  color: #fff;
  background: none;
}

.content-header {
  height: 65px;
  line-height: 65px;
}

.content-header h1 {
  margin: 0;
  margin-left: 20px;
  line-height: 65px;
  display: inline-block;
}

@media (max-width:767px) {
    #wrapper {
    padding-left: 70px;
    transition: all .4s ease 0s;
}
#sidebar-wrapper {
    left: 70px;
}
#wrapper.active {
    padding-left: 150px;
}
#wrapper.active #sidebar-wrapper {
    left: 150px;
    width: 150px;
    transition: all .4s ease 0s;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
    <div id="wrapper" class="active">
        <div id="sidebar-wrapper">
      <ul id="sidebar_menu" class="sidebar-nav">
           <li class="sidebar-brand"><a id="menu-toggle" href="#">Menu </a></li>
      </ul>
        <ul class="sidebar-nav" id="sidebar">     
          <li><a href="/index.html">Link1</a></li>
          <li><a>link2</a></li>
        </ul>
      </div>
        <!-- Page content -->
        <div id="page-content-wrapper">
            <!-- Keep all page content within the page-content inset div! -->
            <div class="page-content inset">
                <div class="row">
                    <div class="col-md-12">
                        <p class="well lead">Click on the Menu to Toggle Sidebar </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

希望对您有所帮助

雷切尔

当侧边栏打开时 body 将向左推

When sidebar open the body will push left

html

css

jquery

toggle