View Source Improve this doc

ons-sliding-menu

Component for sliding UI where one page is overlayed over another page. The above page can be slided aside to reveal the page behind.

Usage # 

<ons-sliding-menu var="app.menu" main-page="page.html" menu-page="menu.html" max-slide-distance="200px" type="reveal" side="left">
</ons-sliding-menu>

<ons-template id="page.html">
  <ons-page>
   <p style="text-align: center">
     <ons-button ng-click="app.menu.toggleMenu()">Toggle</ons-button>
   </p>
  </ons-page>
</ons-template>

<ons-template id="menu.html">
  <ons-page>
    <!-- menu page's contents -->
  </ons-page>
</ons-template>

Live Example #

See the Pen Alert, confirm and prompt dialogs by Onsen & Monaca (@onsen) on CodePen.

Open in New Window

See also #

Attributes #

Name Type
Default Value		 Description
var String Variable name to refer this sliding menu. Optional
menu-page String The url of the menu page. Optional
main-page String The url of the main page. Optional
swipeable Boolean Whether to enable swipe interaction. Optional
swipe-target-width String The width of swipeable area calculated from the left (in pixels). Use this to enable swipe only when the finger touch on the screen edge. Optional
max-slide-distance String How far the menu page will slide open. Can specify both in px and %. eg. 90%, 200px Optional
direction String Specify which side of the screen the menu page is located on. Possible values are "left" and "right". Optional
type String Sliding menu animator. Possible values are reveal (default), push and overlay. Optional
ons-preopen Expression Allows you to specify custom behavior when the "preopen" event is fired. Optional
ons-preclose Expression Allows you to specify custom behavior when the "preclose" event is fired. Optional
ons-postopen Expression Allows you to specify custom behavior when the "postopen" event is fired. Optional
ons-postclose Expression Allows you to specify custom behavior when the "postclose" event is fired. Optional
ons-destroy Expression Allows you to specify custom behavior when the "destroy" event is fired. Optional

Methods Summary #

Signature Description
setMainPage(pageUrl, [options]) Show the page specified in pageUrl in the main contents pane.
setMenuPage(pageUrl, [options]) Show the page specified in pageUrl in the side menu pane.
openMenu([options]) Slide the above layer to reveal the layer behind.
closeMenu([options]) Slide the above layer to hide the layer behind.
toggleMenu([options]) Slide the above layer to reveal the layer behind if it is currently hidden, otherwise, hide the layer behind.
isMenuOpened() Returns true if the menu page is open, otherwise false.
getDeviceBackButtonHandler() Retrieve the back-button handler.
setSwipeable(swipeable) Specify if the menu should be swipeable or not.
on(eventName, listener) Add an event listener.
once(eventName, listener) Add an event listener that's only triggered once.
off(eventName, [listener]) Remove an event listener. If the listener is not specified all listeners for the event type will be removed.

Events Summary #

Name Description
preopen Fired just before the sliding menu is opened.
postopen Fired just after the sliding menu is opened.
preclose Fired just before the sliding menu is closed.
postclose Fired just after the sliding menu is closed.

Methods

setMainPage(pageUrl, [options]) #

Show the page specified in pageUrl in the main contents pane.

Parameters
Name Type Description
pageUrl String Page URL. Can be either an HTML document or an <ons-template>.
options Object Parameter object.
options.closeMenu Boolean If true the menu will be closed.
options.callback Function Function that is executed after the page has been set.

setMenuPage(pageUrl, [options]) #

Show the page specified in pageUrl in the side menu pane.

Parameters
Name Type Description
pageUrl String Page URL. Can be either an HTML document or an <ons-template>.
options Object Parameter object.
options.closeMenu Boolean If true the menu will be closed after the menu page has been set.
options.callback Function This function will be executed after the menu page has been set.

openMenu([options]) #

Slide the above layer to reveal the layer behind.

Parameters
Name Type Description
options Object Parameter object.
options.callback Function This function will be called after the menu has been opened.

closeMenu([options]) #

Slide the above layer to hide the layer behind.

Parameters
Name Type Description
options Object Parameter object.
options.callback Function This function will be called after the menu has been closed.

toggleMenu([options]) #

Slide the above layer to reveal the layer behind if it is currently hidden, otherwise, hide the layer behind.

Parameters
Name Type Description
options Object Parameter object.
options.callback Function This function will be called after the menu has been opened or closed.

isMenuOpened(): Boolean #

Returns true if the menu page is open, otherwise false.

Returns: true if the menu is currently open.

getDeviceBackButtonHandler(): Object #

Retrieve the back-button handler.

Returns: Device back button handler.

setSwipeable(swipeable) #

Specify if the menu should be swipeable or not.

Parameters
Name Type Description
swipeable Boolean If true the menu will be swipeable.

on(eventName, listener) #

Add an event listener.

Parameters
Name Type Description
eventName String Name of the event.
listener Function Function to execute when the event is triggered.

once(eventName, listener) #

Add an event listener that's only triggered once.

Parameters
Name Type Description
eventName String Name of the event.
listener Function Function to execute when the event is triggered.

off(eventName, [listener]) #

Remove an event listener. If the listener is not specified all listeners for the event type will be removed.

Parameters
Name Type Description
eventName String Name of the event.
listener Function Function to execute when the event is triggered.

Events

preopen #

Fired just before the sliding menu is opened.

Parameters
Name Type Description
event Object Event object.
event.slidingMenu Object Sliding menu view object.

postopen #

Fired just after the sliding menu is opened.

Parameters
Name Type Description
event Object Event object.
event.slidingMenu Object Sliding menu view object.

preclose #

Fired just before the sliding menu is closed.

Parameters
Name Type Description
event Object Event object.
event.slidingMenu Object Sliding menu view object.

postclose #

Fired just after the sliding menu is closed.

Parameters
Name Type Description
event Object Event object.
event.slidingMenu Object Sliding menu view object.

Discussion #