Fisheye Menu

Morfik's Fisheye Menu Package allows you to add expanding menus, in a similar manner to Mac OS X Dock, to your Morfik-built websites. When the user moves the mouse over Fisheye Menu items, they increase in size and show the text description. When the mouse is moved away, the menu item returns to its original state and the description text is hidden.


A Quick Walkthrough

To use the Morfik Fisheye Menu package, add the package to the project by utilizing the ‘Used Packages’ command on the project ribbon (see Figure 1), or drag the package file onto the application main client area.

Figure 1: Used Packages Command

Once added, the Fisheye Widget will appear on the home ribbon when the form designer is active (see Figure 2). This widget is ready to use with no need for additional coding.

Figure 2: Widget Gallery

To add images or icons to the Fisheye menu to be displayed in runtime, place a Fisheye widget on a form. Then right click a widget to show a pop-up menu and select New Image (Figure 3).

Figure 3: Figure 3 Adding a New Image in the Fisheye Menu

To select a specific image or icon to be displayed in the Fisheye menu, select an image in the Picture property of the widget (Figure 4).

Figure 4: Selecting Images to be displayed in the Fisheye menu and adding the text to be shown at runtime

This allows you to add as many images as you like.

Note: You may rearrange items inside the Fisheye Menu by clicking on the image and dragging it to the new location.

To add the text description to the menu item, you have to specify the Text property (Figure 4).

Now you may run your project to see how the menu works at run time.

Fisheye Menu Widget

You may further customize the behavior of the Fisheye widget using the properties described below:

Color sets the background color for the menu ribbon

Item Size sets the item's scaling ratio

Max Width sets the maximum enlargement of a menu item in pixels when the mouse is moved over it

Vertical Align specifies the direction of menu expansion when the user moves the mouse over it.

To take an action when the menu item is clicked, you can handle the OnClick event of the menu item.

See Also

Back to top