Embed Size (px)
Citation preview
HOW TO DESIGN A FIXED POSITION MENU IN
YOUR WIREFRAMETutorial – Advanced
In this tutorial, you will learn how
to create a fixed position menu in
your app or web wireframe, using
the floating menu widget of
Justinmind’s Parallax Elements.
This way, the menu will remain
visible on top of the screen when
scrolling, providing an easier
navigation for the user.
Fixed position menu
Click on the image or go to
justinmind.com/overview to see an example of
floating menu
Fixed position menu
To begin, simply drag the
floating menu widget and drop
it on top of the screen.
Click on the floating menu in
the screen and select the
option “Always on top” in the
Properties Tab.
Add as many elements as you
wish to your screen, and click
on ‘Simulate’.
The top menu will remain
fixed when scrolling.
01
Add a Parallax Floating
Menu
1
2
Note: if the Parallax widget library is not
shown in the widgets tab, click on the ‘+’ icon
to add it.
Fixed position menu
The predefined initial position label - which comes with the floating menu widget -
should not be removed during customization, as it is integral to the functionality.
Fixed position menu
You can see the events
pre-loaded in the widget
displayed in the event tab at
the bottom of the screen.
You will notice two events:
one caused by the ‘on page
load’ action, and one by the
‘on scroll’ action.
02
Parallax Floating Menu
default events
03
Fixed position menu
When the screen loads, the
value of the Y coordinate
position of the menu will be
stored to determine the starting
position.
This is the function of the ‘on
Page Load’ + ‘set value’ event.
On Page Load +
Set Value
04
Fixed position menu
Once scrolling begins, the
second event will be active:
the menu will be displayed
only if the current scroll
position is greater than the
initial one.
On Scroll
05
Fixed position menu
Subsequently, the menu will
move from its initial position
to match the top of the
window, as determined by
the Y constant.
On Scroll
06
Fixed position menu
All the elements within the
widget can be adjusted to
meet individual preferences.
For example, you can make
the menu always visible, even
when the scrolling y-position
is equal to the starting
position, as shown in the
image.
And you can adjust graphics,
fonts, styles and behavior to
your preferences.
Customizing the widget
07
Fixed position menu
You can also add events to
navigate through pages, and
add more options to the menu
and rename them. Note that
all elements that form the
floating menu are grouped.
To implement a real-working
menu, you can set an ‘on
click’ + ‘link to’ event, linking
each menu option with the
corresponding screen. You
can then copy the floating
menu to each of the screens
and adjust its parameters. If
desired, font style can be
changed to highlight the active
page.
Customizing the widget
Fixed position menu
Click on the ‘Simulate’ button
and test your app or web
wireframe!
Justinmind Inc
225 Bush St. Fl. 12
San Francisco, CA 94104
www.justinmind.com
DOWNLOAD NOW
TRY IT NOW FOR FREE!Get the Justinmind editor and start prototyping
