Designer Courses / Create in Ceros

Create a Menu Bar

In this lesson we are going to build out a menu bar that we can use to navigate to different sections within our experience. This same menu bar can be used for page navigation, simply by adjusting the Interactions to link to a page instead of anchor point. For the sake of context, we are going to create this menu functionality inside a somewhat built out page of an experience, however, you can also recreate these steps using your own experience or download the assets above to start from scratch.

Steps to Create a Menu Bar:

We’ve outlined a few steps here to build a menu bar completely from scratch within Ceros. Additionally, you can also import your own designed menu assets and skip the menu creation steps.

  • Upload the semi finished Ceros experience to your admin, and dive into the studio
  • Create two additional layers titled “Menu Bar” and “Menu Open”
  • Select the “Menu Bar” layer in the layer panel
    • Create a square shape at the top of the canvas to function as a menu bar
    • Change the color to black, and opacity to 50%
    • Open the icon library and search for a “Menu” icon – drag and drop icon to canvas
    • Reposition icon, resize to fit within menu bar, and change color to white
  • Select the “Menu Open” layer in the layer panel
    • Draw an additional square shape to serve as the open menu box directly below the open menu
    • Create a textbox in the open menu box that says “Image 1” – change color to white
    • Duplicate textbox for “Image 2” and “Image 3” – adjust text accordingly
  • Select the Anchor tool in the menu bar and drag an anchor down to the top of the second image
  • Drag an additional anchor to the top of the third picture

Interactions

  • Select the “Menu Bar” layer and draw out a hotspot over top of the menu icon
    • Rename hotspot “Open Menu”
    • In the interactions panel, set up an “On Click” trigger, “Toggle” action, and “Menu Open” as the target
    • Click add
  • Select the “Menu Open” layer and draw a hotspot over top of the “Image 1” text
    • Rename hotspot “Scroll to Image 1”
    • Set up an “On Click” trigger > “Scroll to Position” action > anchor “Top” as the target
    • Click add
  • draw a hotspot over top of the “Image 2” text
    • Rename hotspot “Scroll to Image 2”
    • Set up an “On Click” trigger > “Scroll to Position” action > anchor “1” as the target
    • Click add
  • draw a hotspot over top of the “Image 3” text
    • Rename hotspot “Scroll to Image 3”
    • Set up an “On Click” trigger > “Scroll to Position” action > anchor “2” as the target
    • Click add
  • Turn off visibility of the “Open Menu” layer so it appears this way initially
  • Select both the “Menu Bar” layer and “Menu Open” layer
    • Toggle the Smart group button in the layers panel to group these two layers
    • In the layout pane, select the “Pinned Position” toggle to pin menu at top of page

Menu Bar Interaction

Animations

This section is completely optional but helps smooth out some of the abruptness of the menu layer.

  • Double click into the “Menu Bar” smart group to enter isolation mode
    • Open the “Menu Open” layer and select the “Image 1” text object
    • Apply an “On View” > “Fade in Down” animation > .2-second delay > .8-second duration
    • With the text object still selected, press Cmd + Opt + C to copy the animation
  • Select the “Image 2” text and Cmd + Opt + V to paste the animation
    • Change the delay to .3 seconds
  • Select the “Image 3” text and Cmd + Opt + V to paste the animation
    • Change the delay to .4 seconds
  • Select the “Menu Open” layer and grab the square shape that serves as the menu background
    • Apply an “On View” > “Fade In” animation > 0-second delay > .5-second duration
      Apply an “On Hide” > “Fade Out” animation > 0-second delay > .2-second duration
  • Toggle the visibility of the menu open layer to “Off” before exiting isolation mode

To create page navigation using a similar menu, you can simply repeat these same steps and substitute in the page navigation interaction instead of the scroll to position interaction. Additionally, because we made the Menu a Smart group, you can easily copy and paste the smart object across multiple pages easily. This allows you to have any changes to the menu reflected across the entire experience.

Create a Menu Bar