Basic Navigation Menu
Before you wrap up this volume, I want to add a menu to make it easier to navigate between the home page and the Roster Page. The menu will mostly look and act like the one from the guided tour, but it will be a bit simpler. In Ionic, you create a menu with the
ion-menu is the Ionic component that implements a side-menu. As with most other Ionic container components, it can contain a header with a toolbar and title, along with some
ion-content. The typical side-menu consists of a list of options, made from an
The menu can be customized with a variety of behaviors.
If you want the menu to obscure the main page content when it opens, you can set its
type attribute to
overlay. With this option, the menu slides in from the side, covering the stationary main content.
Another option is
push, which causes the page content to slide with the menu. The menu still slides in from the side, pushing the main content out of the way.
You can also choose
reveal to achieve a similar, but subtly different effect from
reveal, the menu content itself is stationary, and appears to be uncovered as the main contents slides out of the way.
You can specify which side the menu is on by setting the
side attribute to either
end. If you choose
end, make sure your menu icon is on the same side of the main content’s toolbar, or it can look awkward.
You can disable swiping the menu on mobile devices by setting
If you want an item in your menu to close the menu when you select it, be sure to wrap it with an
ion-menu-toggle component. Otherwise, the menu will stay open.
ion-menu-toggle can also be used to open a menu (hence the name toggle). By default, it will automatically hide itself whenever it detects that its menu is disabled or being presented in a split-pane, as you will be doing here. Because of that, if you want it to be visible all the time, be sure to set its
autoHide attribute to
Below are examples of the three different menu types.
There is more to the menu, but those are the basics. You will build one in this lesson.