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.
• The sample below demonstrates how to set the 'Summer' theme to jqxMenu.