React UI Components 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.
- 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.
