O'Reilly logo

UX Design for Mobile by Pau Giner, Pablo Perea

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Drawer menu functionality

To create the drawer menu functionality, we will declare two functions.: one for the opening transition and another for the closing transition. These transitions will be in charge of showing and hiding both the menu and the dark overlay that de-emphasizes the contents behind the menu. Each function will make all the changes needed in the sketch.Drawer_Menu layer and the sketch.Black_Background layer. In the following code, we can find both the functions: their names will be openMenu and closeMenu:

# DRAWER MENU# Open Menu FunctionopenMenu = ->        sketch.Drawer_Menu.animate        properties:            x: 0        time: 0.2    sketch.Black_Background.animate        properties:            opacity: 100        time: 0.2 sketch.Drawer_Menu.on Events.SwipeLeft, (event) -> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required