jQuery UI Widgets Forums Navigation Menu, Context Menu Context Menu with sub menu

This topic contains 6 replies, has 4 voices, and was last updated by  Nadezhda 9 years ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • Context Menu with sub menu #69474

    Siva
    Participant

    Hi team,

    I have an issue on contextmenu which have sub menu too. Let me explain the scenario

    I have five list items like : ‘home, settings, logon, product, career’
    On the “settings” i have sub menu list items like: ‘profile, education, life’ and so …

    Once i hover on that “settings”, it will open the submenu which i listed above. At this time, immediately move my mouse on the way to down like ‘logon, product….’ ok..
    Still that “submenu” opened, again i hover up on that “settings” only “submenu” getting closed..

    I want that once the mouse leave from “settings” menu, that submenu should be closed.

    I saw our examples too, its also the same behaviour. will you please help me how to fix this issue?

    context menu with submenu hover issue

    Thanks in advance.

    Context Menu with sub menu #69477

    Nadezhda
    Participant

    Hello Siva,

    You can achieve your requirement as you set ‘autoOpenPopup’ property to false and ‘mode’ to ‘popup’ (Context Menu demo). If it does not help you fix the issue, please provide us with a JSFiddle example we can test to determine if there is anything wrong with your implementation.

    Best Regards,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/

    Context Menu with sub menu #69524

    Siva
    Participant

    Hello team,

    We tried all this type of API’s from jqxmenu, but no use for us. Please check your website header menu too, its also have the same issue.

    • This reply was modified 9 years ago by  Siva.
    Context Menu with sub menu #69528

    seenuvasan
    Participant

    Hello – JQwidget Team,
    I also from siva team.
    1) problem we having: “jqMenu” functionality.

    2) what is existing: when we mouse leave from main menu, the sub menu not closed for certain cases (particularly for speed cursor moving on menu.)

    3) what we exactly need: i) when mouse hover is their, the sub menu need to open
    ii) when mouse not hover the sub menu need to hide.

    — I think this is not a major issue, but we need to do this for our project —

    Note: if you dont understand my concern clearly, please let me know.

    We need the sub menu show and hide functionality based on the mouse hover function….
    I guess now the function is based on mouse enter and mouse leave or some other…

    • This reply was modified 9 years ago by  seenuvasan.
    • This reply was modified 9 years ago by  seenuvasan.
    • This reply was modified 9 years ago by  seenuvasan.
    Context Menu with sub menu #69590

    Nadezhda
    Participant

    Hello seenuvasan,

    Here is an example which shows how to hide submenu when mouse hover is not over the submenu. I hope it would be helpful.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title></title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    </head>
    <body>
        <div id='content'>
            <script type="text/javascript">
                $(document).ready(function () {
                    // Create a jqxMenu
                    var contextMenu = $("#jqxMenu").jqxMenu({ width: '120px', height: '140px', autoOpenPopup: false, mode: 'popup' });
                    // open the context menu when the user presses the mouse right button.
                    $("#jqxWidget").on('mousedown', function (event) {
                        var rightClick = isRightClick(event) || $.jqx.mobile.isTouchDevice();
                        if (rightClick) {
                            var scrollTop = $(window).scrollTop();
                            var scrollLeft = $(window).scrollLeft();
    
                            contextMenu.jqxMenu('open', parseInt(event.clientX) + 5 + scrollLeft, parseInt(event.clientY) + 5 + scrollTop);
                            return false;
                        }
                    });
    
                    // disable the default browser's context menu.
                    $(document).on('contextmenu', function (e) {
                        return false;
                    });
    
                    function isRightClick(event) {
                        var rightclick;
                        if (!event) var event = window.event;
                        if (event.which) rightclick = (event.which == 3);
                        else if (event.button) rightclick = (event.button == 2);
                        return rightclick;
                    }
    
                    $("#jqxMenu").hover(function () {
                        $(this).show();
                    });
    
                });
            </script>
            <div id='jqxWidget' style='vertical-align: middle; text-align: center; background: #eee; height: 400px; width: 400px;'>
                <div id='jqxMenu'>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li>About Us
                            <ul class="subAbout">
                                <li><a href="#">History</a></li>
                                <li><a href="#">Our Vision</a></li>
                                <li><a href="#">The Team</a></li>
                                <li><a href="#">Clients</a></li>
                                <li><a href="#">Testimonials</a></li>
                                <li><a href="#">Press</a></li>
                                <li><a href="#">FAQs</a></li>
                            </ul>
                        </li>
                        <li>Services
                        </li>
                        <li>Products
                        </li>
                        <li><a href="#">Contact Us</a>
                        </li>
                    </ul>
                </div>
                <span style='font-size: 14px; position: relative; top: 180px; font-family: Verdana Arial;'>Right-Click here to Open the Menu </span>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/

    Context Menu with sub menu #69716

    Jose
    Participant

    Hello JQWidgets team,

    I have an issue on contextmenu when the submenu is opened.

    I have a button, and in the onclick event I open the contextmenu in a fixed position: button bottom-right position. When I open a submenu is opened closed the left-top corner of the document. The submenu is opened as if the contextmenu was set at the position (top: 0, left: 0) and this is not true. There is some way to fix this issue?

    
    var contextmenu = $("#contextmenu").jqxMenu({ width: 190, theme: 'metro', autoOpenPopup: false, mode: 'popup'});
    var scrollTop = $("#button").position().top + $("#button").height();
    var scrollLeft = $("#button").position().left - (contextmenu.width() - $("#button").width());
    contextmenu.jqxMenu('setItemOpenDirection', 'LinkTasks', 'right', 'up');
    contextmenu.jqxMenu('open', scrollLeft, scrollTop);
    

    Thanks,
    José

    Context Menu with sub menu #69866

    Nadezhda
    Participant

    Hello José,

    Please, insert the following lines into your code and check if it will fix the issue. If this suggestion does not help you provide us with a JSFiddle example which demonstrates the issue you experience.

    // disable the default browser's context menu.
    $(document).on('contextmenu', function (e) {
        return false;
    });

    Best Regards,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.