Slide In Menu Effect

 

Sliding Menu

Create interesting menu and navigation effects with the Scroll Effect widget. 

 

---

 

Set up the page

Begin by lengthening the page to ensure the ability to scroll. Select Page>Page Properties and set the Min Height to a larger number. For this example the page length is 4000px. 

 

Select the Main widget from the Library panel and drag it to the top of your page. This widget must be on every page using Scroll Effects only once. Placing the Main widget on the Masters page will ensure each page will have it included. 

 

Create the content

Design your menu content as you please. For this example we will be using a simple top menu that will appear after you scroll down the page. Be sure to leave an area before the menu so there will be enough page to scroll before the effect. For this example, the menu sits at 1130px on the y-axis.

 

 

Naming the items

Name the menu items within the Tooltip panel in the Hyperlinks tab. The naming values are case sensitive and should not have any special characters or spaces. This name will be utilized throughout the widget components so it is important to make them unique to this effect.

 

 

Placing the Handles

From the Library panel, drag and drop the Top handle onto the page. To ensure the menu appears at the top of the browser, align the top of the Start handle and the menu items on the page. 

 

 

Create the Effects

Open the Start Option Panel and input the effects for the menu. First, type in the name of the menu items exactly as they appear within the Tooltip panels. For this example the menu slides down and fades in at the top of the browser. 

To make this effect, start with the Before the Start Handle section (A). Keep the Horizontal speed at 0 for no horizontal motion. Change the Vertical Speed to -.3 to have the menu scroll down at .3 or 30% of normal scroll speed. 

Once the menu reaches where it was placed on the page it should remain there for the rest of the page for this effect. To do so, keep the properties of the Between Two Handles (B) and After Finish Handle Enters (C)  at 0.

For this effect the Finish handle is not needed so the menu items will keep the properties of Between Two Handles.

 

 

Changing the Opacity

To keep the menu from showing before the Start handles, select the Opacity box and input the following values. This will make sure that the menu fades in as it slides down into view. Finally, select Top for the Layering Order to keep your menu above other content on the page.