The following example shows how you can set the open duration of a Flex Menu control by setting the openDuration style.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/19/setting-the-open-duration-on-a-menu-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
initialize="init();">
<mx:Script>
<![CDATA[
import mx.controls.Menu;
import mx.events.SliderEvent;
private var menu:Menu;
private function init():void {
menu = Menu.createMenu(null, xmlDP, true);
menu.labelField = "@label";
menu.showRoot = false;
menu.variableRowHeight = true;
}
private function showMenu():void {
menu.show(50, 50);
}
private function slider_change(evt:SliderEvent):void {
menu.hide();
menu.setStyle("openDuration", evt.value);
showMenu();
}
]]>
</mx:Script>
<mx:XML id="xmlDP" source="menuDataProvider.xml" />
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="openDuration:">
<mx:HSlider id="slider"
minimum="0"
maximum="2000"
value="250"
snapInterval="50"
tickInterval="100"
liveDragging="true"
change="slider_change(event);" />
</mx:FormItem>
</mx:Form>
<mx:Spacer width="100%" />
<mx:Button label="Open Menu"
click="showMenu();"/>
</mx:ApplicationControlBar>
</mx:Application>
View source is enabled in the following example.
You can also set the openDuration style in an external .CSS file or <mx:Style /> block, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/19/setting-the-open-duration-on-a-menu-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
initialize="init();">
<mx:Style>
Menu {
openDuration: 1500;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.controls.Menu;
import mx.events.SliderEvent;
private var menu:Menu;
private function init():void {
menu = Menu.createMenu(null, xmlDP, true);
menu.labelField = "@label";
menu.showRoot = false;
menu.variableRowHeight = true;
}
private function showMenu():void {
menu.show(50, 50);
}
]]>
</mx:Script>
<mx:XML id="xmlDP" source="menuDataProvider.xml" />
<mx:ApplicationControlBar dock="true">
<mx:Spacer width="100%" />
<mx:Button label="Open Menu"
click="showMenu();"/>
</mx:ApplicationControlBar>
</mx:Application>
{ 1 comment… read it below or add one }
cool