Add a sidemenu on ionic Blank template

Navigation
0

Hello

I created my project using the blank template of ionic1, but there was a need to add a sidemenu in my project. I have not been able to add this menu in a while and would like to know if anyone has already done this and could share with us how it was done. Since I already have a good part of it ready it is quite annoying to have to create a new project with sidemenu and go migrating. Thank you for your help.

    
asked by anonymous 28.10.2016 / 02:57

1 answer

1

Dude, I already made an app with a side menu and it's very simple.

Take a look at the documentation about it at link

You only need to use Ionic's own directives at a glance.

In this example below I picked up a project of mine, basically you have:

  • Ionic Menu Container: ion-side-menus
  • Container content: ion-side-menu-content
  • Navigation bar, the top bar of the app: ion-nav-bar
    • Return button "native", responds to the browsing history: ion-nav-back-button
    • A container of buttons to insert in the top bar: ion-nav-buttons
  • Browser component of app views that I want to appear inside the menu container
  • Out of the content container, comes the menus and their contents: ion-side-menu 
<ion-side-menus enable-menu-with-back-views="false">
    <ion-side-menu-content>
        <ion-nav-bar class="bar-dark">
            <ion-nav-back-button></ion-nav-back-button>

            <ion-nav-buttons side="left">
                <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
            </ion-nav-buttons>
        </ion-nav-bar>

        <ion-nav-view name="appView"></ion-nav-view> // nav view para trocar as telas mantendo o contexto do menu
    </ion-side-menu-content>

    <ion-side-menu side="left">
        <ion-content>
            <ion-list>
                <ion-item menu-close ui-sref="page2">
                    Página 1
                </ion-item>
                <ion-item menu-close ui-sref="page2">
                    Página 2
                </ion-item>
            </ion-list>
        </ion-content>
    </ion-side-menu>
</ion-side-menus>
    
28.10.2016 / 03:27
File cordova.js does not appear Can I use JSON to save ArrayLists to Shared Preferences?