Horizontal menu

This example shows how to create a horizontal menu.

Creating the Menu application

1. Create a new menu application.

Creating the menu items

2 . To create the items that will be part of the menu, in the application menu click on the “Menu Items” option .

For a hierarchical menu add items and sub articles.

3. Click on the “+” icon to add a new Menu Item and enter Form in the Text property.

4. Repeat the previous step to create the Grids and Reports items

5. We will add an item with the functionality to close the application. Still on the same screen, add one more item in the application, enter ” Exit ” in the Text property and in the Target property select Exit .

Creating the sub-items in the menu

6. To create subitems it is necessary to create a new item and then click on the “>” button to insert the new item after the previous item, as shown in the example below

7. We will create a sub-item in the item Form. In this sub-item , link, hint and icon will be informed . See the image below.

The icons can be inserted by uploading an image from your computer, through our image libraries or using the Font Awesome item library.

8. Look at the Master / Detail article. A level is placed inside the form.

9. Once the menu is complete, it is possible to change the positions and levels of the items using the directional buttons.

10. Use the table below (with the elements and sub-elements used in this sample) to create a menu. The steps are the same as described above.

Item (Label)Application
Master / Detailform38
Multiple Recordsform40
Editable Gridform39
Unique Key Validationform44
Group By – Customers x Statesgrid05
Pivot Table Summarygrid29
Simple Drill Downgrid14
Business Cardpdf02

Enabling toolbar with menu shortcuts

11. Access the “Toolbar” option on the Scriptcase side menu

12 . Within the toolbar option, add the items you want to show as a “shortcut” below the horizontal menu.

The settings on the menu toolbar are similar to the item settings,

13. You can use the items in a button, link or image format . In this example, we will use the “button” option .

It is also possible to configure the label, icons (also supported by the Font Awesome icon library), hint, position, target and the CSS class where you can customize colors, format and font and other layout aspects.

14. After finalizing the item and toolbar settings, our menu is ready for viewing and testing, click on the Scriptcase main menu option “Run Application” .

Tutorials in the same category

Menu with Font-Awesome

For the items in a menu to have icons of the new Font-Awesome functionality and design, do the ...

Dynamic menu

This example shows how to dynamically assemble the elements and sub-elements of a menu application ...

Menu with tabs

In this example we will see how to configure the menu to open the applications in tabs. Crea...

Menu Breadcrumb

In this tutorial, we will see how to configure the menu to display a navigation path with the links...

Comment this post