Question

我创建了一个滑动侧面菜单，可以通过css滑入和滑出。但是，我的问题是，即使侧面菜单滑出视图，右侧的内容也不会跟随它。这是一个angularjs + bootstrap3应用程序。

这是我想要的效果的一个例子： http://wrapbootstrap.com/preview/WB07H3237

当您点击其上有三条水平线的按钮时，它会将菜单切换到侧面并随之移动内容（向左）。

的style.css

.sidebart {
    -moz-transition: left .1s;
    -webkit-transition: left .1s;
    -o-transition: left .1s;
    transition: left .1s;
    width: 210px;
    height:100%;
    background-color:#2a3542;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
}

.slide-outt {
    -moz-transition: left 1s;
    -webkit-transition: left 1s;
    -o-transition: left 1s;
    transition: left 1s;
    left: -210px;

}

partial.html

    <div ng-controller="myCtrl">

<button class="btn btn-default collapse-button" ng-click="click()">Toggle collapse</button>
 <div id="sidebar" class="sidebart" ng-class="{'slide-outt':boolChangeClass}">
<!-- sidebar menu start-->
<ul class="sidebar-menu" id="nav-accordion">
<li>
                                  <a href="#/customer">
                                      <i class="fa fa-user"></i>
                                      <span>Customers</span>
                                  </a>
                              </li>
           <li>
                                  <a href="#/order">
                                      <i class="fa fa-tasks"></i>
                                      <span>Orders</span>
                                  </a>
                              </li
            </div>

controller.js

function myCtrl($scope) {
    $scope.click = function() {
        $scope.boolChangeClass = !$scope.boolChangeClass;
        //$scope.$apply();
    };
}

Answer 1

在您提供的示例链接中，有两个重要的课程在您的问题中没有提到：

.main-content-wrapper {
    margin-left: 240px;
    ...
    transition: all .3s ease-in-out;
}
.main-content-toggle-left {
    margin-left: 0;
}

margin-left: 240px上的.main-content-wrapper将主要内容颠覆到右侧以容纳侧边栏。关闭侧边栏时，会应用.main-content-toggle-left，因此会通过margin-left: 0;减少边距。这会将主要内容移回到拥抱屏幕的左侧。最后，transition: all .3s ease-in-out;匹配侧边栏上的转换，确保它们都以相同的速率移动。

在您的情况下，您使用left: -210px课程中的.slide-outt而不是边距，大概是期望如果侧边栏移开主要内容将会跟随。但是，由于您在侧栏it doesn't push other elements out of the way上使用position: absolute，因此在应用left: -210px时不会影响页面流。

要使您的主要内容跟随侧边栏，您需要对主要内容应用转换，以便以相同的费率向左移动。必要的样式完全取决于主要内容的当前位置，但可能的常见选项包括更改其left值，如侧边栏或使用边距。

有关详细信息，请参阅position，left和margin上的MDN文档。请注意，left和margin - 与许多属性一样 - 将根据元素的定位类型产生不同的结果。

内容不随滑动侧菜单移动

1 个答案: