Documentation

Styling and Appearance

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file.

Below is the list of CSS classes used by jqxMenu.

jqx-widget - applied to jqxMenu.
jqx-menu - applied to jqxMenu.
jqx-menu-dropdown-column - applied to jqxMenu UL elements.
jqx-menu-horizontal - applied to the menu when it is horizontal. Sets the menu's background.
jqx-widget-header - applied to the menu's horizontal or vertical area.
jqx-widget-content - applied to the content area of the sub menus.
jqx-menu-vertical - applied to the menu when it is vertical. Sets the menu's background.
jqx-menu-dropdown - applied to the sub menu. Sets the sub menu's background.
jqx-menu-dropdown ul - applied to the sub menu's ul elements.
jqx-menu ul - applied to the menu's ul elements.
jqx-menu-item-top - applied to the top level menu items.
jqx-menu-item - applied to the sub menu items.
jqx-menu-item-separator - applied to the menu separator items.
jqx-menu-item-hover - applied to a sub menu item when the mouse is over the item.
jqx-menu-item-top-hover - applied to a top-level menu item when the mouse is over it.
jqx-fill-state-hover - applied to a menu item when the mouse is over.
jqx-menu-item-selected - applied to a sub menu item when its sub menu is opened.
jqx-fill-state-pressed - applied to a menu item when it is opened.
jqx-menu-item-disabled - applied to a disabled sub menu item.
jqx-menu-item-top-selected - applied to a top-level menu item when its sub menu is opened.
jqx-menu-item-arrow-right - applied to a sub menu item when it has sub menu items. Displays right arrow icon.
jqx-menu-item-arrow-down - applied to a sub menu item when it has sub menu items. Displays down arrow icon.
jqx-menu-item-arrow-up - applied to a sub menu item when it has sub menu items. Displays up arrow icon.
jqx-menu-item-arrow-left - applied to a sub menu item when it has sub menu items. Displays left arrow icon.
jqx-menu-item-arrow-right-selected - applied to a sub menu item when it has sub menu items and its sub menu is opened. Displays right arrow icon.
jqx-menu-item-arrow-down-selected - applied to a sub menu item when it has sub menu items and its sub menu is opened. Displays down arrow icon.
jqx-menu-item-arrow-up-selected - applied to a sub menu item when it has sub menu items and its sub menu is opened. Displays up arrow icon.
jqx-menu-item-arrow-left-selected - applied to a sub menu item when it has sub menu items and its sub menu is opened. Displays left arrow icon.
jqx-menu-item-arrow-top-right - applied to a top-level menu item when it has sub menu items. Displays right arrow icon.
jqx-menu-item-arrow-top-left - applied to a top-level menu item when it has sub menu items. Displays left arrow icon.
jqx-menu-item a:link, a:visited - applied to the anchor elements of a sub menu item.
jqx-menu-item a:hover - applied to the anchor elements of a sub menu item.
jqx-menu-item-top a:link - applied to the anchor elements of a top-level menu item.
jqx-menu-item-top a:visited - applied to the anchor elements of a top-level menu item.
jqx-menu-item-top a:hover - applied to the anchor elements of a top-level menu item.
jqx-menu-disabled - applied to the menu widget when it is disabled.
jqx-menu-disabled a:link - applied to the anchor elements of all disabled menu items.
jqx-menu-disabled a:visited
jqx-menu-disabled a:hover
jqx-fill-state-disabled - applied to the jqxMenu when it is disabled.

When you create a custom style with colors and backgrounds for jqxMenu, you need to do the following:

Add the above CSS classes related to jqxMenu
After each CSS class, add your theme name.
For example:
jqx-menu-summer

To apply your custom style to jqxMenu, you need to set its 'theme' property(option) to point to your theme name string.

<script type="text/javascript">
    $(document).ready(function () {
        // Create a jqxMenu
        $("#jqxMenu").jqxMenu({ width: 600, height: 30, theme: 'summer'});
    });
</script>

The sample below demonstrates how to set the 'Summer' theme to jqxMenu.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>jQuery Menu and Context Menu - CSS Styling Sample</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.summer.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>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                // Create a jqxMenu
                $("#jqxMenu").jqxMenu({ width: 600, height: 30, theme: 'summer'});
            });
        </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>