Question

anyone know the custom css selector for dijit.MenuItem label?

here’s the js that adds the dijit.MenuItem’s:

dojo.forEach(basemapGallery.basemaps, function(basemap) {
        //Add a menu item for each basemap
        dijit.byId("bingMenu").addChild(new dijit.MenuItem({
            label: basemap.title,
            iconClass: basemap.title,
            onClick: function(){basemapGallery.select(basemap.id)}
        }));
}); 

here’s the static html:

<td align="center" style="width: 50px;" valign="middle">
        <button id="dropdownButton" iconClass="btnImgBaseMap" title="Switch Basemap" dojoType="dijit.form.DropDownButton">                    
            <div dojoType="dijit.Menu" id="bingMenu">
                <!--The menu items are dynamically created using the basemap gallery layers-->
            </div>
        </button>
</td>

thanks!!

Answer 1

Add a custom css class to the menu

var w = dijit.byId("bingMenu");
dojo.addClass(w.domNode, "myMenu");

and use the following css

.dijitMenu.myMenu .dijitMenuItem .dijitMenuItemLabel {
  color: white;   
}

Here’s an example:

http://jsfiddle.net/cswing/GCBnF/

If you need css that is unique per menu item, then add the custom class to the menu item

var bingMenu = dijit.byId(...);
var w = new dijit.MenuItem({
        label: basemap.title,
        iconClass: basemap.title,
        onClick: function(){basemapGallery.select(basemap.id)}
    });
dojo.addClass(w.domNode, "bing");
bingMenu.addChild(w);

and use the following css

.dijitMenu.myMenu .dijitMenuItem.bing .dijitMenuItemLabel {
   color: white;   
}