Onsen UI Sliding Menu¶
Table of Contents
This is a template using Onsen UI sliding menu.
||Style sheet file of this project|
||Image file used in this project|
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
menu.html are loaded as the main page and menu page, respectively.
menu.html is shown when the Toggle Menu button is clicked or when the user swipe the page right. This page contains a list of 2 items: Page 1 (
page1.html) and Page 2 (
page2.html). (See the screenshot below)
While the behind-page (
menu.html) of the sliding menu element is always the same, its above-page is changed to
navigator2.html when the Page 1 or Page 2 is selected, respectively.
page1.html has several lines of text, a Toggle Menu button and an image file. (See the screenshot below)