Skip to content


Subversion checkout URL

You can clone with
Download ZIP
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...

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

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-dark', #333, '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;
Something went wrong with that request. Please try again.