Show contents

Working with General Visual Components > Components > MainMenu > Example of Creating the MainMenu Component

Example of Creating the MainMenu Component

To execute the example, in the HEAD tag, add links to the PP.js library and to the PP.css visual styles. The page must contain a DIV element with the mm1 identifier where the main menu is placed. Seebelow the example of the main menu creation, consisting of three buttons:

    //menu for the first button of the main menu

    var menu0 = new PP.Ui.Menu({

            //event of the menu item selection

             ItemSelected: onItemClick,

            //menu items

             Items: [

   { MenuItem: { Content: "Create"} },

   { MenuItem: { Content: "Open..."} },

   { MenuItem: { Content: "Save"} }

   ]

    });

    //main menu buttons

    var mainMenuButton0 = new PP.Ui.MainMenuButton({

             Content: "File",

             //menu for the button

             Menu: menu0

             });

    var mainMenuButton1 = new PP.Ui.MainMenuButton({Content: "Editing"});

    var mainMenuButton2 = new PP.Ui.MainMenuButton({Content: "Format"});

    //main menu

    var mainMenu = new PP.Ui.MainMenu({

        ParentNode: document.getElementById("mm1"),

        //main menu buttons

        Items: [mainMenuButton0, mainMenuButton1, mainMenuButton2]

    });

    //main menu width

    mainMenu.setWidth(300)

    //event handler of the menu item selection

    function onItemClick(item, args){

        var id = item.getId(); 

        alert("Menu item is chosen «" + mainMenu.getItemById(id).getContent()+ "»");

    }

The MainMenu component is located on the HTML page after executing the example and looks as follows:

Component includes three buttons. The menu consisting of three items opens by clicking the File button. The Select <item name> item message is displayed by selecting any of the items.