Apply CSS Styles

Building on the Quick Start example, you can use CSS styles to change the menu background and border colors, the text color, child menu background and border colors, as well as link and hovered link fonts and colors. Or you might prefer to roll your own themes using jQuery ThemeRoller.

In the <head> section of your HTML file, below the script that includes the document ready function, add a <style> section.

Script	Copy Code
<style type="text/css"> .wijmo-wijmenu { background: CornFlowerBlue; border-color: Navy; } .wijmo-wijmenu-text { color: DarkSlateBlue; } .wijmo-wijmenu .wijmo-wijmenu-child { background: PaleTurquoise; border: Black; } .wijmo-wijmenu a.wijmo-wijmenu-link:hover { font-family: Courier New; background: Thistle; border-color: Violet; border-style: dotted; } .wijmo-wijmenu-link { background: White; font-variant: small-caps; font-family: Andale Mono; } </style>

Script

Copy Code

<style type="text/css">
.wijmo-wijmenu
{
    background: CornFlowerBlue;
    border-color: Navy;
}
 
.wijmo-wijmenu-text
{
    color: DarkSlateBlue;
}
 
.wijmo-wijmenu .wijmo-wijmenu-child
{
    background: PaleTurquoise;
    border: Black;
}
 
.wijmo-wijmenu a.wijmo-wijmenu-link:hover
{
    font-family: Courier New;
    background: Thistle; 
    border-color: Violet; 
    border-style: dotted;  
}
 
.wijmo-wijmenu-link
{
   background: White;
   font-variant: small-caps;
   font-family: Andale Mono;
}
</style>

No changes are necessary in the <body> section of your HTML file. The basic <ul> tags are sufficient to create the menu.
Save your HTML file and open it in a browser. The menu appears like the live widget below.

You can find the CSS selectors available for the widget in the jquery.wijmo.wijmenu.css file in your installation folder.

Concepts

ThemeRoller

Reference

wijmenu API