This article is for handling overflown menu items in mobile web. Whenever you create header menu with lot many menu items, How will you handle them in mobile web ? , yes, using media queries.  Lets design this functionality. Here I am using some example code from previous article, so please read previous article before reading this article

Header Design

Observe below design. It contains many icons right side. It won't fit into mobile device web browser.
So we need to use media queries to get below look and feel
Here you can find right most more icon button. Whenever user clicks on that icon, One sheet with all options  has to be opened.

Using Bottom Sheet

Here whenever user clicks on more icon, The bottom sheet will be shown like below screen. Find below code for bottom sheet. Here md-list class is responsible for list display
<script type="text/ng-template" id="/bottom-list-sheet.html">
<md-bottom-sheet class="md-list">
 <md-list>
 <md-list-item>
   <md-icon class="md-default-theme" class="material-icons">&#xE851;  </md-icon>
   <p>User</p>
 </md-list-item>
 <md-list-item>
   <md-icon class="md-default-theme" class="material-icons">&#xE0C9;</md-icon>
   <p>Messages</p>
 </md-list-item>
 <md-list-item>
   <md-icon class="material-icons">&#xE150;</md-icon>
   <p>Create Post</p>
 </md-list-item>
 <md-list-item>
   <md-icon class="md-default-theme" class="material-icons">&#xE8B8;  </md-icon>
   <p>Settings</p>
  </md-list-item>
  <md-list-item>
   <md-icon class="material-icons">&#xE7F4;</md-icon>
   <p>Alerts</p>
  </md-list-item>
  <md-list-item>
   <md-icon class="material-icons">&#xE887;</md-icon>
   <p>Help</p>
  </md-list-item>
 </md-list>
</md-bottom-sheet>
</script>

JS Code

Here you can find JS code. The bottom sheet will be displayed whenever showListBottomSheet called
angular.module('MyApp')
.controller('AppCtrl', function($scope, $mdSidenav, $mdBottomSheet) {
    $scope.showMobileMainHeader = true;
    
    $scope.showListBottomSheet = function($event) {
        $mdBottomSheet.show({
          templateUrl: '/bottom-list-sheet.html',
          targetEvent: $event
        });
    };  
});

More Button Code

<md-button class="md-icon-button" aria-label="More" ng-click="showListBottomSheet()">
    <md-tooltip>More</md-tooltip>
    <md-icon class="material-icons">&#xE5D4;</md-icon>
</md-button>
Here showListBottomSheet  will be called, when user clicks on more icon button. Find below code for more button functionality

Grid List

In above example, we are showing more options as list items, but we can show the list in grid also. It needs little HTML and JS changes

HTML Code

Observe the below code. md-grid class is responsible for grid view display. md-grid-item-content class gives grid look to button
<md-bottom-sheet class="md-grid">
  <md-list>
    <md-list-item>
      <md-button class="md-grid-item-content">
         <md-icon class="md-default-theme" class="material-icons">&#xE851;</md-icon>
         <div class="md-grid-text">User</div>
      </md-button>
    </md-list-item>
    <md-list-item>
      <md-button class="md-grid-item-content">
         <md-icon class="md-default-theme" class="material-icons">&#xE0C9;</md-icon>
         <div class="md-grid-text">Messages</div>
      </md-button>
    </md-list-item>
    <md-list-item>
      <md-button class="md-grid-item-content">
         <md-icon class="material-icons">&#xE150;</md-icon>
         <div class="md-grid-text">Create Post</div>
      </md-button>
    </md-list-item>
    <md-list-item>
      <md-button class="md-grid-item-content">
         <md-icon class="md-default-theme" class="material-icons">&#xE8B8;</md-icon>
         <div class="md-grid-text">Settings</div>
      </md-button>
    </md-list-item>
    <md-list-item>
      <md-button class="md-grid-item-content">
         <md-icon class="material-icons">&#xE7F4;</md-icon>
         <div class="md-grid-text">Alerts</div>
      </md-button>
    </md-list-item>
    <md-list-item>
      <md-button class="md-grid-item-content">
         <md-icon class="material-icons">&#xE887;</md-icon>
         <div class="md-grid-text">Help</div>
      </md-button>
    </md-list-item>
  </md-list>
</md-bottom-sheet>
Click here to see DEMO    Download Code

Using right side panel

You can implement this by using right side panel also. Read previous article to know how side panel works. 

0 comments:

Blogroll

Follow this blog by Email

Popular Posts