角材料设计可折叠sidenav

本文介绍了角材料设计可折叠sidenav的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试实现有角度的材料设计sidenav，我已经使其正常工作，但是我想创建一个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;
}

解决方案

我完成了AngularJS Sidenav，如上图所示...代码在下面给出...

index.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>

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

App.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

I am trying to implement angular material designs sidenav and I've got it to work correctly but I wanted to create a sidenav as shown below,

and on mouse over expands to this

I tried using two sidenav bars and on mouseover show one and hide the other but that din't work as expected.Would be glad if you could help me out here.

EDIT

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

解决方案

I am Completed the AngularJS Sidenav as the Above Image...And the Codes are Given Below...

index.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>

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

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

          }]);

The Codepen Example - Codepen

这篇关于角材料设计可折叠sidenav的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！