Setting the open duration on a Menu control in Flex

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.

View MXML

<?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:

View MXML

<?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>

5 thoughts on “Setting the open duration on a Menu control in Flex

  1. this was very useful for my current task, i have 1 more doubt on this, how can v add those menu items including the sub level items dynamically ??

  2. I am making a menubar with drop down, the problem is after clicking once, the dropdown is working, but the code was written for mouseover. Any solutions for at first onmouseover opening the dropdown menu.

  3. Hi Peter,

    Thank you so much for this example. How do I prevent the menu from closing after a click event? I tried calling the preventDefault() method but was not successful. I need to be able to make multiple choices before closing the menu.

    Thanks again,
    Arun

Comments are closed.