amar ghodke amar ghodke - 1 year ago 155
AngularJS Question

angular material material design horizontal nav tabs convert to mobile menu when browser window size changes

I have created AMD page with horizontal tabs using

and i want it to be mobile menu when i change browser size to small size then resize to normal and vice versa like bootstrap mobile that possible ??? thank you in advance.

I have created main page as follows:

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<link rel="stylesheet" href="angular-material/angular-material.css">
<style >
.mainApp md-content .ext-content {
padding: 50px;
margin: 20px;
background-color: #FFF2E0; }
<div id="logo" > <a href="favicon.ico"></div>
<body ng-app="mainApp">
<div ng-controller="AppCtrl" layout="column" ng-cloak>

<script type="text/ng-template" id="views/home.html" ></script>
<script type="text/ng-template" id="views/aboutus.html"></script>
<script type="text/ng-template" id="views/services.html"></script>
<script type="text/ng-template" id="views/contactus.html"></script>

<md-tabs md-stretch-tabs="always" class="md-primary" md-selected="selectedIndex">

<md-tab data-ui-sref="home" md-active="'home') ">

<md-tab data-ui-sref="aboutus" md-active="'aboutus')">
<md-tab-label>ABOUT US</md-tab-label>

<md-tab data-ui-sref="services" md-active="'services')">

<md-tab data-ui-sref="contactus" md-active="'contactus')">
<md-tab-label>CONTACT US</md-tab-label>
<!-- <md-tab id="tab1" label="HOME" aria-controls="tab1-content" md-nav-click="goto('home')"></md-tab>
<md-tab id="tab2" label="ABOUT US" aria-controls="tab2-content" md-nav-click="goto('aboutus)"></md-tab>
<md-tab id="tab3" label="SERVICES" aria-controls="tab3-content" md-nav-click="goto('services')"></md-tab>
<md-tab id="tab4" label="CONTACT US" aria-controls="tab4-content" md-nav-click="goto('contactus')"></md-tab>
--> </md-tabs>

<div id="content" ui-view flex> </div>


<script src="angular/angular.js"></script>
<script src="angular-material/angular-material.js"></script>
<script src="angular-aria/angular-aria.js"></script>
<script src="angular-animate/angular-animate.js"></script>
<script src="angular/angular-ui-router.min.js"></script>
<script src="controller/controller.js"></script>



(function(angular, undefined) {
"use strict";
angular.module('mainApp', ['ngMaterial', 'ui.router'])
.config(function($stateProvider, $urlRouterProvider) {

.state('home', {
url: "/home",
templateUrl: "views/home.html"
.state('aboutus', {
url: "/aboutus",
templateUrl: "views/aboutus.html"
.state('services', {
url: "/services",
templateUrl: "views/services.html"
.state('contactus', {
url: "/contactus",
templateUrl: "views/contactus.html"
.controller('AppCtrl', function($scope,$state, $location, $log) {
$scope.selectedIndex = 0;
$scope.$watch('selectedIndex', function(current, old) {
switch (current) {
case 0:
case 1:
case 2:
case 3:


Answer Source

Here's an example of how you can show and hide elements based on screen size - CodePen

In your code you would swap md-tabs with md-menu or md-menu-bar.

Check the docs for more info on $mdMedia.


<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-fill layout="column" layout-align="center center">
  <div style="width:200px; height:100px; background:red" ng-if="!mobile"></div>
  <div style="width:100px; height:200px; background:blue" ng-if="mobile"></div>


angular.module('MyApp',['ngMaterial', 'ngMessages'])

.controller('AppCtrl', function($scope, $window, $mdMedia) {

  angular.element($window).bind("resize", function() {

  function resizeProgress () {
    if ($mdMedia("gt-xs")) {
      $ = false;
    else if ($mdMedia("xs")) {
      $ = true;

For the menu to work you could do something simple like this:


<md-menu-item><md-button ng-click="showPage(0)">Home</md-button></md-menu-item>
<md-menu-item><md-button ng-click="showPage(1)">About Us</md-button></md-menu-item>


$scope.showPage = function (page) {
   $scope.selectedIndex = page;

However, if you were going to do that I would suggest changing the name selectedIndex to something like selectedLocation.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download