ejMenu

11 Jul 201824 minutes to read

The Menu control supports displaying a Menu created from list items. The Menu is based on a hierarchy of UL and LI elements where the list items are rendered as sub-menu items.

Syntax

  • JAVASCRIPT
  • $(element).ejMenu()

    Example

  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • $("#menu").ejMenu();

    Requires

    • module:jQuery

    • module:jquery.easing.1.3.min.js

    • module:ej.core.js

    • module:ej.data.js

    • module:ej.menu.js

    • module:ej.checkbox.js

    Members

    animationType enum

    To enable or disable the Animation while hover or click an menu items.See AnimationType

    Name Type Default Description
    Default string default Used to set AnimationType as Default
    None string none Used to set AnimationType as None

    Default Value

    • ej.AnimationType.Default

    Example

  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • //To set animationType API value during initialization   
          $("#menu").ejMenu({ animationType: ej.AnimationType.Default });

    contextMenuTarget string

    Specifies the target id of context menu. On right clicking the specified contextTarget element, context menu gets shown.

    Default Value

    • null

    Example

  • HTML
  • <div id="target" class="textarea">
            HTML is written in the form of HTML elements consisting of tags enclosed in angle
            brackets (like
            <html>
            ),within the web page content. HTML tags most commonly come in pairs like and ,although
            some tags, known as empty elements, are unpaired, for example
            <img>. The purpose of a web browser is to read HTML documents and compose them into
            visible or audible web pages. The browser does not display the HTML tags, but uses
            the tags to interpret the content of the page.
        </div>
        <ul id="contextMenu">
            <li><a>Cut</a></li>
            <li><a>Copy</a></li>
            <li><a>Paste</a></li>
            <li class="separator"></li>
            <li><a>Comments</a></li>
            <li><a>Links</a></li>
            <li><a>Clear Formatting</a></li>
        </ul>
  • JAVASCRIPT
  • //To set contextMenuTarget API value during initialization  
    
            $("#contextMenu").ejMenu({ menuType: ej.MenuType.ContextMenu, contextMenuTarget: "#target" });

    container string

    Specifies the container element selectors for submenu’s collision. The submenu gets displayed based on spacing available with respect to container element.

    Default Value

    • null

    Example

  • HTML
  • <div id="target">
        <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
    </div>
  • JAVASCRIPT
  • //To set container API value during initialization  
     
             $("#menu").ejMenu({ orientation: ej.Orientation.Vertical, container:"#target" });

    cssClass string

    Specify the CSS class to achieve custom theme.

    Default Value

    • ””

    Example

  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • //To Set the CSS class during initialization.    
    
         $("#menu").ejMenu({  cssClass: 'gradient-lime ' });

    enableAnimation boolean

    To enable or disable the Animation effect while hover or click an menu items.

    Default Value

    • true

    Example

  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • //To set enableAnimation API value during initialization 
          
          $("#menu").ejMenu({ enableAnimation: true });

    enableCenterAlign boolean

    Specifies the root menu items to be aligned center in horizontal menu.

    Default Value

    • false

    Example

  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • //To set enableCenterAlign API value during initialization  
    
          $("#menu").ejMenu({ enableCenterAlign: true });

    enabled boolean

    Enable / Disable the Menu control.

    Default Value

    • true

    Example

  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • //To set enabled API value during initialization  
     
         $("#menu").ejMenu({ enabled: true });

    enableRTL boolean

    Specifies the menu items to be displayed in right to left direction.

    Default Value

    • false

    Example

  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • //To set rtl API value during initialization  
    
         $("#menu").ejMenu({ enableRTL: true });

    enableSeparator boolean

    When this property sets to false, the menu items is displayed without any separators.

    Default Value

    • true

    Example

  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • //To set enableSeparator API value during initialization  
    
            $("#menu").ejMenu({ enableSeparator: true });

    excludeTarget string

    Specifies the target which needs to be excluded. i.e., The context menu will not be displayed in those specified targets.

    Default Value

    • null

    Example

  • HTML
  • <div id="target" class="textarea">
                               HTML is written in the form of HTML elements consisting of tags enclosed in angle
                               brackets (like
                               <html>
                               ),within the web page content. HTML tags most commonly come in pairs like and ,although
                               some tags, known as empty elements, are unpaired, for example
                               <img>. The purpose of a web browser is to read HTML documents and compose them into
                               visible or audible web pages. The browser does not display the HTML tags, but uses
                               the tags to interpret the content of the page.
            <div class="inner"> 
                           Context Menu will not be displayed here !!
                           </div>                     
                           </div>
                           <ul id="contextMenu">
                               <li><a>Cut</a></li> 
                               <li><a>Copy</a></li> 
                               <li><a>Paste</a></li> 
                          <li class="separator"></li> 
                               <li><a>Comments</a></li>
                               <li><a>Links</a></li>
                               <li><a>Clear Formatting</a></li>  
                           </ul>
  • JAVASCRIPT
  • //To set excludeTarget API value during initialization  
    
        $("#contextMenu").ejMenu({ menuType:ej.MenuType.ContextMenu,contextMenuTarget:"#target",excludeTarget: ".inner" });

    fields object

    Fields used to bind the data source and it includes following field members to make data bind easier.

    Default Value

    • null

    Example

  • HTML
  • <ul id="menu"/>
  • JAVASCRIPT
  • //To set fields API value during initialization  
    
                  $("#menu").ejMenu({ 
                   fields: { dataSource: window.menu, id: "id", parentId: "parentId", text: "text", spriteCssClass: "sprite" }
              });

    fields.child object

    It receives the child data for the inner level.

    fields.dataSource object

    It receives datasource as Essential DataManager object and JSON object.

    fields.htmlAttribute string

    Specifies the HTML attributes to “LI” item list.

    fields.id string

    Specifies the id to menu items list

    fields.imageAttribute string

    Specifies the image attribute to “img” tag inside items list.

    fields.imageUrl string

    Specifies the image URL to “img” tag inside item list.

    fields.linkAttribute string

    Adds custom attributes like “target” to the anchor tag of the menu items.

    fields.parentId string

    Specifies the parent id of the table.

    fields.query object

    It receives query to retrieve data from the table (query is same as SQL).

    fields.spriteCssClass string

    Specifies the sprite CSS class to “LI” item list.

    fields.tableName string

    It receives table name to execute query on the corresponding table.

    fields.text string

    Specifies the text of menu items list.

    fields.url string

    Specifies the URL to the anchor tag in menu item list.

    height string|number

    Specifies the height of the root menu.

    Default Value

    • “auto”

    Example

  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • //To set height API value during initialization  
            $("#menu").ejMenu({ height: 22 });

    htmlAttributes object

    Specifies the list of HTML attributes to be added to menu control.

    Default Value

    • {}

    Example

  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • //To set htmlAttributes API value during initialization  
    
            $("#menu").ejMenu({ htmlAttributes:{"aria-label":"menu"} });

    isResponsive boolean

    Enables/disables responsive support for the Menu control during the window resizing time.

    Default Value

    • true

    Example

  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • $("#menu").ejMenu({ isResponsive: false });

    menuType string|enum

    Specifies the type of the menu. Essential JavaScript Menu consists of two type of menu, they are Normal Menu and Context Menu mode.See MenuType

    Name Type Default Description
    ContextMenu string contextmenu Used to set MenuType as ContextMenu
    NormalMenu string normal menu Used to set MenuType as NormalMenu

    Default Value

    • ej.MenuType.NormalMenu

    Example

  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • //To set menuType API value during initialization  
    
            $("#menu").ejMenu({ menuType: "normalmenu" });

    openOnClick boolean

    Specifies the sub menu items to be show or open only on click.

    Default Value

    • false

    Example

  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • //To set openOnClick API value during initialization  
     
            $("#menu").ejMenu({ openOnClick: true });

    orientation string|enum

    Specifies the orientation of normal menu. Normal menu can rendered in horizontal or vertical direction by using this API. See Orientation

    Name Type Default Description
    Horizontal string horizontal Used to set Orientation as Horizontal
    Vertical string vertical Used to set Orientation as Vertical

    Default Value

    • ej.Orientation.Horizontal

    Example

  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • //To set orientation API value during initialization  
     
             $("#menu").ejMenu({ orientation: ej.Orientation.Horizontal });

    showRootLevelArrows boolean

    Specifies the main menu items arrows only to be shown if it contains child items.

    Default Value

    • true

    Example

  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • //To set showRootLevelArrows API value during initialization  
            
            $("#menu").ejMenu({ showRootLevelArrows: true });

    showSubLevelArrows boolean

    Specifies the sub menu items arrows only to be shown if it contains child items.

    Default Value

    • true

    Example

  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • //To set showSubLevelArrows API value during initialization  
     
            $("#menu").ejMenu({ showSubLevelArrows: true });

    subMenuDirection string|enum

    Specifies position of pull down submenu that will appear on mouse over.See Direction

    Name Type Default Description
    Left string left Used to set Direction as Left
    None string none Used to set Direction as None
    Right string right Used to set Direction as Right

    Default Value

    • ej.Direction.Right

    Example

  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • //To set subMenuDirection API value during initialization  
    
            $("#menu").ejMenu({ subMenuDirection: ej.Direction.Right });

    titleText string

    Specifies the title to responsive menu.

    Default Value

    • “Menu”

    Example

  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • //To set titleText API value during initialization  
    
            $("#menu").ejMenu({ titleText: "Menu" });

    width string|number

    Specifies the width of the main menu.

    Default Value

    • auto

    Example

  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • //To set width API value during initialization  
     
            $("#menu").ejMenu({ width: "800px",height:"30px" });

    overflowHeight string|number

    Specifies the popup menu height.

    Default Value

    • auto

    Example

  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • //To set overflowHeight API value during initialization  
     
            $("#menu").ejMenu({ overflowHeight: "200px" });

    overflowWidth string|number

    Specifies the popup menu width.

    Default Value

    • auto

    Example

  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • //To set overflowWidth API value during initialization  
     
            $("#menu").ejMenu({ overflowWidth: "200px" });

    Methods

    disable()

    Disables the Menu control.

    Example

  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • $("#menu").ejMenu();
        
        //initialize the menu object
        var menuObj = $("#menu").data("ejMenu");
        
        //To disable Menu control
        menuObj.disable();
  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • $("#menu").ejMenu();
        
        //To disable Menu control
        $("#menu").ejMenu("disable");

    disableItem(itemtext)

    Specifies the Menu Item to be disabled by using the Menu Item Text.

    Name Type Description
    itemtext string Specifies the Menu Item Text to be disabled.

    Example

  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • $("#menu").ejMenu();
    
            //initialize the menu object
            var menuObj = $("#menu").data("ejMenu");
    
            //To disable Menu item using item text
            menuObj.disableItem("Home");
  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • $("#menu").ejMenu();
    
            //To disable Menu item using item text
            $("#menu").ejMenu("disableItem", "Home");

    disableItemByID(itemid)

    Specifies the Menu Item to be disabled by using the Menu Item Id.

    Name Type Description
    itemid string|number Specifies the Menu Item id to be disabled

    Example

  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • $("#menu").ejMenu();
    
            //initialize the menu object
            var menuObj = $("#menu").data("ejMenu");
    
            //To disable Menu item using item id
            menuObj.disableItemByID("More");
  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • $("#menu").ejMenu();
    
            //To disable Menu item using item id
            $("#menu").ejMenu("disableItemByID", "More");

    enable()

    Enables the Menu control.

    Example

  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • $("#menu").ejMenu();
    
            //initialize the menu object
            var menuObj = $("#menu").data("ejMenu");
    
            //To enable Menu control
            menuObj.enable();
  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • $("#menu").ejMenu();
    
            //To enable Menu control
            $("#menu").ejMenu("enable");

    enableItem(itemtext)

    Specifies the Menu Item to be enabled by using the Menu Item Text.

    Name Type Description
    itemtext string Specifies the Menu Item Text to be enabled.

    Example

  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • $("#menu").ejMenu();
    
            //initialize the menu object
            var menuObj = $("#menu").data("ejMenu");
    
            //To enable Menu item using item text
            menuObj.enableItem("Search Jobs");
  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • $("#menu").ejMenu();
    
            //To enable Menu item using item text
            $("#menu").ejMenu("enableItem", "Search Jobs");

    enableItemByID(itemid)

    Specifies the Menu Item to be enabled by using the Menu Item Id.

    Name Type Description
    itemid string|number Specifies the Menu Item id to be enabled.

    Example

  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • $("#menu").ejMenu();
    
            //initialize the menu object
            var menuObj = $("#menu").data("ejMenu");
    
            //To enable Menu item using item id
            menuObj.enableItemByID("More");
  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • $("#menu").ejMenu();
    
            //To enable Menu item using item id
            $("#menu").ejMenu("enableItemByID", "More");

    hide()

    Hides the Context Menu control.

    Example

  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • $("#menu").ejMenu();
    
            //initialize the menu object
            var menuObj = $("#menu").data("ejMenu");
    
            //To hide context menu
            menuObj.hide();
  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • $("#menu").ejMenu();
    
            //To hide context menu
            $("#menu").ejMenu("hide");

    hideItems(itemID)

    Hides the specific items in Menu control.

    Name Type Description
    itemID string|array ItemID of the Menu item to be hidden

    Example

  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li id="search"><a>Advanced Search</a></li>
                    <li id="company"><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • $("#menu").ejMenu();
    
            //initialize the menu object
            var menuObj = $("#menu").data("ejMenu");
    
            //To hide the menu items
            menuObj.hideItems(["#search","#company"]);
  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li id="search"><a>Advanced Search</a></li>
                    <li id="company"><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • $("#menu").ejMenu();
    
            //To hide the menu items
            $("#menu").ejMenu("hideItems","#search");

    insert(item, target)

    Insert the menu item as child of target node.

    Name Type Description
    item Object Information about Menu item.
    target string|Object Selector of target node or Object of target node.

    Example

  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • $("#menu").ejMenu();
        
        //initialize the menu object
        var menuObj = $("#menu").data("ejMenu");
        
        //To insert menu item
        menuObj.insert([{
            id: "More",
            text: "More"
        }], "#Home");
  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • $("#menu").ejMenu();
    
            //To insert menu item 
            $("#menu").ejMenu("insert", [{
                id: "More",
                text: "More"
            }], "#Home");

    insertAfter(item, target)

    Insert the menu item after the target node.

    Name Type Description
    item Object Information about Menu item.
    target string|Object Selector of target node or Object of target node.

    Example

  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • $("#menu").ejMenu();
            
            //initialize the menu object
            var menuObj = $("#menu").data("ejMenu");
            
            //To insert menu item 
            menuObj.insertAfter([{
                id: "More",
                text: "More"
            }], "#Home");
  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • $("#menu").ejMenu();
    
            //To insert menu item 
            $("#menu").ejMenu("insertAfter", [{
                id: "More",
                text: "More"
            }], "#Home");

    insertBefore(item, target)

    Insert the menu item before the target node.

    Name Type Description
    item Object Information about Menu item.
    target string|Object Selector of target node or Object of target node.

    Example

  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • $("#menu").ejMenu();
    
            //initialize the menu object
            var menuObj = $("#menu").data("ejMenu");
    
            //To insert menu item 
            menuObj.insertBefore([{
                id: "More",
                text: "More"
            }], "#Home");
  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • $("#menu").ejMenu();
    
            //To insert menu item 
            $("#menu").ejMenu("insertBefore", [{
                id: "More",
                text: "More"
            }], "#Home");

    remove(target)

    Remove Menu item.

    Name Type Description
    target object|array Selector of target node or Object of target node.

    Example

  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • $("#menu").ejMenu();
    
            //initialize the menu object
            var menuObj = $("#menu").data("ejMenu");
    
            //To remove menu item 
            menuObj.remove(["#Home"]);
  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • $("#menu").ejMenu();
    
            //To remove menu item 
            $("#menu").ejMenu("remove", ["#Home"]);

    show(locationX, locationY, targetElement, event)

    To show the Menu control.

    Name Type Description
    locationX number x co-ordinate position of context menu.
    locationY number y co-ordinate position of context menu.
    targetElement object target element
    event object name of the event

    Example

  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • $("#menu").ejMenu();
    
            //initialize the menu object
            var menuObj = $("#menu").data("ejMenu");
    
            //To show menu
            menuObj.show();
  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • $("#menu").ejMenu();
    
            //To show menu
            $("#menu").ejMenu("show");

    showItems(itemID)

    Show the specific items in Menu control.

    Name Type Description
    itemID string|array ItemID of the Menu item to be shown

    Example

  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li id="search"><a>Advanced Search</a></li>
                    <li id="company"><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • $("#menu").ejMenu();
    
            //initialize the menu object
            var menuObj = $("#menu").data("ejMenu");
    
            //To show the menu items
            menuObj.showItems(["#search","#company"]);
  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li id="search"><a>Advanced Search</a></li>
                    <li id="company"><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • $("#menu").ejMenu();
    
            //To show the menu items.
            $("#menu").ejMenu("showItems",#search");

    Events

    beforeOpen

    Fires before context menu gets open.

    Name Type Description
    argument Object Event parameters from context menu
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the menu model
    type string returns the name of the event
    target object returns the target element

    Example

  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • //before context menu open event for menu
            $("#menu").ejMenu({
                beforeOpen: function (args) { }
            });

    click

    Fires when mouse click on menu items.

    Name Type Description
    argument Object Event parameters from menu
    Name Type Description
    model object returns the menu model
    type string returns the name of the event
    text string returns clicked menu item text
    element object returns clicked menu item element
    event object returns the event
    selectedItem number returns the selected item

    Example

  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • //click event for menu
            $("#menu").ejMenu({
                click: function (args) { }
            });

    close

    Fire when context menu on close.

    Name Type Description
    argument Object Event parameters from menu
    Name Type Description
    model object returns the menu model
    type string returns the name of the event
    target object returns the target element

    Example

  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • //context menu close event for menu
            $("#menu").ejMenu({
                close: function (args) { }
            });

    open

    Fires when context menu on open.

    Name Type Description
    argument Object Event parameters from menu
    Name Type Description
    model object returns the menu model
    type string returns the name of the event
    target object returns the target element

    Example

  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • //context menu open event for menu
            $("#menu").ejMenu({
                open: function (args) { }
            });

    create

    Fires to create menu items.

    Name Type Description
    argument Object Event parameters from menu
    Name Type Description
    model object returns the menu model
    type string returns the name of the event

    Example

  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • //Create event for menu
            $("#menu").ejMenu({
                create: function (args) { }
            });

    destroy

    Fires to destroy menu items.

    Name Type Description
    argument Object Event parameters from menu
    Name Type Description
    model object returns the menu model
    type string returns the name of the event

    Example

  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • //Destroy event for menu
            $("#menu").ejMenu({
                destroy: function (args) { }
            });

    keydown

    Fires when key down on menu items.

    Name Type Description
    argument Object Event parameters from menu
    Name Type Description
    model object returns the menu model
    type string returns the name of the event
    menuText string returns clicked menu item text
    element object returns clicked menu item element
    event object returns the event

    Example

  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • //keydown event for menu
            $("#menu").ejMenu({
                keydown: function (args) { }
            });

    mouseout

    Fires when mouse out from menu items.

    Name Type Description
    argument Object Event parameters from menu
    Name Type Description
    model object returns the menu model
    type string returns the name of the event
    text string returns clicked menu item text
    element object returns clicked menu item element
    event object returns the event

    Example

  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • //mouse out event for menu
            $("#menu").ejMenu({
                mouseout: function (args) { }
            });

    mouseover

    Fires when mouse over the Menu items.

    Name Type Description
    argument Object Event parameters from menu
    Name Type Description
    model object returns the menu model
    type string returns the name of the event
    text string returns clicked menu item text
    element object returns clicked menu item element
    event object returns the event

    Example

  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • //mouse over event for menu
            $("#menu").ejMenu({
                mouseover: function (args) { }
            });

    overflowOpen

    Fires when overflow popup menu opens.

    Name Type Description
    argument Object Event parameters from menu
    Name Type Description
    model object returns the menu model
    type string returns the name of the event
    e object returns the event object
    cancel boolean if the event should be cancelled ; otherwise ,false

    Example

  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • //popup menu open event 
            $("#menu").ejMenu({
                overflowOpen: function (args) { }
            });

    overflowClose

    Fires when overflow popup menu closes.

    Name Type Description
    argument Object Event parameters from menu
    Name Type Description
    model object returns the menu model
    type string returns the name of the event
    e object returns the event object
    cancel boolean if the event should be cancelled ; otherwise ,false

    Example

  • HTML
  • <ul id="menu">
            <li id="Home"><a>Home</a></li>
            <li>
                <a>Search Jobs</a>
                <ul>
                    <li><a>Advanced Search</a></li>
                    <li><a>Jobs by Company</a></li>
                    <li><a>Jobs by Category</a></li>
                    <li><a>Jobs by Location</a></li>
                    <li><a>Jobs by Skills</a></li>
                    <li><a>Jobs by Designation</a></li>
                </ul>
            </li>
            <li id="Post Resume"><a>Post Resume</a></li>
            <li id="Job Seeker"><a>JobSeeker Login</a></li>
            <li id="Fast Forward">
                <a>Fast Forward</a>
                <ul>
                    <li><a>Resume writing</a></li>
                    <li><a>Certification</a></li>
                    <li><a>Resume Spotlight</a></li>
                    <li><a>Jobs4u</a></li>
                </ul>
            </li>
            <li id="More">
                <a>More</a>
                <ul>
                    <li><a>Mobile</a></li>
                    <li><a>Pay check</a></li>
                    <li><a>Blog</a></li>
                </ul>
            </li>
        </ul>
  • JAVASCRIPT
  • //popup menu close event 
            $("#menu").ejMenu({
                overflowClose: function (args) { }
            });