Click here to Skip to main content
Click here to Skip to main content

Navigation Bar With Context Menu

, 16 Jan 2012
Rate this:
Please Sign up or sign in to vote.
How to add a Context Menu to a Navigation Bar.

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:
  2. <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>
  3. Add the HTML structure for the Menu and Navigation Bar widgets in the document’s body:
  4. <div id='jqxMenu'>
        <ul>
            <li>Expand</li>
            <li>Collapse</li>
        </ul>
    </div>
    
    <div id="jqxNavigationBar">
        <div>
            Contacts
        </div>
        <div>
            <div style="padding: 15px">Business Cards</div>
        </div>
        <div>
            Tasks
        </div>
        <div>
            <div style="padding: 15px">Phone list</div>
        </div>
        <div>
            Notes
        </div>
        <div>
            <div style="padding: 15px">Icons</div>
        </div>
    </div>

    The first div tag represents the context menu’s html structure. The second div with id “jqxNavigationBar” contains the jqxNavigationBar HTML structure.

  5. Initialize the Context Menu:
  6. 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.

  7. Initialize the Navigation Bar:
  8. $("#jqxNavigationBar").jqxNavigationBar({ width: 250, height: 420, theme: ‘summer’, expandMode: 'multiple' });
  9. Open the Context Menu when the user right clicks a navigation bar item and save the clicked item’s index.
  10. $(".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($(event.target));
        }
    });
    
    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;
    }
  11. Select the ‘jqxMenu’ element and trigger the ‘itemclick’ event. The ‘itemclick’ event is raised when a menu item is clicked.
  12. 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);
                break;
            case "Collapse":
                $('#jqxNavigationBar').jqxNavigationBar('collapseAt', itemIndex);
                break;
        }
    });

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

jqwidgets
jQWidgets
United States United States
jQWidgets specializes in the development of platform independent and cross-browser compatible presentation layer components for building modern web-based applications for PC, Touch and Mobile. Our product provides developers with the essential set of User Interface widgets needed to streamline their development and reduce project costs.
Our goal is to help our customers deliver better web-based applications that can be accessed through any device and are pleasure to use.
Group type: Organisation

13 members

Follow on   Twitter

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web02 | 2.8.140709.1 | Last Updated 16 Jan 2012
Article Copyright 2012 by jqwidgets
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid