Ionic

Menus In Grid Using Ionic Framework

In a previous article we started with Ionic framework and discussed 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 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 Run symbol.

  5. After press we will asked 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 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 similar for each platform,

platform

Read more articles on Ionic framework:

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs