How to crate a sliding menu. Video tutorial

#1 · March 31, 2020, 8:38 pm

In today video tutorial we will learn how to create a "hamburger type" sliding menu for our applications. We will see also how to use pages and master pages. As usual, you will find the sample app source code attached. Please like if you find it useful. Thank you!

Uploaded files:

You need to login to have access to uploads.

Vadim, CDY@44 and 2 other users have reacted to this post.

#2 · March 31, 2020, 10:08 pm

Hi luishp,

Some day ago, I was create a sliding-menu with this code:

CreateEmptyObject [menuCSS]
If [menustate] == "close"
   SetVar [menustate] "open"
   SetVar [menuCSS.left] "-10%"
   neoAnimateTo "ContainerMenu" [menuCSS] .5 0 "back" "easeout"
   SetObjectStyle "carton" "opacity" "0.7"
   ShowObject "carton" "" 0
Else
   SetVar [menustate] "close"
   SetVar [menuCSS.left] "-90%"
   neoAnimateTo "ContainerMenu" [menuCSS] .5 0 "back" "easein"
   hideObject "carton" "" 0
   SetObjectStyle "carton" "opacity" "0"
EndIf

It works pretty. but if I open it in a page that has more html elements, the sliding of menu become slow..

You can see better in the attach file:

Is there anyway to fix this problem?

Uploaded files:

You need to login to have access to uploads.

YASIN has reacted to this post.

#3 · April 1, 2020, 12:32 am

Cool !!!!

#4 · April 1, 2020, 3:41 am

@asmat You are an intelligent person. I read all your publications on this forum and they are very interesting. Thank you very much for sharing them.

asmat has reacted to this post.

#5 · April 1, 2020, 9:00 am

@asmat your projects are really beautiful, congratulations!
About menu speed, are you sure it's because the HTML elements? Aren't you executing scripts in the background on that specific page? On my experience those slow down animations are usually due to intensive scripts processing at the same time.

asmat has reacted to this post.

#6 · April 1, 2020, 11:41 am

@luishp

Useful lesson! The sliding menu is a very convenient part of the interface!

Thank you very much!!!

#7 · April 1, 2020, 2:45 pm

Hi luishp,

I think maybe it is cause of "watch" command, because the other commands done once.

This is code of page-enter:

applyEnterKey "debtbox"
............................................................
.............observer....
Watch [DebtJSON] "tablizeDebt"
Watch [DebtTableHistoryJSON] "tablizeDebtHistory"

......read from firebase and than make a table of that..............
Wait 1000
     If [DebtId] == 1
         successWriteDebt
         successWriteDebtHistory
     Else
         successWriteDebt1
         successWriteDebtHistory1
     Endif
EndWait

...................default variable for chiveron movement...........................
SetVar [ch1Status] 1
SetVar [ch2Status] 1

YASIN has reacted to this post.

How to crate a sliding menu. Video tutorial - Forum

How to crate a sliding menu. Video tutorial