sidebar - Angular Material Design 可折叠sidenav

Question

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



并在鼠标悬停时扩展到这个



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

编辑

index.html

<div layout="row" flex>

  <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>
  </div>

</div>

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;
  };

  }]);

main.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 
{
   min-width: 200px !important;
   width: auto !important;
   max-width: 700px !important;
   background-color: #10123B;
   border-left: 2px solid #38ddcc;
   height : 100%;
   position: absolute;
}

md-sidenav.md-locked-open, 
md-sidenav.md-locked-open-remove.md-closed, 
md-sidenav.md-locked-open.md-closed, 
md-sidenav.md-locked-open.md-closed.md-sidenav-left
{
   min-width: 50px !important;
   width: auto !important;
   max-width: 700px !important;
   background-color: #10123B;
   border-left: 2px solid #38ddcc;
   height : 100%;
   position: absolute;
}

Answer 1

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

索引.html:

    <div ng-controller="mainCtrl">

    <md-toolbar layout="column" ><span flex="flex">
        <div class="md-toolbar-tools">

      </div>

    </md-toolbar>

     <md-content>
    <div layout="row" >

    <div ng-mouseenter="hoverIn()" ng-mouseleave="hoverOut()" >
        <md-sidenav  style="position: fixed;" 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;

          </div>
          </md-toolbar>
      </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 MENU</h5>
          <md-button ng-click="toggleClass()" class="cmn-toggle-switch cmn-toggle-switch__htra ">
        Toggle
      </button>
          </div>
               </md-toolbar>
      </md-sidenav>
       </div>
         <md-content flex>

      </md-content>
    </div>
     </md-content>
</div>

样式.css :

/*CSS Styles for the Sidenav Bar */
.rightnav
{
    min-width: 200px !important;
    width: 280px !important;
    max-width: 700px !important;
    height: 100%;
    position: fixed;

    box-sizing: border-box;
    z-index: 60;
    bottom: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;

}

.md-sidenav-opened 
{
   min-width: 200px !important;
   width: 280px !important;
   max-width: 700px !important;
   border: 1px solid #ddd;
}

.md-sidenav-left
{
   min-width: 55px !important;
   width: 55px !important;
   max-width: 700px !important;
   overflow-x:hidden;
}

应用程序.js

//JS Code for Side Nav here
angular.module('anApp', ['ngMaterial'])
        .controller('mainCtrl',['$scope', '$mdSidenav', function($scope,$mdSidenav)
            {
 $scope.myClass = "md-sidenav-left md-whiteframe-z2";
 $scope.option1 = "md-sidenav-opened md-whiteframe-z2";

        $scope.toggleFlag= true;

    $scope.edit = true;
 $scope.hoverEdit = false;
 $scope.size = "5";


    $scope.toggleClass = function() {
    if( $scope.myClass == "md-sidenav-left md-whiteframe-z2" )

        {
            $scope.myClass = "md-sidenav-opened md-whiteframe-z2";
            $scope.toggleFlag = false;
            $scope.size = "25";
        }
    else 
        {
            $scope.myClass = "md-sidenav-left md-whiteframe-z2";
            $scope.toggleFlag = true;
            $scope.size = "5";

        }
    }



           $scope.toggleSidenav = function(menuId) {
              $scope.hoverEdit = true;

           };

          $scope.hoverIn = function(){
              if($scope.toggleFlag)
              {
                  $scope.hoverEdit = true;
                $scope.edit = false;
              }


          };

          $scope.hoverOut = function(){
            if($scope.toggleFlag)
              {
                  $scope.hoverEdit = false;
                    $scope.edit = true;
              }
          };

          }]);

Codepen 示例 - Codepen