MobileAppFramework_with_SplitView_ExpandingTreeMenu

Description

A framework for a mobile application with a hierarchical split-view Menu for navigating the app.

Discussion

This template is similar to the MobileAppFremework_SplitView_Hierarchical_Menu template, except that the menu is rendered using a ViewBox control, not a List control.

The ViewBox menu can contain nested menus. When a menu item that has children is expanded, the ViewBox is animated, creating a very appealing visual effect.

To us the template, chose the template from the list of available templates when you create a new UX component.

On a Phone, the UX will render as shown below.

Tapping on the 'hamburger' menu icon in the upper left-hand corner will display the menu. The menu is initially shown in its collapsed state:

Sub-menus can be expanded by tapping on their parent menu item. When you tap on a menu item that is an endpoint, the associated action for that menu item is executed.

On a tablet, the menu is always shown on the left of the screen.

To edit the list of choices shown in the menu, edit the ViewBox Control. In the ViewBox control, edit the Data Source. The menu structure and the associated menu actions are defined in the Javascript object for the ViewBox data source.

The background color of the menu is set in the CSS tab in the ViewBox builder. To change the menu color, edit the ViewBox and in the CSS tab, edit the $color SASS variable:

$color: #221f22; //this sets the color of the menu tree.