md-sidenav toggle（）位于md工具栏的顶部

我希望能够在不隐藏md工具栏左上角部分的情况下切换sidenav，类似于Google Inbox的工作方式：

似乎切换function正在导致它，因为没有动画，sidenav显示在md工具栏下面。

那可能吗？

  
    
 
 Title
  
 
  
    Hey    
       

和app.js.

 var app = angular.module('anApp', ['ngMaterial']) .controller('mainCtrl', ['$scope', '$mdSidenav', '$mdUtil', function ($scope, $mdSidenav, $mdUtil) { $scope.toggleLeft = buildToggler('left'); function buildToggler(navID) { var debounceFn = $mdUtil.debounce(function () { $mdSidenav(navID) .toggle() }, 100); return debounceFn; }}]); 

谢谢！

Answer 1

我也有同样的问题，@ William S的解决方案对我不起作用。 如果SideNav具有相对位置，它将无法正确显示。 我通过将SideNav和Content放在 ：

  
 Menu 
       
Item 1
     Content  

Answer 2

小更新：请注意，这个答案适用于Angular Material 0.10.1。 由于Angular Material还很年轻，这种解决方案可能永远不会起作用，或者会变得多余。

为了使顶部条与sidenav重叠，你必须给它一个比sidenav更高的z-index（任何超过z-index：60都可以）

HTML

    
Good luck overlapping me, sidenavs
   

CSS

 .main-toolbar { /* Put top toolbar on a higher layer than sidenav, which has z-index: 60 */ z-index: 61; /* Cosmetic */ background-color: green; } 

然而，这会使右侧的顶部重叠，这可能不是您想要的。

要使sidenav显示在顶部栏下方，您需要将其从绝对定位更改为相对，并将显示类型更改为块。

为此，您必须覆盖sidenav元素的一些CSS，并将右侧的navnav放在layout =“row”之后的div中。

HTML

CSS

 .md-sidenav-right { /* Cosmetic, show where the fill starts */ background-color: pink; /* Override from absolute to relative */ position: relative; /* Change to block display */ display: block; } 

这是一个使用上述两种变化的codepen。 基本代码取自角度材料演示版本0.10.1 。

http://codepen.io/qvazzler/pen/mJGrya

Answer 3

HTML代码

  
     
Title
   

JS代码

 $scope.onClickMenu = function () { $mdSidenav("left").toggle(); }; 

在以下链接中查找md-toolbar的完整详细信息

md-toolbar的完整细节