Disabling Top Level Menu Item - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: disable, enable, highlight, Menu, menu item

This topic contains 2 replies, has 2 voices, and was last updated by csoga 12 years, 4 months ago.

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

Author

Disabling Top Level Menu Item Posts

August 2, 2012 at 2:48 pm Disabling Top Level Menu Item #6538

csoga

Participant

Hi,

Is there a way to disable a top-level menu item depending on various conditions?

Also, how do I highlight the selected top-level menu item after it’s been selected?

Thanks!
Cyril

August 3, 2012 at 8:37 am Disabling Top Level Menu Item #6552

Dimitar

Participant

Hello Cyril,

Here is a solution that answers both your questions:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="Stylesheet" href="/jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>
    <style type="text/css">
    .colorClass
    {
        background-color: Green;
    }
    </style>
</head>
<body>
<div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                // Create a jqxMenu
                $("#jqxMenu").jqxMenu({ width: 600, height: 30 });
                // Disable menu item by clicking a button
                $("#btnd").click(function () {
                    $("#jqxMenu").jqxMenu('disable', 'about', true);
                });
                // Enable menu item by clicking a button
                $("#btne").click(function () {
                    $("#jqxMenu").jqxMenu('disable', 'about', false);
                });
                // Highlight a clicked element
                $("#jqxMenu").bind('itemclick', function () {
                    var children = $("#jqxMenu ul:first").children();
                    // In case a top-level menu item is clicked
                    if ($(args).is(children)) {
                        children.removeClass("colorClass");
                        $(args).addClass("colorClass"); // Applies the selected class - in this case - a green background color for highlighting
                    }
                    // In case another menu item is clicked
                    else {
                        children.removeClass("colorClass");
                        var popup = $(args).parents(".jqx-menu-popup:last");
                        var ul = $(popup.children()[0]).find('ul:first');
                        var textul = "#" + ul[0].id;
                        var n = textul.indexOf("-ul");
                        var text = textul.slice(0, (n));
                        $(text).addClass("colorClass"); // Applies the selected class
                    };
                });
            });
        </script>
        <div id='jqxWidget'>
            <div id='jqxMenu'>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li id="about">About Us
                        <ul id="about-ul">
                            <li><a href="#">History</a></li>
                            <li><a href="#">Our Vision</a></li>
                        </ul>
                    </li>
                    <li>Services
                    </li>
                    <li id="products">Products
                        <ul id="products-ul">
                            <li id="new"><a href="#">New</a>
                                <ul id="new-ul">
                                    <li><a href="#">Corporate Use</a></li>
                                    <li><a href="#">Private Use</a></li>
                                </ul>
                            </li>
                            <li id="used"><a href="#">Used</a>
                                <ul id="used-ul">
                                    <li><a href="#">Corporate Use</a></li>
                                    <li><a href="#">Private Use</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Featured</a></li>
                         </ul>
                    </li>
                    <li><a href="#">Gallery</a></li>
                    <li><a href="#">Events</a></li>
                    <li><a href="#">Careers</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </div>
        </div>
    </div>
    <button id="btnd">Disable.</button>
    <button id="btne">Enable.</button>
</body>
</html>

Note that for the highlight to work properly you need to set ids to every ul and its parent li. If the ul id is named “name-ul”, for example, the li id must be named “name”. This allows highlighting top-level menu items by clicking their lower-level children.

Best Regards,
Dimitar,

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

August 3, 2012 at 11:47 pm Disabling Top Level Menu Item #6578

csoga

Participant

Great, thanks Dimitar. It works!

Cheers,
Cyril

Author

Posts

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

You must be logged in to reply to this topic.