HOW TO: Set Flex MenuBar Currently Selected Item Text Color

Seems like it should be fairly easy to let a user visually know which top level option they are currently under. …like should be an option or options in Flex CSS.

Here’s the best way I found to do it:

 <mx:Script>
<![CDATA[
   private function menuHandler(event:MenuEvent):void  {

         var mb:MenuBar=event.target as MenuBar;
         var selectedIndex:int=mb.selectedIndex;

         for (var i:int=0;i<mb.menuBarItems.length;i++){
           if(i==selectedIndex){
               (mb.menuBarItems[i] as MenuBarItem).setStyle("color", "0xff7009");
           }
           else{
               (mb.menuBarItems[i] as MenuBarItem).setStyle("color", "0xffffff");
           }
       }

       if (event.item.@data != "top") {
            logicHandler(event.item.@label, event.item.@data);
       }
   }
]]>
</mx:Script>
<mx:MenuBar id="appMenu"
x="0" y="114" width="100%" height="31"
labelField="@label"
dataProvider="{menuBarCollection}"
itemClick="menuHandler(event);" />

On the currently selected item, the text is set to orange. Everything else is reset to white. Example application.