Question

所以我通过建立一个投资组合SPA来学习，我真的想使用md-sidenav，到目前为止它可以工作，但它显示在我的内容之上，我希望它只是将我的内容推到正确的时候打开。

var app = angular.module('myApp', ['ngMaterial']);
app.controller('MyController', function($scope, $mdSidenav) {
  $scope.openLeftMenu = function() {
    $mdSidenav('left').toggle();
  };
});

HTML

 <div layout="row" ng-controller="MyController">
              <!--MENU ICON AND FUNCTION  -->
<md-button ng-click="openLeftMenu()">
  <a><i class="material-icons medium">menu</i></a>
</md-button>




              <md-sidenav  md-component-id="left" class="md-sidenav-left md-whiteframe-z2" style="background-color: white;" >

                    <div class="container" style="    margin-top: 30px;
                width: 90%;">
                          <img class="circle  responsive-img ram " src="assets/avatar.png" style="margin-left: 13%">
                          <p style="font-weight:bold;
                          text-decoration:underline;color:#FF5E19;
                          letter-spacing:1pt;word-spacing:2pt;
                          font-size:18px;text-align:center;font-family:arial, helvetica, sans-serif;
                          line-height:1;">Ramin Joseph</p>



                     </div>
                     <div class="nav-wrapper">
                     <div class="col l12 s12 m12">
                    <ul style=" text-align:center;">
                      <li class="sbar"><a href="#">About</a></li>
                      <li class="sbar"><a href="#">Portfolio</a></li>
                      <li class="sbar"><a href="#">Shop</a></li>
                      <li class="sbar"><a href="#">Contact</a></li>
                    </ul>
                    </div>
                  </div>    

              </md-sidenav>

Answer 1

在search.df元素上使用属性md-is-locked-open。

但是，您必须更改逻辑如何打开sidenav。我会通过将md-sidenav绑定到模型状态属性然后在click事件上自己切换来实现它：

md-is-locked-open

Answer 2

对于新的Angular Material版本

在mode="push"

中添加<md-sidenav>.

<md-sidenav mode="push">

</md-sidenav>

请参阅：Sidenave | Angular Material | Mode

MD-Sidenav。当sidenav打开时，如何将主要内容推向右侧？

2 个答案: