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
$(element).ejMenu()
Example
<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>
$("#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
<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>
//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
<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>
//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
<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>
//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
<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>
//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
<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>
//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
<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>
//To set enableCenterAlign API value during initialization
$("#menu").ejMenu({ enableCenterAlign: true });
enabled boolean
Enable / Disable the Menu control.
Default Value
- true
Example
<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>
//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
<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>
//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
<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>
//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
<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>
//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
<ul id="menu"/>
//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
<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>
//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
<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>
//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
<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>
$("#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
<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>
//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
<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>
//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
<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>
//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
<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>
//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
<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>
//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
<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>
//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
<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>
//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
<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>
//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
<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>
//To set overflowHeight API value during initialization
$("#menu").ejMenu({ overflowHeight: "200px" });
overflowWidth string|number
Specifies the popup menu width.
Default Value
- auto
Example
<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>
//To set overflowWidth API value during initialization
$("#menu").ejMenu({ overflowWidth: "200px" });
Methods
disable()
Disables the Menu control.
Example
<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>
$("#menu").ejMenu();
//initialize the menu object
var menuObj = $("#menu").data("ejMenu");
//To disable Menu control
menuObj.disable();
<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>
$("#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
<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>
$("#menu").ejMenu();
//initialize the menu object
var menuObj = $("#menu").data("ejMenu");
//To disable Menu item using item text
menuObj.disableItem("Home");
<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>
$("#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
<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>
$("#menu").ejMenu();
//initialize the menu object
var menuObj = $("#menu").data("ejMenu");
//To disable Menu item using item id
menuObj.disableItemByID("More");
<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>
$("#menu").ejMenu();
//To disable Menu item using item id
$("#menu").ejMenu("disableItemByID", "More");
enable()
Enables the Menu control.
Example
<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>
$("#menu").ejMenu();
//initialize the menu object
var menuObj = $("#menu").data("ejMenu");
//To enable Menu control
menuObj.enable();
<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>
$("#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
<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>
$("#menu").ejMenu();
//initialize the menu object
var menuObj = $("#menu").data("ejMenu");
//To enable Menu item using item text
menuObj.enableItem("Search Jobs");
<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>
$("#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
<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>
$("#menu").ejMenu();
//initialize the menu object
var menuObj = $("#menu").data("ejMenu");
//To enable Menu item using item id
menuObj.enableItemByID("More");
<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>
$("#menu").ejMenu();
//To enable Menu item using item id
$("#menu").ejMenu("enableItemByID", "More");
hide()
Hides the Context Menu control.
Example
<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>
$("#menu").ejMenu();
//initialize the menu object
var menuObj = $("#menu").data("ejMenu");
//To hide context menu
menuObj.hide();
<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>
$("#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
<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>
$("#menu").ejMenu();
//initialize the menu object
var menuObj = $("#menu").data("ejMenu");
//To hide the menu items
menuObj.hideItems(["#search","#company"]);
<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>
$("#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
<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>
$("#menu").ejMenu();
//initialize the menu object
var menuObj = $("#menu").data("ejMenu");
//To insert menu item
menuObj.insert([{
id: "More",
text: "More"
}], "#Home");
<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>
$("#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
<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>
$("#menu").ejMenu();
//initialize the menu object
var menuObj = $("#menu").data("ejMenu");
//To insert menu item
menuObj.insertAfter([{
id: "More",
text: "More"
}], "#Home");
<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>
$("#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
<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>
$("#menu").ejMenu();
//initialize the menu object
var menuObj = $("#menu").data("ejMenu");
//To insert menu item
menuObj.insertBefore([{
id: "More",
text: "More"
}], "#Home");
<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>
$("#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
<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>
$("#menu").ejMenu();
//initialize the menu object
var menuObj = $("#menu").data("ejMenu");
//To remove menu item
menuObj.remove(["#Home"]);
<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>
$("#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
<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>
$("#menu").ejMenu();
//initialize the menu object
var menuObj = $("#menu").data("ejMenu");
//To show menu
menuObj.show();
<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>
$("#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
<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>
$("#menu").ejMenu();
//initialize the menu object
var menuObj = $("#menu").data("ejMenu");
//To show the menu items
menuObj.showItems(["#search","#company"]);
<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>
$("#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
|
Example
<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>
//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
|
Example
<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>
//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
|
Example
<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>
//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
|
Example
<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>
//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
|
Example
<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>
//Create event for menu
$("#menu").ejMenu({
create: function (args) { }
});
destroy
Fires to destroy menu items.
Name | Type | Description | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
argument | Object | Event parameters from menu
|
Example
<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>
//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
|
Example
<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>
//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
|
Example
<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>
//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
|
Example
<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>
//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
|
Example
<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>
//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
|
Example
<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>
//popup menu close event
$("#menu").ejMenu({
overflowClose: function (args) { }
});