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

The result of the above code is: