18 Replies Latest reply on Jun 29, 2011 10:31 PM by sunny.adigarla

    how to show submenu in a menubar on mouseover

    Madhav Subedi Level 4
      i am using a menubar component. i want to display my submenu items on mouseover, not on a click as flex does. please somebody suggest me.
        • 1. Re: how to show submenu in a menubar on mouseover
          laurent_pinson
          You can simulate a click on a mouseOver event:

          import flash.events.mouseEvents;

          myMenuBar.addEventListener(MouseEvent.MOUSE_OVER,fakeMouseClick);

          private function fakeMouseClick(event:MouseEvent):void {
          var clickEvent:MouseEvent = new MouseEvent(MouseEvent.CLICK, true, false, event.localX, event.localY);
          dispatchEvent(clickEvent);
          }

          source & example from Doug MacCune:
          http://dougmccune.com/blog/2007/09/22/nifty-flex-accordion-menu-like-on-applecom/

          Laurent
          • 2. Re: how to show submenu in a menubar on mouseover
            Madhav Subedi Level 4
            i tried with the code given by laurent pinson.

            it dispatches the click event(i got it by adding a evnet listener for mouse click.)

            but it doesnot show the submenus.
            • 3. Re: how to show submenu in a menubar on mouseover
              Shelady Level 1
              Try this.

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="vertical"
              backgroundColor="#eeeeee">

              <mx:Style>
              Label {
              fontSize:18;
              }
              </mx:Style>

              <mx:Script>
              <![CDATA[
              import mx.events.MenuEvent;
              import mx.core.Container;

              private function menuClickHandler(event:MenuEvent):void
              {
              var viewString:String = event.item.@view;
              vStack.selectedChild=this[viewString];
              }
              ]]>
              </mx:Script>

              <mx:XMLList id="menuData">
              <menu label="View">
              <menu label="Courses" view="viewCourses"/>
              <menu label="Instructors" view="viewInstructors"/>
              <menu label="Schedule" view="viewSchedule"/>
              </menu>
              </mx:XMLList>

              <mx:MenuBar dataProvider="{menuData}"
              labelField="@label"
              itemClick="menuClickHandler(event)"/>

              <mx:ViewStack id="vStack"
              height="300" width="400">
              <mx:VBox id="viewCourses"
              height="100%" width="100%"
              backgroundColor="#eeeeee">
              <mx:Label text="This is the Courses View"/>
              </mx:VBox>
              <mx:VBox id="viewInstructors"
              height="100%" width="100%"
              backgroundColor="#dddddd">
              <mx:Label text="This is the Instructors View"/>
              </mx:VBox>
              <mx:VBox id="viewSchedule"
              height="100%" width="100%"
              backgroundColor="#cccccc">
              <mx:Label text="This is the Schedule View"/>
              </mx:VBox>
              </mx:ViewStack>

              </mx:Application>

              • 4. Re: how to show submenu in a menubar on mouseover
                Madhav Subedi Level 4
                but this code( shelady) also requires clicking to display the submenu.
                • 5. Re: how to show submenu in a menubar on mouseover
                  Madhav Subedi Level 4
                  dispatching a event works.
                  but we should dispatch a new mouse_down event on item_roll_over event.
                  now the another problem is to hide the submenu on mouse out.
                  • 6. Re: how to show submenu in a menubar on mouseover
                    noworkdone
                    Hi There i have tried the code below but the submenu still doest not show
                    • 7. Re: how to show submenu in a menubar on mouseover
                      Madhav Subedi Level 4
                      quote:

                      Originally posted by: noworkdone
                      Hi There i have tried the code below but the submenu still doest not show


                      public class MenuBarExt extends MenuBar
                      {
                      public function MenuBarExt()
                      {
                      super();

                      addEventListener(MenuEvent.ITEM_ROLL_OVER, fakeclick);
                      }

                      private function fakeclick(event:MenuEvent):void
                      {
                      var evt:MouseEvent = new MouseEvent(MouseEvent.MOUSE_DOWN, true, false);
                      //dispatchEvent(evt);
                      //at this point you need some changes.
                      //you need to find the menuitem clicked and dispatch the event with that item, not the whole menu.

                      }
                      }
                      • 8. Re: how to show submenu in a menubar on mouseover
                        dimival Level 1
                        Try this:

                        <mx:MenuBar id="mb" creationComplete="mb.addEventListener('mouseOver', rollOver, true)"/>

                        private function rollOver(event:MouseEvent):void
                        {
                        if (event.target is IMenuBarItemRenderer && mb.selectedIndex == -1)
                        {
                        var index:int = IMenuBarItemRenderer(event.target).menuBarItemIndex;
                        mb.selectedIndex = (index == 0) ? 1 : 0;
                        }
                        }

                        This worked for me
                        • 9. Re: how to show submenu in a menubar on mouseover
                          Madhav Subedi Level 4
                          Actually i have solved how to DISPLAY the submenu on mouse over.
                          Now my problem is to HIDE the submenu on mouse out.
                          • 10. Re: how to show submenu in a menubar on mouseover
                            dimival Level 1
                            I see, i tried to do that too but i couldn't find a way. If you manage to solve it let us know.

                            • 11. Re: how to show submenu in a menubar on mouseover
                              MayLam18
                              quote:

                              Originally posted by: subedimadhav@yahoo.c
                              Actually i have solved how to DISPLAY the submenu on mouse over.
                              Now my problem is to HIDE the submenu on mouse out.


                              Hi,

                              Can you please post your code so that I can use? Thanks.

                              May
                              • 12. Re: how to show submenu in a menubar on mouseover
                                Madhav Subedi Level 4
                                public function MenuCom():void
                                {
                                this.showRoot = false;
                                this.addEventListener(MenuEvent.ITEM_ROLL_OVER,_fakeMouseClick);

                                }

                                private function _fakeMouseClick(event:MenuEvent):void
                                {
                                var clickEvent:MouseEvent = new MouseEvent(MouseEvent.MOUSE_DOWN, true, false, mouseX, mouseY);

                                var x:XML = this.dataProvider[0] as XML;
                                for(var i:int = 0; i < this.menuBarItems.length; i++)
                                {
                                if( event.item == x.menuitem )
                                {
                                this.menuBarItems
                                .dispatchEvent(clickEvent);
                                }
                                }
                                }
                                here is the xml:
                                <menu>
                                <menuitem label="addd" data="1">
                                <menuitem1 id="11" label="aaa"></menuitem1>
                                </menuitem>
                                <menuitem label="b" data="2">
                                <menuitem1 id="21" label="bbb"></menuitem1>
                                </menuitem>
                                <menuitem label="c" data="3">
                                <menuitem1 id="34" label="ccc"></menuitem1>
                                </menuitem>
                                <menuitem label="d" data="4">
                                <menuitem1 id="31" label="ddd1">
                                <menuitem1 id="311" label="ddd11"></menuitem1>
                                <menuitem1 id="312" label="ddd12"></menuitem1>
                                </menuitem1>
                                <menuitem1 id="32" label="ddd2"></menuitem1>
                                <menuitem1 id="33" label="ddd3"></menuitem1>
                                </menuitem>
                                </menu>
                                • 13. Re: how to show submenu in a menubar on mouseover
                                  rdoyle720
                                  Any resolution to this? I've been trying to dispatch a click event from the Stage, but am having no luck.
                                  • 14. Re: how to show submenu in a menubar on mouseover
                                    Madhav Subedi Level 4
                                    not really..

                                    i had started a custom menu component in my free time, i didnot get any resolution on it so i left it.
                                    :(
                                    • 15. Re: how to show submenu in a menubar on mouseover
                                      Prestine

                                      Hello,

                                       

                                      Does anyone has solved the problem of showing the submenu on rollover and hiding it on rollout.

                                       

                                      I was able to show and hide submenu , but  I am not able to click the submenu,as you will see from my example.

                                       

                                      Here is my code: You can run it directly at your place.

                                       

                                      /***************************************************************************************** *************************************************/

                                       

                                      <?xml version="1.0" encoding="utf-8"?>
                                      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" >   
                                         <mx:Script>
                                             <![CDATA[
                                                 import mx.controls.Alert;
                                                 import mx.controls.Menu;
                                                 import mx.events.MenuEvent;
                                                 private function showSubMenu(event:MenuEvent):void{
                                                     var menu:Menu = myMenuBar.getMenuAt(event.index);
                                                     if(event.index == 0){
                                                         menu.x    =    myMenuBar.x + 10;
                                                         menu.y  =   myMenuBar.y + myMenuBar.height;
                                                           menu.show();
                                                     }else if(event.index == 2){
                                                         menu.x    =    myMenuBar.x + 197;
                                                         menu.y  =   myMenuBar.y + myMenuBar.height;   
                                                         menu.show();
                                                     }
                                                 }
                                                 private function hideSubMenu(event:MenuEvent):void{
                                                     var menu:Menu = myMenuBar.getMenuAt(event.index);
                                                     menu.hide();
                                                 }
                                             ]]>
                                         </mx:Script>
                                          <mx:MenuBar id="myMenuBar" labelField="@label"
                                                      itemRollOver="showSubMenu(event)" itemRollOut="hideSubMenu(event)">
                                              <mx:XMLList>
                                                  <menuitem label="MenuItem A">
                                                      <menuitem label="SubMenuItem A-1" enabled="false"/>
                                                      <menuitem label="SubMenuItem A-2"/>
                                                  </menuitem>
                                                  <menuitem label="MenuItem B"/>
                                                  <menuitem label="MenuItem C">
                                                      <menuitem label="SubMenuItem C-1"
                                                          type="radio" groupName="one"/>
                                                      <menuitem label="SubMenuItem C-2"
                                                          type="radio" groupName="one"
                                                          selected="true"/>
                                                      <menuitem label="SubMenuItem C-3"
                                                          type="radio" groupName="one"/>
                                                  </menuitem>
                                              </mx:XMLList>
                                          </mx:MenuBar>
                                      </mx:Application>

                                       

                                      /***************************************************************************************** *************************************************/

                                       

                                      Awaiting for the prompt reply with a solution.

                                       

                                      Regards......

                                      • 16. Re: how to show submenu in a menubar on mouseover
                                        sunny.adigarla

                                        I too have the same problem. I need the sub menu items with mouseOver effect for creationComplete event (on load of the swf object). My script is given below. Can anybody help me to find out the solution?

                                         

                                        <?xml version="1.0" encoding="UTF-8"?>

                                        <mx:Application name="header"

                                        xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"

                                        verticalAlign="middle" horizontalAlign="center" creationComplete="{ createAndShow(); menuSrv.send();}">

                                            <mx:Script>

                                                <![CDATA[

                                                    import mx.controls.Menu;

                                                    import mx.events.MenuEvent;

                                                    import mx.controls.Alert;

                                         

                                                    // Function to create and show a menu.

                                                    private function createAndShow():void {

                                                        // Add an event listener for the itemClick event.

                                                        myMenu.addEventListener(MenuEvent.ITEM_CLICK , itemClickInfo);

                                                        myMenu.addEventListener(MouseEvent.CLICK, itemClickInfo2);

                                                    }

                                         

                                                    // The event listener for the itemClick event.

                                                    private function itemClickInfo(event:MenuEvent):void {

                                                    //Alert.show(event.item.@data);

                                                    var url:String = event.item.@data;

                                                    var u:URLRequest = new URLRequest(url);

                                                    //navigateToURL(u, '_self');

                                                    }

                                         

                                                    // The event listener for the itemClick event.

                                                    private function itemClickInfo2(event:MouseEvent):void {

                                                    //Alert.show(event.target.data.@data);

                                                    var url:String = event.target.data.@data;

                                                    var u:URLRequest = new URLRequest(url);

                                                    //navigateToURL(u, '_self');

                                                    }

                                                ]]>

                                            </mx:Script>

                                        <mx:HTTPService id="menuSrv"

                                        url="http://localhost/sentrifugo/admin/layout/getMenuLevel1"

                                        resultFormat="e4x" />

                                        <mx:Panel width="980">

                                        <mx:Image

                                        source="http://localhost/sentrifugo/public/media/images/fleximages/layout/Capture3.png"

                                        height="70">

                                        </mx:Image>

                                        <mx:Label text="Sentrifugo" fontWeight="bold" fontSize="20">

                                        </mx:Label>

                                        <mx:MenuBar id="myMenu" showRoot="false" labelField="@label"

                                        dataProvider="{menuSrv.lastResult as XML}">

                                        </mx:MenuBar>

                                        </mx:Panel>

                                         

                                        </mx:Application>

                                        • 17. Re: how to show submenu in a menubar on mouseover
                                          Flex harUI Adobe Employee

                                          I don't understand the goal.  Please re-state.

                                          • 18. Re: how to show submenu in a menubar on mouseover
                                            sunny.adigarla Level 1

                                            I have implemented menubar with data provider attribute. I mean, i get menu items by HTTP service. In order to view the sub menu items user has to click on the menu bar atleast one time. Then only it shows the sub menu items on hover. But without clicking the menu bar even one time, i need that hover effect for sub menu items.