Skip to content

Instantly share code, notes, and snippets.

@noili

noili/collapsible-sidenav.html

Created April 6, 2017 13:13
Show Gist options
  • Save noili/f534d05ee63d0d350324c33ecc16e858 to your computer and use it in GitHub Desktop.
Save noili/f534d05ee63d0d350324c33ecc16e858 to your computer and use it in GitHub Desktop.
Download ZIP
collapsible-sidenav
Raw
collapsible-sidenav.html
<html>
<head>
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js">
</script>
</head>
<body ng-app="anApp">
<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>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment