Justinmind

SUPPORT

Learn how to prototype web and mobile apps

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.

Parallax wireframes: widgets library

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.

Parallax Wireframe: Floating menu example

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’.

  Parallax Wireframe: Floating Menu Events

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.

Parallax Wireframe: Fixed menu bar widget

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 interaction

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:

  1. Slide-in layers: slide in elements from the outside of the page into the visual viewport as you scroll downLearn how!
  2. Pinned layer: pin a sticky element to a specific location in your web or mobile prototype, so it is always visible as you scroll downLearn how!
  3. Pinned panels: pinning panels to a specific position allows you to create fixed/sticky elements that stay in place and are always visible when scrollingLearn how!
  4. Fade in layer: provide an initially invisible element that shows up with a transition effect when a defined point has been reached by scrollingLearn how!
  5. Scrolling speeds: use different scroll speeds for different elements, in order to provide additional effects to your Parallax scrolling. Learn how!

 

4 Comments

  1. A Patrick

    August 6, 2015 at 5:16 pm

    Can sub-menu items be added to the menu? If so, a tutorial on how that is done would be appreciated.

    • Danielle Schneider

      August 7, 2015 at 4:59 am

      You can add as many items to the menu as you like to the parallax element – including dynamic panels.

  2. Jessie

    September 14, 2015 at 3:25 am

    If a fixed navigation bar is created in master and added to different screens, would it still work?
    I tried but pinned navigation from master wasn’t fixed.

    • Danielle Schneider

      September 14, 2015 at 4:51 pm

      It should work. If it doesn’t, feel free to send us your prototype at jim.support@justinmind.com and we can figure this out.