Sencha touch slider menu component (Facebook-like slide in menu)
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Slider Menu

This is a demo project that use a custom implementation of Facebook-like slide in menu for Sencha Touch 2. The implementation of the menu is inside "slider_menu" directory.

This is a work in progress and still needs work to improve and change things...

You can view a live demo here

NOTE: Version 0.2 supports icons inside menu options! (See demo for more details).

Getting Started

To use Slider Menu in your application, you need:

1) Copy the "slider_menu" folder inside your application root folder Ex: path_to_www/MyApp/slider_menu

2) Add following code at the beginning of your app.js:

    'SliderMenu': 'slider_menu/'

3) Add SliderMenuContainer view inside required views from app.js:

 views: [
    //Add here your other views...

4) Add SliderMenuController inside required controllers from app.js: controllers: [ 'SliderMenu.controller.SliderMenuController', //Add here your other controllers... ],

5) Add MenuOption model inside required models from app.js: models: [ 'SliderMenu.model.MenuOption' //Add here your other models... ],

6) Add MenuOptions store inside required stores from app.js: stores: [ '' ],

7) Modify data array inside "slider_menu/store/MenuOptions.js" to link each menu option, to views of your application:

data: [
    {id: 1, view: 'yourAPP.view.someview', icon: 'undefined', useIcon:true, text:'menu_option_text'},
    {id: N, view: 'yourAPP.view.anotherview', icon: 'undefined', useIcon:true, text:'other_menu_option_text'},

** Note: The SliderMenu automatically creates the view associated to the menu option selected and put it inside the main view. **

8) Add a SliderMenuContainer instance inside Viewport:


For a more complete example, see demo application.


To configure the slider menu, you need an instance of it:

var sliderMenu = Ext.create('SliderMenu.view.SliderMenuContainer');

and then you can configure a set of parameters:

Menu title

sliderMenu.setTitle('Options...'); //Sets menu title to "Options..."

Width (in px)

sliderMenu.setWidth(200); //Sets menu width to 200px

Duration of close animation (in ms)

sliderMenu.setCloseAnimationDuration(300); //Sets the duration of close animation to 300ms

Duration of open animation (in ms)

sliderMenu.setOpenAnimationDuration(300); //Sets the duration of open animation to 300ms

Menu icon

** Note: It's important that the icon is declared inside your app.css. Otherwise, a blank button will be showed **

sliderMenu.setMenuIcon('list'); //Sets icon of menu button to 'list' icon

Push/Pop Animation

        duration: 300,
                        easing: 'ease-in-out',
                        type: 'slide',
                        direction: 'left'
//Sets the push and pop animation for the navigationview to slide left and right (default)

Swipe SlideMenu

sliderMenu.activateSwipe(); //activate the possibilty to use swipe on every view to open the slideMenu

SliderMenu UI


In your app.scss you need to define your custom toolbar UI theme for SliderMenu with something like this:

@include sencha-toolbar-ui( 'slider-menu-red', darken(#f00, 20), 'flat');


You can change the style of your slider menu, overwriding two classes:


By default, you must to overwride a open subclass of main to sets a shadow effect between menu and main container.

Ex: {
     box-shadow: 0 0 4px 1px #333;
     -webkit-box-shadow: 0 0 4px 1px #333;

Supported devices

Slider-Menu has been tested on:

Android (2.x)
Android (4.x)
iOS 5
BlackBerry Torch

*Note: If you can test Slider-Menu in other device, you can create a new issue with the result of the test *