Creating an Interactive Menu Bar

Creating an interactive menu bar is a great way to set up some basic navigation within your Ceros experience. In this lesson, we’ll take a look at the step by step process of creating a menu bar. You can work off of your own experience or upload our build along, either way we will be building the menu from scratch. 

  • Before you start building, drag out 3 anchors on the canvas to mark each different section.
  • To build the closed menu, draw out a rectangle along the top of the page, change the color to black and make the opacity about 50%. 
  • Take a menu icon from the Media Library and drag that onto the canvas. Group your menu icon and rectangle bar together.
  • For the open menu, create a second larger rectangle and place it underneath the menu bar. You can also add 3 text boxes to link to your 3 sections. Group your larger rectangle and each of the 3 text boxes together to make the open menu group.
  • Place a hotspot over the menu icon, and apply an interaction that says On Click- Toggle- and choose the menu group as the target.
  • In the open menu, place a hotspot over each text box, and apply an interaction that says On Click- Scroll to Position- and choose the corresponding anchor point for each section.
  • Lastly,  select both folders of assets and click the pin button to pin the menus in place at the top of the screen.

Taking a look at our preview we can see that our menu opens and closes as expected and stays pinned in place as we scroll. Feel free to experiment with different animations and designs to give your menus a completely new look and feel. And if you have any questions or comments on this build, be sure to reach out in the chat widget, and we’ll be happy to help.