How to Build a Sliding Menu in Indigo Studio

In this video we’ll be taking a look at one way to build a sliding menu in Indigo Studio, Infragistics' rapid prototyping tool.

Setting Up Your Prototype

We can begin by creating a new screenpart. To start, you can set the dimensions of the canvas to fit the menu you’re going to design. For the first step, I’ll create the basic layout of the closed menu using a few rectangles as a background.

Using the size and position fields can help you quickly arrange shapes. It can also help to create a copy of an existing element to preserve its formatting and save you from redesigning the same pieces again.

Adding Text

Now that the sections of the menu are laid out, I’m going to add some text. I’ll start by adding some simple header text, and then use a copy of the element to create headers for the rest of the menu. With the text in place, I'll use the repeater to create a list of menu items. By editing the item template you can design a single row and then duplicate it. This makes creating lists a quick and easy process.

Editing Your Design

Now with the template designed I can add as many rows as needed. You can also go back to the item template to alter the design, any changes you make are reflected in the rows you've added already. Here we have the collapsed menu fully designed.

Creating A Sliding Menu

To begin designing the sliding piece of the menu, I’ll group all the elements together, and create a copy to use as a template. Using the existing elements, I can modify the ones I’ll be keeping and delete the ones I won’t use. Once both pieces of the menu are fully designed,adding interactions and animations is easy.

Adding Interactions

To create the initial state of the menu, we can position the sliding group behind the static group. To create the second state of the menu, I'll add an interaction to the menu icon that changes the screenpart to a new state with a single click. Make sure you check the toggle box so that clicking the menu icon again reverses the changes. Now that we have a new state, we can re-position the sliding group of elements, and resize the canvas to fit the expanded menu.

Finishing Your Menu

Once we’ve finalized the position of the elements, we can go to the animation timeline below and add smoothness to the transition. From the “expanded state” of the menu, we can increase the duration of the “move” event, by dragging it out on the timeline. This creates a smooth “sliding menu” effect. By running the screenpart we can preview the newly added interaction.

With the new screenpart fully designed, we can save the changes, and add it to the screen we're designing. You’ll find your newly created screenpart in the menu on the right, and running the prototype shows how the new screenpart will behave.

Sharing Your Design

When the prototype is complete, we can upload it to IndigoDesigned.com and share it. The url that Indigo Studio creates will remain the same-even if you make changes to the prototype in the future.

And that's it! You've successfully built a sliding menu in Indigo Studio! To see how this fits into our latest Project Management dashboard sample application - and for more videos in this series - check out our playlist on YouTube. Happy coding!