The following example shows you how you can create semi-transparent pop up menus using the Flex PopUpButton control by setting the backgroundAlpha
, backgroundColor
, and borderStyle
styles on the pop up menu.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/01/30/creating-semi-transparent-popupbutton-pop-up-menus-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top" backgroundColor="white"> <mx:Style> PopUpButton { popUpStyleName: myCustomPopUpStyleName; } .myCustomPopUpStyleName { fontWeight: normal; textAlign: left; backgroundAlpha: 0.4; backgroundColor: white; borderStyle: solid; } </mx:Style> <mx:Script> <![CDATA[ import mx.controls.Menu; private var menu:Menu; private function init():void { menu = new Menu(); menu.labelField = "@label"; menu.dataProvider = xmlList; popUpButton.popUp = menu; menu.width = popUpButton.width; } ]]> </mx:Script> <mx:XMLList id="xmlList"> <node label="Alert" /> <node label="Button" /> <node label="ButtonBar" /> <node label="CheckBox" /> <node label="ColorPicker" /> <node label="ComboBox" /> </mx:XMLList> <mx:ApplicationControlBar dock="true"> <mx:PopUpButton id="popUpButton" label="Please select an item..." openAlways="true" creationComplete="init();" /> </mx:ApplicationControlBar> <mx:VBox backgroundAlpha="0.5" backgroundColor="haloSilver" width="100%" height="100%" /> </mx:Application>
View source is enabled in the following example.