The side menu is a great way of adding a lot of functionality without taking up a lot of real estate. It’s an easy element to add in Ionic and can be designed to slide out from the left or right.
We’ll start with a basic Ionic app with a controller. I’ve already added a header with a button in for showing the side menu.
To start, let’s add the click action for the side menu. We’ll call the function toggleLeft.
To implement this on the controller, we need to bring in a service that will communicate with the side menus. This is the
$ionicSideMenuDelegate. Inject it as a dependency and create the toggleLeft function. It’s purpose is to call toggleLeft on the delegate.
At this point, we’re ready to write markup. Create the ion-side-menus element, with an ion-side-menu. Here’s where we specify the side.
We’ll add some menu items and refresh. Immediately we can see something is wrong: our side menu is sitting on top of our main content!
This is because the side menu system has its own content element. If we create the
ion-side-menu-content directive and place the header inside of it, we now have a working side menu.
In a formula, we will go over how to integrate the side menu with the rest of an Ionic application stack, including navigation, routing, and tabs.
Using Sass, you can override Ionic's default styles and customize an app to fit your needs.
A walkthrough on installing Cordova, Android, and Ionic on Windows 7 and 8
Learn how to easily make tabbed interfaces, one of the most common UI patterns for mobile, in Ionic.
A core element to any app is the display of lists. From todos to social feeds, lists are the building block for much more complex UIs. Learn about lists in Ionic in this video.
Learn how to start using Ionic for iOS with this video. An introduction, prerequisites, and getting a basic application running on a simulator will all be shown.