Miscellaneous

Height

Specifies the height of the root menu. You can customize the height of the Menu control by using height property.

You can specify the height of the Menu control as shown below.

  • html
  • <ej-menu id="menu" [height]="50"></ej-menu>

    Width

    Specifies the width of the main menu. You can customize the width of the Menu control by using width property.

    You can specify the width of the Menu control as shown below.

  • html
  • <ej-menu id="menu" [width]="700"></ej-menu>

    Open on click

    Specifies the sub menu items to be show or open only on click. It accepts the Boolean value. Its default value is false. If we set openOnClick property to true then the submenu items will open only on click. By default the submenu will open when we hover on menu items.

    Add the following code in order to show the menu items only on click.

  • html
  • <ej-menu id="menu" [fields.dataSource]="data" [fields]="fieldsvalues" [width]="612" [openOnClick]="true"></ej-menu>

    Output screenshot for the above code example is as follows.

    Animation

    AnimationType is used to enable or disable the Animation when hover or click on menu items. Its value type is string. It accepts two values such as “none” and “default”. Support to disable the AnimationType when hover or click on menu items is none. Support to enable the Animation Type when hover or click on menu items is default.

    Add the following code to render menu using animation type.

  • html
  • <ej-menu id="menu" [animationType]="type" [fields.dataSource]="data" [fields]="fieldsvalues"></ej-menu>
  • html
  • import {Component} from '@angular/core';
        @Component({
                selector: 'sd-home',
                templateUrl: 'app/components/menu/menu.component.html'
                })
        export class MenuComponent {
                data: Array<Object>;
                fieldsvalues: Object;
                type: any;
                constructor() {
                    this.data = [
                        { id: 1, text: "Home", parentId: null },
                        { id: 2, text: "Services", parentId: null },
                        { id: 3, text: "About", parentId: null },
                        { id: 4, text: "Contact us", parentId: null },
                        { id: 5, text: "Careers", parentId: null },
                        { id: 11, parentId: 1, text: "Foundation" },
                        { id: 12, parentId: 1, text: "Launch" },
                        { id: 13, parentId: 1, text: "About" },
                        { id: 14, parentId: 2, text: "Consulting" },
                        { id: 15, parentId: 2, text: "Outsourcing" },
                        { id: 16, parentId: 4, text: "Contact number" },
                        { id: 17, parentId: 4, text: "E-mail" },
                        { id: 18, parentId: 5, text: "Position" },
                        { id: 19, parentId: 5, text: "Apply online" },
                        { id: 20, parentId: 13, text: "Company" },
                        { id: 21, parentId: 13, text: "Location" },
                    ];
                    this.fieldsvalues = { parentId: "parentId", id: "id", text: "text" };
                    this.type = ej.AnimationType.Default;
                }
        }

    Output screenshot for the above code sample is as follows.

    Title text

    Specifies the title to the responsive menu. You can provide title to the Menu control by using titleText property.

    You can specify the title of the Menu control as follows.

  • html
  • <ej-menu id="menu" titleText="title" [fields.dataSource]="data" [fields]="fieldsvalues"></ej-menu>
  • html
  • import {Component} from '@angular/core';
        @Component({
                selector: 'sd-home',
                templateUrl: 'app/components/menu/menu.component.html'
                })
        export class MenuComponent {
                data: Array<Object>;
                fieldsvalues: Object;
                title: string;
                constructor() {
                    this.data = [
                        { id: 1, text: "Home", parentId: null },
                        { id: 2, text: "Services", parentId: null },
                        { id: 3, text: "About", parentId: null },
                        { id: 4, text: "Contact us", parentId: null },
                        { id: 5, text: "Careers", parentId: null },
                        { id: 11, parentId: 1, text: "Foundation" },
                        { id: 12, parentId: 1, text: "Launch" },
                        { id: 13, parentId: 1, text: "About" },
                        { id: 14, parentId: 2, text: "Consulting" },
                        { id: 15, parentId: 2, text: "Outsourcing" },
                        { id: 16, parentId: 4, text: "Contact number" },
                        { id: 17, parentId: 4, text: "E-mail" },
                        { id: 18, parentId: 5, text: "Position" },
                        { id: 19, parentId: 5, text: "Apply online" },
                        { id: 20, parentId: 13, text: "Company" },
                        { id: 21, parentId: 13, text: "Location" },
                    ];
                    this.fieldsvalues = { parentId: "parentId", id: "id", text: "text" };
                    this.title = "Title of the Menu";
                }
        }

    The following screenshot displays the output of the above code.

    Show root level arrows

    Specifies the main menu item arrows to display only when it contains child menu items. You can use “showRootLevelArrows” property to display the arrows of main menu items only when it contains child menu items. This property accepts Boolean value. Its default value is true.

    Refer to the below code example.

  • html
  • <ej-menu id="menu" [showRootLevelArrows]="false" [fields.dataSource]="data" [fields]="fieldsvalues"></ej-menu>

    The following screenshot displays the output of the above code.

    Show sub level arrows

    Specifies the sub menu items arrows to display only when it contains child menu items. You can use showSubLevelArrows property to show the arrows of sub menu items only when it contains child menu items. This property accepts Boolean value. Its default value is true.

    Refer to the below code example.

  • html
  • <ej-menu id="menu" [showSubLevelArrows]="false" [fields.dataSource]="data" [fields]="fieldsvalues"></ej-menu>

    The following screenshot displays the output of the above code.