Navigation Bar With Context Menu

In this post we are going to show you how to add a Context Menu to a Navigation Bar. The context menu will have two items. The first context menu item’s task will be to expand a navigation bar item. The second menu item will collapse a navigation bar item. The context menu should be opened when the user right clicks an item in the Navigation Bar.
1. Add references to the JavaScript and CSS files:

   <link rel="stylesheet" href="jqx.base.css" type="text/css" />
   <link rel="stylesheet" href="jqx.summer.css" type="text/css" />
   <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
   <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
   <script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>
   <script type="text/javascript" src="jqxexpander.js"></script>
   <script type="text/javascript" src="jqxnavigationbar.js"></script>
2. Add the HTML structure for the Menu and Navigation Bar widgets in the document’s body:

        <div id='jqxMenu'>

        <div id="jqxNavigationBar">
                <div style="padding: 15px">Business Cards</div>
                <div style="padding: 15px">Phone list</div>
                <div style="padding: 15px">Icons</div>

The first div tag represents the context menu’s html structure. The second div with id “jqxNavigationBar” contains the jqxNavigationBar html structure.
3.Initialize the Context Menu:

var contextMenu = $("#jqxMenu").jqxMenu({ width: '120px', height: '56px', autoOpenPopup: false, mode: 'popup', theme: ‘summer’ });

In order to use the jqxMenu widget as a context menu, we set its ‘mode’ property to ‘popup’. The ‘autoOpenPopup’ property specifies whether the context menu should replace the default browser’s context menu. In this scenario, we want to open the context menu only when the user right clicks an item in the Navigation Bar.
4.Initialize the Navigation Bar:

$("#jqxNavigationBar").jqxNavigationBar({ width: 250, height: 420, theme: ‘summer’, expandMode: 'multiple' });
5. Open the Context Menu when the user right clicks a navigation bar item and save the clicked item’s index.

$(".jqx-expander-header").bind('mousedown', function (event) {
    var rightClick = isRightClick(event);
    if (rightClick) {
        var scrollTop = $(window).scrollTop(),
            scrollLeft = $(window).scrollLeft();
        contextMenu.jqxMenu('open', parseInt(event.clientX) + 5 + scrollLeft, parseInt(event.clientY) + 5 + scrollTop);
        // save the index of the clicked item. 
        itemIndex = getItemIndex($(;

function getItemIndex(item) {
    var items = $('#jqxNavigationBar').find('.jqx-expander-header');
    for (var i = 0; i < items.length; i += 1) {
        if ($(items[i]).text() === item.text()) {
            return i;
    return -1;

6. Select the ‘jqxMenu’ element and trigger the ‘itemclick’ event. The ‘itemclick’ event is raised when a menu item is clicked. In the event handler we call either ‘expandAt’ or ‘collapseAt’ method to expand or collapse a Navigation Bar item.

$("#jqxMenu").bind('itemclick', function (event) {
    var item = $(event.args).text();
    switch (item) {
        case "Expand":
            $('#jqxNavigationBar').jqxNavigationBar('expandAt', itemIndex);
        case "Collapse":
            $('#jqxNavigationBar').jqxNavigationBar('collapseAt', itemIndex);

About admin

This entry was posted in JavaScript, JavaScript Plugins, JavaScript Widgets, jQuery, jQuery Plugins, jQuery UI, jQuery UI Plugins, jQuery UI Widgets, jQuery Widgets, jQWidgets, jqxMenu, jqxNavigationBar and tagged , , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply