Skip to content
Adapt User's Guide version 4.5

Flow Menu

Flow Menu Example
Flow Menu

The Flow Menu lists each menu choice as a plain block with a title, body text and a large button to view the page. A large, faded page index is displayed behind the text. When the user hovers (or focuses) the view button, the background of the block is filled with an animated version of the page graphic.

The Flow Menu can display a title, an image, some body text, a progress indicator and a link button with the duration. In general, the title and body can be longer than they are in other menus.

The Flow Menu’s features are gathered from the Page Settings screen:

Displayed at the top of the box menu floating above the image and not affected by the 3D effect. In the Flow Menu, this field should be considered required.

Displayed below the title. In the Flow Menu, the body should be considered required. This text is faded out when the view button is hovered.

The text of the button used to open the page. This should be very succinct; If wrapping occurs, this may break the view button. Cannot be left blank.

Duration is displayed below the Button link text on the view button. The duration is faded out when the view button is hovered.

A required graphic to be displayed as the contents of the frame. Omitting the image will display a message to the user indicating that the course is broken.

Alternative text for the graphic.

Flow Menu Graphic Requirements

graphic template example
Download Flow Menu Graphic Template

For best results, use a graphic that is 924px (wide) by 462px (high) with a resolution of 72ppi.

Unlike the Box Menu, the Flow Menu will forcably crop the image to just slightly larger than the size of the frame, then scale the image to cover the graphic area with some overlap to allow for animation. This can cause some issues if the image is improperly sized, such as:

  • Using too small an image will create a blurry, jagged appearance which will appear even worse once the 3D effect is applied.
  • Using an image that is significantly larger will increase the processing required by the browser when applying the 3D effect, making the animation stuttery.
  • If you use an image that is the wrong aspect ratio (portrait instead of landscape), you will be unable to control what portion of the image is displayed.

In addition, Flow menu intentionally crops all sides of the image to allow for a subtle left-to-right animation as the view button is focused. Ensure your image makes sense with these areas clipped.

It is important not to use graphics with text in the Flow Menu. In addition to scaling the image, the Flow Menu will crop the image on lower resolutions. Additionally, accessibility rules warn that text in images is not accessible without additional steps (many of which are not possible in Adapt).