Post
Ask Question

Menus In Grid Using Ionic Framework

Introduction

 
In a previous article, we started with the Ionic framework and discussed the Visual Studio Code where we are going to implement our applications. Now we are going to implement a small application where we will make some menus in the form of the grid using ionic.
 
Step 1: Open Visual Studio Code,
 
Code
 
Step 2: Now after starting Visual studio Code, open a folder where you want to put your application,
 
application
 
Step 3: Create a new folder and name it Ionic_Grid_Menu,
 
Ionic_Grid_Menu
 
And select that folder,
 
folder
 
After we created the folder we can see an Explorer opened with two tabs,
  1. Working Files: shows the present files are in work.
  2. IONIC_GRID_MENU: shows all the files in the folder.
Step 4: Create the files,
 
Create
  1. index.html
  2. ionic.min.css
  3. style.css
  4. ionic.bundle.min.js
  5. script.min.js
file
 
Step 5: Let’s code for the application,
 
index.html:
  1. <html ng-app="ionicApp">  
  2.   
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">  
  6.     <title> Menu Buttons</title>  
  7.     <link href="Style\ionic.min.css" rel="stylesheet">  
  8.     <link href="Style\style.css" rel="stylesheet">  
  9.     <script src="JS\ionic.bundle.min.js"></script>  
  10.     <script src="JS\Script.bundle.js"></script>  
  11. </head>  
  12.   
  13. <body ng-controller="MyCtrl">  
  14.   
  15.     <ion-header-bar class="bar-positive">  
  16.         <div class="buttons">  
  17.             <h1 class="title">Menu buttons</h1>  
  18.         </div>  
  19.     </ion-header-bar>  
  20.   
  21.     <ion-content id="fhm_page">  
  22.         <div class="fhm_container">  
  23.             <div class="fhm_row">  
  24.                 <div class="fhm_item fhm_item1">  
  25.                     <span>Article</span>  
  26.                 </div>  
  27.                 <div class="fhm_item fhm_item2">  
  28.                     <span> Blog</span>  
  29.                 </div>  
  30.             </div>  
  31.             <div class="fhm_row">  
  32.                 <div class="fhm_item fhm_item3">  
  33.                     <span> News</span>  
  34.                 </div>  
  35.                 <div class="fhm_item fhm_item4">  
  36.                     <span>Video</span>  
  37.                 </div>  
  38.             </div>  
  39.             <div class="fhm_row">  
  40.                 <div class="fhm_item fhm_item5">  
  41.                     <span>Job</span>  
  42.                 </div>  
  43.                 <div class="fhm_item fhm_item6">  
  44.                     <span>Book</span>  
  45.                 </div>  
  46.             </div>  
  47.         </div>  
  48.     </ion-content>  
  49.   
  50. </body>  
  51.   
  52. </html>  
style.css
  1. body {  
  2.     cursor: url('http://ionicframework.com/img/finger.png'),  
  3.     auto;  
  4. }  
  5.  
  6. #fhm_page.scroll,  
  7.     .fhm_container  
  8.     {  
  9.         position: absolute;  
  10.         top: 0;  
  11.         right: 0;  
  12.         left: 0;  
  13.         bottom: 0;  
  14.     }  
  15.   
  16. .fhm_row  
  17. {  
  18.     /* position: absolute; */  
  19.     height: 33.3 % ;  
  20.     left: 0;  
  21.     right: 0;  
  22.     background - color: #FF0000;  
  23.     clear: both;  
  24. }  
  25.   
  26. .fhm_item  
  27. {  
  28.     height: 100 % ;  
  29.     width: 49.95 % ;  
  30.     font - family: Arial,  
  31.     Helvetica,  
  32.     sans - serif;  
  33.     font - size: 50 px;  
  34.     color: white;  
  35.     text - align: center;  
  36.     border: 1 px solid# FFFFFF;  
  37.     float: left;  
  38.     position: relative;  
  39. }  
  40.   
  41. .fhm_item1  
  42. {  
  43.     background - color: #1d8a77;   
  44. }  
  45.   
  46. .fhm_item2  
  47. {  
  48. background-color: # ff6600;  
  49. }  
  50. .fhm_item3   
  51. {  
  52.     background - color: #dd5151;  
  53. }  
  54. .fhm_item4   
  55. {  
  56.     background - color: #6bc042;  
  57. }  
  58. .fhm_item5   
  59. {  
  60. background-color: # ffca2a;  
  61. }  
  62. .fhm_item6  
  63. {  
  64.     background - color: #0086dc;  
  65. }  
  66. span{  
  67. position: absolute;  
  68. top:0;  
  69. right:0;  
  70. left:0;  
  71. bottom:0;  
  72. margin: auto;  
  73. width:100%;  
  74. height: 10%;   
  75. }  
ionic.min.css
 
Download the file from the url
 
script.bundle.js
  1. angular.module('ionicApp', ['ionic'])  
  2.   
  3. .controller('MyCtrl', function($scope)  
  4. {  
  5.   
  6. });  
  7. ionic.bundle.min.js  
Download the file from the url.
 
Now we have completed code for our application now run it. Here are the steps,
  1. Press Ctrl+Shift+P.
     
  2. >ext install chrome (Debugger for Chrome)
     
    Note:
     
    Don’t write ext install chrome at once it will not give any output, so first write ext install & press enter and wait for its output and after u will get a list, then write chrome preceding to ext install.
     
  3. After complete installation, press Ctrl+Shift+D (Debug).
     
  4. Press F5 or click on the Run symbol.
     
  5. After pressing, we will ask to select the environment for debug by VS Code, select chrome in that list.
     
  6. You will get a new file created by default and named launch.json.
     
  7. Press F5 or click on the Run symbol, Again.
The output of our application will be,
 
output
 
Check this for different platforms,
 
For iPhone 6,
 
IPhone 6
 
For IPad,
 
IPad
 
We can use that on any platform and it will work similarly for each platform,
 
platform
 
Read more articles on the Ionic framework:


Similar Articles