Swipeable menu

Swipeable menu

In this lesson discuss simple way design swipeable menu so get a blank template and add platform then run. Simply run below command in terminal.

  • $ ionic start tutorial sidemenu --type=ionic-angular
  • $ cd tutorial/
  • $ ionic cordova platform add ios
  • $ ionic cordova run ios

To design swipeable menu edit home.html as below

<ion-header>
  <ion-navbar color=“purple”>
    <button ion-button menuToggle>
      <ion-icon name=“menu”></ion-icon>
    </button>
    <ion-title>Beache</ion-title>
  </ion-navbar>

  <ion-slides slidesPerView=“4.5”>
    <ion-slide>
      <p> Menu1</p>
    </ion-slide>
    <ion-slide>
      <p> Menu2</p>
    </ion-slide>
    <ion-slide>
      <p> Menu3</p>
    </ion-slide>
    <ion-slide>
      <p> Menu4</p>
    </ion-slide>
    <ion-slide>
      <p> Menu5</p>
    </ion-slide>
    <ion-slide>
      <p> Menu6</p>
    </ion-slide>
  </ion-slides>
</ion-header>

 

Follow up with high-quality video tutorial on YouTube

Leave a Reply

Your email address will not be published. Required fields are marked *