☰
Navigation :

Slide Menu

Slide Menu

you can donwload the sample project from

In project folder’s root, you find slideMenu_menuBtn.lua, slideMenu_ini.lua and slideMenu_show.lua, these three files of external codes are added with Project And Pages on Kwik Panel.

slideMenu.lua and material ui widget modules are placed in build4/lib folder.

slideMenu_menuBtn.lua and slideMenu.lua must be configured for pageNum and menu button’s properties.
slideMenu_menuBtn.lua main set pageNum
slideMenu_init.lua page3 Before layers
slideMenu_show.lua page3 After buttons and actions
build4/lib/slideMenu.lua set pageNum, add buttons in list table

if you like to use the slide menu to another project, copy these files to the same locations and edit the pageNum and the button’s properties.

├─build4
│  ├─lib
│    ├─icon-font
│    └─materialui
|     slideMenu_init.lua
|
└─
    slideMenu_init.lua
    slideMenu_menuBtn.lua
    slideMenu_show.lua

slideMenu_menuBtn.lua

The sample project, you find headerImage, menuBtn and icons for slide menu on page3.psd

local pageNum  = 3
local composer = require("composer")
--
local UI = {
    scene ={view = display.newGroup()},
    layer = {}
}

local headerImage = require("components.page0"..pageNum.."headerImage_image_")
headerImage:localPos(UI)

local menuBtn = require("components.page0"..pageNum..".menuBtn_image_")
menuBtn:localPos(UI)
UI.layer.menuBtn:addEventListener("tap", function(e)
    composer.showOverlay("views.page0"..pageNum.."Scene")
end )

It loads slideMenu scene with registerd actions etc. The context of slide menu is loaded.

page3 actions

The action name for each menu button must be named as act_icon0{Num}. It is triggered from slideMenu.lua - hideSlidePanel function

slideMenu_init.lua

local slideMenu = require("lib.slideMenu")
slideMenu.init(UI)

slideMenu_show.lua

local slideMenu = require("lib.slideMenu")
slideMenu.showSlidePanel()

Project And Pages > Add Main.lua External Code

Project And Pages > Add External Code

Project And Pages > Add External Code

build4/lib

you can find these files in build4/lib folder and you need to edit sideMenu.lua for the pageNum and the list of menu buttons.

sldeMenu.lua - hideSlidePanel()

local hideSlidePanel = function(event)
    UI.scene:dispatchEvent({name = "action_act_icon0"..event.value})
    mui.hideSlidePanel("slidepanel-demo")
end

As you can observe, action_act_icon0..event.value is one of the actions on page3. Unless you create act_icon0{Num} or want to customize the codes when a menu button is tapped, you don’t need to modify the hideSlidePanel function.

You need to edit init function for newSlidePanle widget. See the codes below.

init()

please edit the following parameters to be configured for your slide menu

For example, the 1st button’s value is “1” and labedText as “Home”, and iconImage is with “icon01.png”

            list = {
                {
                    key       = "Home",
                    value     = "1",
                    icon      ="home",
                    iconImage ="assets/images/p"..pageNum.."/icon01.png",
                    labelText ="Home",
                    isActive  = true,
                    callBack  = hideSlidePanel, callBackData = { item="home"}
                },

local pageNum = 3
--
M.init = function(_UI)
    UI = _UI
    mui.init(nil, { parent=_UI.scene.view })
    if mui.getWidgetBaseObject("slidepanel-demo") ~= nil then
        mui.showSlidePanel("slidepanel-demo")
        mui.debug("slidePanel exists, show it")
    else
        mui.debug("slidePanel is new")
        mui.newSlidePanel({
            parent                    = mui.getParent(),
            name                      = "slidepanel-demo",
            title                     = "MUI Demo", -- leave blank for no panel title text
            titleAlign                = "center",
            font                      = native.systemFont,
            width                     = mui.getScaleVal(400),
            titleFontSize             = mui.getScaleVal(30),
            titleFontColor            = { 1, 1, 1, 1 },
            titleFont                 = native.systemFont,
            titleBackgroundColor      = { 0.25, 0.75, 1, 1 },
            fontSize                  = mui.getScaleVal(20),
            fillColor                 = { 0, 0, 0, 0.01 }, -- background color
            headerImage               = "assets/images/p"..pageNum.."/headerImage.png",
            buttonToAnimate           = nil,
            callBack                  = mui.actionForSlidePanel,
            callBackData              = { item  = "cake" },
            labelColor                = { 1, 1, 1, 1 }, -- active
            labelColorOff             = { 0.5, 0.5, 0.5, 1 }, -- non-active
            buttonHeight              = mui.getScaleVal(60),
            buttonHighlightColor      = { 0.5, 0.5, 0.5 },
            buttonHighlightColorAlpha = 0.5,
            lineSeparatorHeight       = mui.getScaleVal(1),
            list = {
                {
                    key       = "Home",
                    value     = "1",
                    icon      ="home",
                    iconImage ="assets/images/p"..pageNum.."/icon01.png",
                    labelText ="Home",
                    isActive  = true,
                    callBack  = hideSlidePanel, callBackData = { item="home"}
                },
                {
                    key       = "Newsroom",
                    value     = "2",
                    icon      ="news",
                    iconImage ="assets/images/p"..pageNum.."/icon02.png",
                    labelText ="News",
                    isActive  = true ,
                    callBack  = hideSlidePanel, callBackData = { item="newsroom"}
                },
                {
                    key       = "AboutUS",
                    value     = "3",
                    icon      ="copyright",
                    labelText ="About Us",
                    isActive  = true,
                    iconColor = { 1, 1, 1, 1 }, iconColorOff = { 0.5, 0.5, 0.5, 1 },
                    callBack  = hideSlidePanel, callBackData = { item="aboutus"}
                },
            },
            isVisible = false, -- do show immediately
        })
        mui.setBackgroundImage("slidepanel-demo", "assets/images/p"..pageNum.."/panel.png")
    end
    -- add some buttons to the menu!
end

background

Setting fillColor’s transparency as 0.01 and setting the image with setBackgroundImage function.

If you don’t use panel.png, delete the line of the function and set the fillColor as you like.

material ui

lib/matrialui/mui-slidepanel.lua is customised from the orignal one.

from material.io site, you can preview the icons.

License

from https://github.com/arcadefx/material-ui

    The MIT License (MIT)

    Copyright (C) 2016 Anedix Technologies, Inc.  All Rights Reserved.

    Permission is hereby granted, free of charge, to any person obtaining a copy
    of this software and associated documentation files (the "Software"), to deal
    in the Software without restriction, including without limitation the rights
    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
    copies of the Software, and to permit persons to whom the Software is
    furnished to do so, subject to the following conditions:

    The above copyright notice and this permission notice shall be included in all
    copies or substantial portions of the Software.

    For other software and binaries included in this module see their licenses.
    The license and the software must remain in full when copying or distributing.

    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
    SOFTWARE.