This is continuation of previous article. In previous article, I have explained header design. Now I will explain side navigation panel. I am going to use previous article code so please read the previous article first.Whenever user clicks on left most menu icon, side navigation panel has to be displayed.
Add Menu Button To Header
Add this below menu button
<md-button class="md-icon-button" aria-label="Side Panel" ng-click="openSideNavPanel()">
<md-tooltip>Side Panel</md-tooltip> <md-icon class="md-default-theme" class="material-icons"></md-icon> </md-button>
Side Navigation Code
Here you can find md-component-id="left" in below code. This id will be used for opening and closing side panels. Here md-sidenav-left is the class which keeps panel left side.
<md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left"> <md-toolbar layout="row"> <div class="md-toolbar-tools"> <h2> <span>Side Panel</span> </h2> <span flex></span> <md-button class="md-icon-button" aria-label="Close Side Panel" ng-click="closeSideNavPanel()"> <md-tooltip>Close Side Panel</md-tooltip> <md-icon class="md-default-theme" class="material-icons"></md-icon> </md-button> </div> </md-toolbar> <md-content layout-padding=""> Side navigation Panel </md-content> </md-sidenav>
JS Code for Side Navigation Panel
Add below side navigation code to controller
angular.module('MyApp') .controller('AppCtrl', function($scope, $mdSidenav) { $scope.showMobileMainHeader = true; $scope.openSideNavPanel = function() { $mdSidenav('left').open(); }; $scope.closeSideNavPanel = function() { $mdSidenav('left').close(); }; })
Add List Items To Left Side Navigation Panel
Add list items to side panel. Observe the below code. The yellow highlighted code was headings and the dividers were highlighted with orange color.
<md-list> <md-subheader class="md-no-sticky">Favorites</md-subheader> <md-list-item> <md-icon class="md-default-theme" class="material-icons"></md-icon> <p>Messages</p> <div class="md-secondary">2</div> </md-list-item> <md-list-item> <md-icon class="md-default-theme" class="material-icons"></md-icon> <p>Events</p> <md-icon class="md-secondary">2</md-icon> </md-list-item> <md-list-item> <md-icon class="md-default-theme" class="material-icons"></md-icon> <p>Photos</p> <md-icon class="md-secondary">2</md-icon> </md-list-item> <md-divider></md-divider> <md-subheader class="md-no-sticky">Pages</md-subheader> <md-list-item> <md-icon class="md-default-theme" class="material-icons"></md-icon> <p>Pages Feed</p> <div class="md-secondary">2</div> </md-list-item> <md-list-item> <md-icon class="md-default-theme" class="material-icons"></md-icon> <p>Like Pages</p> <div class="md-secondary">20+</div> </md-list-item> </md-list>
Add this Panel to Right Side
Instead of using md-sidenav-left, use md-sidenav-right class. md-sidenav-right will keeps the panel right side
<md-sidenav class="md-sidenav-right md-whiteframe-z2" md-component-id="left"> <md-toolbar layout="row"> <div class="md-toolbar-tools"> <h2> <span>Side Panel</span> </h2> <span flex></span> <md-button class="md-icon-button" aria-label="Close Side Panel" ng-click="closeSideNavPanel()"> <md-tooltip>Close Side Panel</md-tooltip> <md-icon class="md-default-theme" class="material-icons"></md-icon> </md-button> </div> </md-toolbar> <md-content layout-padding=""> Side navigation Panel </md-content> </md-sidenav>
Please i nedd the source code
ReplyDeletedownload link was shared in above article, you need to subscribe and download
DeleteThanks!!
Deleteok
ReplyDeleteWhy don't you guys follow through with what you said. I signed up and didn't get any source code link. Liars.
ReplyDeletePlease have some patience..it will take 30 minutes to activate. Try now
DeleteThankyou, Cheers for the help
ReplyDeleteIf I need always keep the same z-order between the sidenav and the main content? How I do?
ReplyDeleteThank you
ReplyDeleteboss i need Side Navigation drawer for mobile app
ReplyDeleteif i need to show ^ in place of cross inorder to open close the menu then?
ReplyDeletehow can I subscribe?
ReplyDeleteWe at Dextemade beamed many diversified brands. And we are also honored to provide you Development, Digital Marketing, 2D / 3D Animation, Graphics Design, and 3D Designing Services to beam your brand / aim too. With our complete preparation. We have a team with very high leading expert professionals.
ReplyDeleteCodeaze is the reliable and the trustworthy name in the world of web development and have helped a number of brands in designing and developing their websites.
ReplyDeleteAddress: Asia Pacific Trade Center, Rashid Minhas Rd, Karachi
Email: info@codeaze.org
Phone: 0316 2586964 Codeaze