Angular Material Design collapsible sidenav

前端未结

关注

 1  1381

有刺的猬 2021-01-06 01:52

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 o

1条回答

隐瞒了意图╮ (楼主)

2021-01-06 02:40

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

index.html:

    

    
        

      

    

     
    

    
        
          
        
         
        

          
          
      
      
      
        

     
        
          ARAVINTHAN MENU
          
        Toggle

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

.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

0 讨论(0)