How to design a fixed position menu in your wireframe
In this tutorial, you will learn how to create a fixed position menu in your web or mobile wireframe, using the floating menu widget of Justinmind’s Parallax Elements. This way, the menu will remain always visible on top of the screen when scrolling, providing an easier navigation for the user. Here’s an example of a floating menu.
Add a Parallax Floating Menu to your web or mobile wireframe
When you open your desktop editor and create an empty web canvas for your new web prototype, Justinmind will automatically load a “Parallax Elements” widget library, which will be visible under the “Widgets” panel. If you are creating a wireframe for a different device, you can load the library by clicking on the “Add/Remove libraries” icon in the Widgets panel.
To begin, simply drag the floating menu widget and drop it onto your screen. In this case, we will be creating a fixed top menu bar, therefore the floating menu will be placed on top of the screen.
Once placed, the floating menu functionality will be ready to use. You can add as many elements as you wish to your screen, allowing for enough page scrolling. In fact, the Menu will only be visible when you reach the position specified in the pre-loaded event, whilst scrolling (i.e. the one of the predefined “initial position” label that comes with the widget). Therefore, in order to see the floating menu working, you need to add enough elements at the bottom of the canvas to allow for scrolling.
Tip: You can use the Navigator panel on the left-hand side of your canvas to visualize the entire page you’re working on. And remember you can let it float and resize it.
Click on the floating menu in the screen and select the option “Always on top” in the Properties tab. Now click on ‘Simulate’: you’ll notice that the top menu will remain fixed when scrolling.
Parallax Floating Menu default events
In order to understand the behavior that this widget will have in simulation, let’s have a look at the events that are pre-included in the widget: you can see them displayed in the event tab at the bottom of the screen.
You’ll notice two events: an ‘On page load’ and an ‘On scroll’.
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, where the value is determined by a Value Expression.
Once scrolling begins, the second event will be active: the menu will be displayed (‘Show’) only if the current scroll position is greater than the initial one. Depending on the same condition, the menu will move (‘Move’) from its initial position to match the top of the window, as determined by the Y constant. What we have here is an “On Scroll” + “Show” & “Move” event. If at any point the horizontal scroll point goes back to the initial position, the ‘Hide’ action will be triggered.
It is important to note that 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. However, all other elements within the widget can be adjusted to meet individual preferences.
Customize the floating menu and add events
Once the menu is correctly placed, its graphics, styles and behavior can be adjusted according to your preferences. 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.
Further prototyping with Parallax
This tutorial covers the floating menu parallax widget, but prototyping with parallax has a lot of other functionalities that can be combined to create incredible web and mobile wireframes:
- Slide-in layers: slide in elements from the outside of the page into the visual viewport as you scroll down. Learn how!
- Pinned layer: pin a sticky element to a specific location in your web or mobile prototype, so it is always visible as you scroll down. Learn how!
- Pinned panels: pinning panels to a specific position allows you to create fixed/sticky elements that stay in place and are always visible when scrolling. Learn how!
- Fade in layer: provide an initially invisible element that shows up with a transition effect when a defined point has been reached by scrolling. Learn how!
- Scrolling speeds: use different scroll speeds for different elements, in order to provide additional effects to your Parallax scrolling. Learn how!
- Parallax from scratch: create a parallax scrolling effect so that, upon simulation, the elements remain fixed in position on vertical scroll. Learn how!
- Create a one page scroll: create a one page scroll, a single-scroll layout for a group of sections on a page. Learn how!