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 jqxListMenu:

jqx-listmenu - applying to the root jqxListMenu element.
jqx-listmenu-header - applying to the jqxListMenu's header.
jqx-widget-header - applying to the jqxListMenu's header.
jqx-listmenu-item - applying to the jqxListMenu's list items.
jqx-fill-state-normal - applying to the jqxListMenu's list items.
jqx-fill-state-pressed - applying to a jqxListMenu when the mouse button is pressed.
jqx-listmenu-separator - applying to the jqxListMenu's separators. A list item could be set to be separator using the data-role='separator' attribute.
jqx-listmenu-header-label - applying to the header's label.
jqx-listmenu-arrow-right - applying to the list item's arrow.
jqx-listmenu-arrow-right-pressed - applying to the list item when the user press his left mouse button on it.
jqx-listmenu-filter-input - applying to the filter input.
jqx-listmenu-filter - applying to the filter bar.
jqx-listmenu-item-label - applying to each list item's label.
jqx-listmenu-auto-separator - applying to the separators which have been created dynamically.
jqx-listmenu-item-readonly - applying to the readonly list items.
jqx-fill-state-disabled - applied to the jqxListMenu when it is disabled.

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

Add the above CSS classes related to jqxListMenu
After each CSS class, add your theme name.
For example: jqx-listmenu-summer
To apply your custom style to jqxListMenu, you need to set its 'theme' property(option) to point to your theme name string.
The sample below demonstrates how to set the 'Summer' theme to jqxListMenu.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>jqxListMenu supports nested lists. To create nested lists, add unordered or ordered lists inside list items. After that, set the data-role atribute of the unordered/ordered list to 'listmenu'.</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/jqxlistmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#list').jqxListMenu({ width: '50%', theme: 'summer', enableScrolling: false, showHeader: true, showBackButton: true, showFilter: false });
        });
    </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 class='default'>
    <ul id="list" data-role="listmenu">
        <li>OSI
            <ul data-role="listmenu">
                <li>Application Layer
                    <ol data-role="listmenu">
                        <li>SIP</li>
                        <li>DNS</li>
                        <li>FTP</li>
                        <li>RTP</li>
                        <li>DHCP</li>
                    </ol>
                </li>
                <li>Presentation Layer
                    <ol data-role="listmenu">
                        <li>SSL</li>
                        <li>TLS</li>
                    </ol>
                </li>
                <li>Session Layer
                    <ol data-role="listmenu">
                        <li>NetBIOS</li>
                        <li>SPDY</li>
                    </ol>
                </li>
                <li>Transport Layer
                    <ol data-role="listmenu">
                        <li>TCP</li>
                        <li>UDP</li>
                        <li>SCTP</li>
                    </ol>
                </li>
                <li>Network Layer
                    <ol data-role="listmenu">
                        <li>IP</li>
                        <li>ARP</li>
                        <li>ICMP</li>
                    </ol>
                </li>
                <li>Data Link Layer
                    <ol data-role="listmenu">
                        <li>ATM</li>
                        <li>SDLS</li>
                        <li>LLC</li>
                    </ol>
                </li>
                <li>Physical Layer
                    <ol data-role="listmenu">
                        <li>EIA/TIA-232</li>
                        <li>ITU-T V-Series</li>
                        <li>DSL</li>
                    </ol>
                </li>
            </ul>
        </li>
        <li>TCP/IP
            <ul data-role="listmenu">
                <li>Application layer
                    <ol data-role="listmenu">
                        <li>DHCP</li>
                        <li>DNS</li>
                        <li>FTP</li>
                        <li>HTTP</li>
                        <li>IMAP</li>
                        <li>LDAP</li>
                        <li>XMPP</li>
                        <li>SSH</li>
                        <li>RIP</li>
                    </ol>
                </li>
                <li>Transport layer
                    <ol data-role="listmenu">
                        <li>TCP</li>
                        <li>UDP</li>
                        <li>SCTP</li>
                    </ol>
                </li>
                <li>Internet layer
                    <ol data-role="listmenu">
                        <li>IP</li>
                        <li>ICMP</li>
                        <li>ECN</li>
                    </ol>
                </li>
                <li>Link layer
                    <ol data-role="listmenu">
                        <li>ARP</li>
                        <li>NDP</li>
                        <li>DSL</li>
                    </ol>
                </li>
            </ul>
        </li>
    </ul>
</body>
</html>

Styling and Appearance

The result of the above code is: