jQWidgets Forums

Tagged: color, item, jqxMenu, Menu, select, selected

This topic contains 3 replies, has 3 voices, and was last updated by Dimitar 11 years, 4 months ago.

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

Author

Change color of selected menu item Posts

February 9, 2014 at 6:13 pm Change color of selected menu item #49193

davesplat

Participant

Is it possible to change the color/appearance of the last selected menu item?

February 10, 2014 at 6:59 am Change color of selected menu item #49207

Dimitar

Participant

Hello davesplat,

Please try out the following solution:

<!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>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.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 lastSelected;
                $("#jqxMenu").jqxMenu({ width: '120', mode: 'vertical' });
                $('#jqxMenu').on('itemclick', function (event) {
                    // get the clicked LI element.
                    var element = event.args;
                    if (lastSelected) {
                        lastSelected.css("background-color", "inherit");
                    };
                    lastSelected = $("#" + element.id);
                    lastSelected.css("background-color", "purple");
                });
            });
        </script>
        <div id='jqxWidget'>
            <div id='jqxMenu'>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li>About Us
                        <ul>
                            <li><a href="#">History</a></li>
                            <li><a href="#">Our Vision</a></li>
                        </ul>
                    </li>
                    <li>Services </li>
                    <li>Products
                        <ul>
                            <li><a href="#">New</a>
                                <ul>
                                    <li><a href="#">Corporate Use</a></li>
                                    <li><a href="#">Private Use</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Used</a>
                                <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>
</body>
</html>

Best Regards,
Dimitar

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

April 7, 2014 at 2:18 am Change color of selected menu item #52599

alexl

Participant

This is only a half-way solution. It changes the color of the last chosen item permanently.
What is needed is to revert the colors of all other items back to the original state.
Please advise. Thanks.

April 7, 2014 at 5:13 am Change color of selected menu item #52601

Dimitar

Participant

Hi alexl,

It does that, too, with the following lines of code:

if (lastSelected) {
    lastSelected.css("background-color", "inherit");
};

This reverts the colour of the previous selected item to the default one. Please test the example to see the functionality in action.

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.