[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3080
  • Last Modified:

In Flex/Actionscript, how do I change the highlighted roll-over and selection background color of the top-level menubar buttons for a <mx:MenuBar> component?

I have a Flex application where I need to be able to change the highlighted roll-over and selection background color of the top-level menubar buttons for a <mx:MenuBar> component.  I already tried using the "rollOverColor" and "selectionColor" styles, but these seem to be applied to the drop-down/popup submenu items, not the actual top-level menubar.  Also, some of the buttons on the menubar are of type "separator", which act as spacers between menubar buttons.  Ideally, I would like to be able to turn off any roll-over/selection effects for the "separator" spacers on the main menubar as well.
<mx:Style>
        .mainMenu {
            color: #FFFFFF;
            fontWeight: bold;
        }               
        .subMenu {
            fontSize: 13;
            color: #ffffff;
            backgroundColor: #000000;
            borderSides: top, bottom, right, left;
            borderThickness: 1px;
            borderColor: #ffffff;
            fontWeight: normal;
        }               
</mx:Style>
 
<mx:MenuBar id="mainMenuBar" styleName="mainMenu" menuStyleName="subMenu"
            labelField="label" fontSize="15"
            click="handleMenuBarClickEvent(mainMenuBar.selectedIndex);" 
            itemClick="handleSubMenuBarClickEvent(event);" 
            dataProvider="{menuBarArrayCollection}">
    <mx:backgroundSkin>
        @Embed(source='com/project/images/layout/menu-bar.gif')
    </mx:backgroundSkin>
</mx:MenuBar>
 
//this is a regular menubar button in object format, supplied in the dataprovider
{label:"Home", data:1, children:[]}
 
//this is a separator for the menubar in object format
{label:"", type:"separator"}

Open in new window

0
robbersrow
Asked:
robbersrow
  • 3
  • 2
1 Solution
 
Gary BenadeCommented:
You can't do that with styles, you need to use skins. I'll see if I can find you an example
0
 
robbersrowAuthor Commented:
Any examples would be greatly appreciated.
0
 
robbersrowAuthor Commented:
Instead of changing the background skin, another option would be to change the text/font color.  However, none of the styles, such as "rollOverColor" and such, seem to work.  Do you happen to have any ideas as far as this goes?
0
 
Gary BenadeCommented:
I have to go to a meeting and I'm late so this is a pretty dumb example (I used the paypal logo as a skin) but it shows the concept

You'll have to add a skin for itemSkin and itemUpSkin too
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >
	<mx:Style>
		MenuBar
		{
			color: #FF0000;
			selectedColor: #00FF00;
			itemOverSkin: Embed("https://www.paypal.com/en_US/i/btn/btn_xpressCheckout.gif");			
		}
	</mx:Style>
	<mx:XMLList id="mainMenu">
        <menuitem label="File" >
            <menuitem label="Open Calendar" data="load">
	            <menuitem label="Logout" data="logout" />
	        </menuitem>
        </menuitem>
    </mx:XMLList>	
    <mx:MenuBar styleName="test" id="mm" labelField="@label" dataProvider="{mainMenu}" />
</mx:Application>

Open in new window

0
 
robbersrowAuthor Commented:
This is what i was looking for.  Sorry for the delay in closing this solution.  Thank you for your help.
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now