Angular Material Design 可折叠 sidenav [英] Angular Material Design collapsible sidenav

问题描述

我正在尝试实现有角度的材料设计 sidenav 并且我已经让它正常工作，但我想创建一个如下所示的 sidenav，

并在鼠标悬停时扩展到此

我尝试使用两个侧边导航栏，并在鼠标悬停时显示一个并隐藏另一个，但没有按预期工作.如果你能在这里帮助我，我会很高兴.

编辑

index.html

<md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="small" md-is-locked-open="$mdMedia('gt-sm')" ng-mouseover="hoverIn()" ng-mouseout="hoverOut()"></md-sidenav><md-sidenav flex layout="column" class="rightnav md-whiteframe-z2" ng-show="hoverEdit" md-component-id="big" md-is-locked-open="$mdMedia('gt-sm')"></md-sidenav><div layout="column" flex id="content"><md-content layout="column" flex class="md-padding"></md-content>

app.js

app.controller('AppCtrl', ['$scope', '$mdSidenav', function($scope,$mdSidenav){$scope.edit = true;$scope.hoverEdit = false;$scope.toggleSidenav = function(menuId) {$scope.hoverEdit = true;$mdSidenav(menuId).toggle();};$scope.hoverIn = function(){$scope.hoverEdit = true;$scope.edit = false;};$scope.hoverOut = function(){$scope.hoverEdit = false;$scope.edit = true;};}]);

ma​​in.css

md-sidenav.md-locked-open.rightnav,md-sidenav.md-locked-open-remove.md-closed.rightnav,md-sidenav.md-locked-open.md-closed.rightnav,md-sidenav.md-locked-open.md-closed.rightnav{最小宽度:200px！重要；宽度:自动！重要；最大宽度:700 像素！重要；背景色:#10123B；左边框:2px 实心 #38ddcc；高度:100%；位置:绝对；}md-sidenav.md-locked-open,md-sidenav.md-locked-open-remove.md-closed，md-sidenav.md-locked-open.md-关闭，md-sidenav.md-locked-open.md-closed.md-sidenav-left{最小宽度:50px！重要；宽度:自动！重要；最大宽度:700 像素！重要；背景色:#10123B；左边框:2px 实心 #38ddcc；高度:100%；位置:绝对；}

解决方案

我完成了 AngularJS Sidenav 作为上图...代码如下...

index.html:

 
<md-toolbar layout="column" ><span flex="flex"><div class="md-toolbar-tools">
</md-工具栏><md-内容><div layout="row" ><div ng-mouseenter="hoverIn()" ng-mouseleave="hoverOut()" ><md-sidenav style="位置:固定；"layout="column" ng-class="myClass" md-component-id="small" md-is-locked-open=true ><md-toolbar md-whiteframe="3" ><div class="md-toolbar-tools"><img src="https://www.atlanticaviation.com/docs/default-source/logos-library/atlantic-logo-4c-a2.png?sfvrsn=12" height="30" width="40"/>&nbsp;

</md-工具栏></md-sidenav><md-sidenav flex layout="column" class="rightnav md-whiteframe-z2" ng-show="hoverEdit" md-component-id="big" style="position: fixed;"ng-hide=true md-is-locked-open=true><md-toolbar md-whiteframe="3"><div class="md-toolbar-tools"><img src="https://www.atlanticaviation.com/docs/default-source/logos-library/atlantic-logo-4c-a2.png?sfvrsn=12" height="30" width="50"/>&nbsp;<h5 style="color: #fff;">ARAVINTHAN 菜单</h5><md-button ng-click="toggleClass()" class="cmn-toggle-switch cmn-toggle-switch__htra">切换

</md-工具栏></md-sidenav>

<md-content flex></md-content>