ui:expand

Indicates that a menu component expands.
For example, the ui:menuList component registers this event and handles it when it’s fired.
<aura:registerEvent name="menuExpand"  type="ui:expand"
                    description="The event fired when the menu list displays." />

You can handle this event in a ui:menuList component instance. This example shows a menu component with two list items. It handles the ui:collapse and ui:expand events.

<ui:menu>
    <ui:menuTriggerLink aura:id="trigger" label="Contacts"/>
        <ui:menuList class="actionMenu" aura:id="actionMenu" 
                     menuCollapse="{!c.addMyClass}" menuExpand="{!c.removeMyClass}">
            <ui:actionMenuItem aura:id="item1" label="All Contacts" 
                               click="{!c.doSomething}"/>
            <ui:actionMenuItem aura:id="item2" label="All Primary" click="{!c.doSomething}"/>
        </ui:menuList>
</ui:menu>

This client-side controller adds a CSS class to the trigger when the menu is collapsed and removes it when the menu is expanded.

({
    addMyClass : function(component, event, helper) {
        var trigger = component.find("trigger");
        $A.util.addClass(trigger, "myClass");
    },
    removeMyClass : function(component, event, helper) {
        var trigger = component.find("trigger");
        $A.util.removeClass(trigger, "myClass");
    }
})