HOW TO: Set Flex MenuBar Currently Selected Item Text Color

Posted by Quinn Madson | Posted in , , | Posted on 7:34 AM

2

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.

Comments (2)

Its very useful for me.
Thanks

Its very useful for me.
Thanks

But I use this logic with mouse handler

mnuBar_clickHandler(event:MouseEvent):void