Onsen UI Sliding Menu

This is a template using Onsen UI sliding menu.

Tested Environments: Android 4.2.2, iOS 7.1.1

Click here to download the project

File Components

../../../_images/sliding_1.png
index.html Startup page
menu.html Menu Page
page1.html Page 1
page2.html Page 2
styles/app.css Style sheet file of this project
images/ico_swipe_right_s.png Image file used in this project

HTML Explanation

index.html

index.html is the Startup page. It is the starting point of the app and contains the sliding menu component (<ons-sliding-menu> tag). The ons-sliding-menu component has main page page1.html and menu page menu.html. When the index.html is loaded at the start of the app, the page1.html and menu.html are loaded as the main page and menu page, respectively.

page1.html

page1.html has several lines of text, a Toggle Menu button and an image file. (See the screenshot below)

../../../_images/sliding_2.png

page2.html

page2.html has only a line of text (Page 2) and a Toggle Menu button. (See the screenshot below)

../../../_images/sliding_4.png